如何在SwiftUI中使用填充设置视图的最大宽度

我正在研究如何使视图适应SwiftUI中的不同屏幕大小。目前，我正在尝试创建一个寄存器屏幕，它应该有一个特定的最大宽度，但如果最大宽度不能应用于小屏幕大小，它仍然有一个填充

我在根目录下使用GeometryReader检索视图的宽度，并将其应用于“注册”按钮。因此，我尝试向GeometryReader添加填充，但没有成功。原因是，您可以在GeometryReader上设置maxWidth，但它不起作用，它会变得比屏幕大小更宽

我的代码如下所示：

struct RegisterPage: View {
    @State private var email: String = ""
    @State private var username: String = ""
    @State private var password: String = ""

    var body: some View {
        GeometryReader { geometry in
            VStack {
                TextField("login.email_placeholder", text: self.$email)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding(.bottom)
                TextField("login.username_placeholder", text: self.$username)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding(.bottom)
                TextField("login.password_placeholder", text: self.$password)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding(.bottom)
                Button(
                    action: {},
                    label: {
                        Text("login.register_button")
                            .frame(width: geometry.size.width)
                            .padding()
                            .background(Color.blue)
                            .foregroundColor(Color.white)
                            .cornerRadius(5)
                    }
                )
            }
        }
        .frame(maxWidth: 500)
    }
}

---

如果我知道了您要做的事情，您可以在

GeometryReader

上使用

padding

修改器：

struct RegisterPage: View {
    @State private var email: String = ""
    @State private var username: String = ""
    @State private var password: String = ""

    var body: some View {
        GeometryReader { geometry in
            VStack {
                TextField("login.email_placeholder", text: self.$email)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding(.bottom)
                TextField("login.username_placeholder", text: self.$username)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding(.bottom)
                TextField("login.password_placeholder", text: self.$password)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding(.bottom)
                Button(
                    action: {},
                    label: {
                        Text("login.register_button")
                            .frame(width: geometry.size.width)
                            .padding()
                            .background(Color.blue)
                            .foregroundColor(Color.white)
                            .cornerRadius(5)
                    }
                )
            }
        }
        .frame(maxWidth: 500)
        .padding(50)
    }
}

编辑：使用

maxWidth=10000查看结果

我试过这个。但真正的问题是，如果设置的maxWidth比实际屏幕宽，则实际宽度不会设置为屏幕宽度。它仍然使用导致上面所示溢出的maxWidth。@G.Marc您确定吗？请看我在答案中的编辑。我将maxWidth设置为10000，并且所有内容的大小都正确（请确保有最新的xCode Beta版，即现在的xCode Beta 5）。这正是我想要的！我以后再考。也在beta 5上吗？@G.Marc是的，我在xCode 11 beta 5和MacOS Catalina beta 5上。谢谢@superpuccio，它真的很有效。我真的不知道我以前做错了什么…：-）