ios - 如何阻止 TextField 未对齐元素？

Question

我正在 SwiftUI 中开发一个概念验证应用程序，我想出了一个设置 Pane 的想法，如下所示:


现在我希望用户能够点击彩色的“选项 X”来更改文本。我以为我会替换 Text()与 TextField()但如果我这样做，它会产生这样的 View :



这是我用于 View 的代码:

            HStack(){
                    Spacer()
                    ZStack{
                        Rectangle()
                        .fill(Color(txtBgCol!))
                        .frame(width: 300, height: 475)
                        .cornerRadius(25)
                        .shadow(radius: 3)
                        VStack{
                            Group{
                            Spacer()
                            // preset 1

                            TextField(presets[0].name, text: $presets[0].name)
                            //Text(presets[0].name)
                            .foregroundColor(.white)
                            .padding()
                            .background(presets[0].color)
                            .cornerRadius(200)
                            .shadow(radius: 3)
                            .font(.body)

                            Text("Some settings here")
                            .foregroundColor(Color(txtCol!))
                            .padding()
                            .font(.body)
                            }
                            Group{
                            Spacer()
                            // preset 2
                            Text(presets[1].name)
                            .foregroundColor(.white)
                            .padding()
                            .background(presets[1].color)
                            .cornerRadius(200)
                            .shadow(radius: 3)
                            .font(.body)

                            Text("Some settings here")
                            .foregroundColor(Color(txtCol!))
                            .padding()
                            .font(.body)

                            }

                            Group{
                            Spacer()
                            // preset 3
                            Text(presets[2].name)
                            .foregroundColor(.white)
                            .padding()
                            .background(presets[2].color)
                            .cornerRadius(200)
                            .shadow(radius: 3)
                            .font(.body)

                            Text("Some settings here")
                            .foregroundColor(Color(txtCol!))
                            .padding()
                            .font(.body)

                            }
                            Spacer()
                        }
                    }
                    Spacer().frame(width: 30)
                }

我不确定为什么要更改 Text()至 TextField()会搞砸一切，我很高兴能更多地了解 SwiftUI 的复杂性，因为我对此很陌生。

Answer 1

TextField默认情况下扩展为最大可用宽度，因此您应该限制容器，而不是仅限制背景矩形

ZStack{
    Rectangle()
    .fill(Color(txtBgCol!))
    .frame(width: 300, height: 475)
    .cornerRadius(25)
    .shadow(radius: 3)
    VStack{

      // .. other code here
}
.frame(width: 300, height: 475)   // << this restricts TextField expanding