2

I have two views in a HStack - the left one is a simple Text view.

For the right view, i'm experimenting with using GeometryReader. I cannot get the baselines of the text aligned when I use geometry reader, but I can when I don't use it.

Here is some code:

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()
            }
        }
    }
}

Here is the outcome:

enter image description here

As you can see, the baseline alignment doesn't work when the right hand view is a GeometryReader, but it does work when the right hand view is a simple button.

Does anyone know how I can get the baselines to line up?

I'm using GeometryReader because my right-view will eventually be more complex - I'm reducing the issue I'm facing to as small a repro as possible.

Thank you!

tng
  • 4,286
  • 5
  • 21
  • 30
  • Next should be helpful https://stackoverflow.com/a/58876712/12299030, https://stackoverflow.com/a/62103264/12299030. – Asperi Jan 25 '21 at 05:23

0 Answers0