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

Question

我正在使用 GeometryReader确保图像永远不会超过屏幕宽度的一半。然而，它把我的其余观点搞乱了 GeometryReader请求 View 的完整高度/宽度(如带有绿色 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)