如何在包含 GeometryReader

问题描述

我在 HStack 中有两个视图 - 左侧是一个简单的 Text 视图。

对于正确的观点,我正在尝试使用 GeometryReader。使用几何阅读器时无法对齐文本的基线,但不使用时可以对齐。

这是一些代码

struct CompositeView : View {
    var body : some View {
        vstack {
            Button(action: {
            }) {
                Text("Another text")
                    .padding(5)
                    .overlay(RoundedRectangle(cornerRadius: 5).stroke(Color.blue,linewidth: 2.0))
            }
        }
    }
}

struct GeometryReaderTest : View {
    var tags: [String]

    init(tags : [String]) {
        self.tags = tags
    }

    @State private var viewHeight = CGFloat.zero

    var body: some View {
        vstack {
            GeometryReader { geometry in
                ZStack {
                    ForEach(self.tags,id: \.self) { tag in
                        Button(action: {}) {
                            Text(tag)
                                .padding(5)
                                .overlay(RoundedRectangle(cornerRadius: 5).stroke(Color.blue,linewidth: 2.0))
                        }
                    }
                }
                .background(getHeight(self.$viewHeight))
            }
        }
        .frame(height: viewHeight)
    }
    
    /// Get the height of the Geometry view
    ///
    private func getHeight(_ height: Binding<CGFloat>) -> some View {
        return GeometryReader { geometry -> Color in
            let rect = geometry.frame(in: .local)
            dispatchQueue.main.async {
                height.wrappedValue = rect.size.height
            }
            return .clear
        }
    }
}

struct MyTestView : View {
    var body : some View {
        vstack {
            HStack (alignment: .firstTextBaseline) {
                ZStack {
                    Text("Hello")
                }
                GeometryReaderTest(tags: ["One"])
            }
            HStack (alignment: .firstTextBaseline) {
                ZStack {
                    Text("Hello")
                }
                CompositeView()
            }
        }
    }
}

结果如下:

enter image description here

如您所见,当右手视图是 GeometryReader 时基线对齐不起作用,但当右手视图是一个简单的按钮时它确实起作用。

有谁知道我如何让基线对齐?

我使用 GeometryReader 是因为我的右视图最终会更加复杂 - 我正在尽可能减少我面临的问题。

谢谢!

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)