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的东西很奇怪...

 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)