SwiftUI：如何将视图限制为仅在一个方向上调整大小？

Question

如何限制视图仅向下调整大小？

我正在尝试添加更多按钮，并调整视图的大小以容纳按钮，而不会与上方的红色矩形重叠。

这是我当前正在使用的代码：

struct ContentView: View {
    var body: some View {
        VStack{
            RoundedRectangle(cornerRadius: 20)
                .frame(width: .infinity, height: 55)
                .foregroundColor(.red)
                
            HStack{
                Spacer()
                ZStack{
                    RoundedRectangle(cornerRadius: 20)
                        .foregroundColor(.green)
                    
                    VStack{
                        Button(action: {}) {
                            Text("Test Button")
                                .foregroundColor(.white)
                                .font(.headline)
                                .frame(width: .infinity)
                            Spacer()
                        }.padding()
                        
                        Button(action: {}) {
                            Text("Test Button")
                                .foregroundColor(.white)
                                .font(.headline)
                                .frame(width: .infinity)
                            Spacer()
                        }.padding()
                        
                        Button(action: {}) {
                            Text("Test Button")
                                .foregroundColor(.white)
                                .font(.headline)
                                .frame(width: .infinity)
                            Spacer()
                        }.padding()
                    }
                    
                }.frame(width: 250, height: 100)
            }
            Spacer()
        }


    }
}

Answer 1

将您的.frame(width: 250, height: 100)更改为.frame(width: 250, height: 100, alignment: .top)，原始示例默认为.center，这就是为什么它会扩展为红色矩形的原因。