Question

我正在弄清楚如何使视图适应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)
    }
}

Answer 1

如果我知道您要做什么，则可以在padding上使用GeometryReader修饰符：

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

查看结果

如何使视图最大化SwiftUI中带有填充的宽度

1 个答案: