GeometryReader 不需要的全高/全宽行为

Question

我正在使用GeometryReader确保图像永远不会超过屏幕宽度的一半。但是，当GeometryReader请求视图的完整高度/宽度时，它会弄乱我的其余视图（如带有绿色 BG 的图像所示）。好像它插入了不需要的Spacer().

struct ContentView: View {
    var body: some View {
        VStack{
            VStack {
                GeometryReader{ g in
                    HStack{
                        Text("Text Left").background(Color.yellow)
                        Image(systemName: "checkmark")
                            .resizable()
                            .aspectRatio(contentMode:.fit)
                            .frame(maxWidth: g.size.width/2)
                    }.background(Color.yellow)
                }.background(Color.green)
            }
            Text("Bottom Text")

            // This Spacer should push the "Bottom Text" right below the other Text and Image
            Spacer()
        }
    }
}

如果我删除GeometryReader并将宽度设置为固定大小，它会按预期工作并且不会显示绿色 BG。

struct ContentView: View {
    var body: some View {
        VStack{
            VStack {
                HStack{
                    Text("Text Left").background(Color.yellow)
                    Image(systemName: "checkmark")
                        .resizable()
                        .aspectRatio(contentMode:.fit)
                        .frame(maxWidth: 200)
                }.background(Color.yellow)
            }.background(Color.green)
            Text("Bottom Text")
            Spacer()
        }
    }
}

这是一个错误还是如何使用GeometryReader?

Answer 1

为什么要在vstack中设置geometryreader？也许你有一个理由......但这种方式，我认为，如你所愿？！

但是，是的，你是对的，几何阅读器的东西很奇怪......

 GeometryReader{ g in

            VStack{
                VStack {
                    HStack{
                        Text("Text Left").background(Color.yellow)
                        Image(systemName: "checkmark")
                            .resizable()
                            .aspectRatio(contentMode:.fit)
                            .frame(maxWidth: g.size.width/2)
                            .background(Color.red)
                    }.background(Color.yellow)

                }
                Text("Bottom Text")

                // This Spacer should push the "Bottom Text" right below the other Text and Image
                Spacer()
            }
        }.background(Color.green)