swiftui - How to make a view max. width with padding in SwiftUI

Question

I'm figuring out how to make views adaptable to different screen sizes in SwiftUI. Currently, I'm trying to create a register screen that should have a certain maximum width, but still have a padding if the maximum width can't be applied on small screen sizes.

I'm using a GeometryReader at the root to retrieve the width of the view and to apply it to the "Register" button. So I tried adding a padding to the GeometryReader, but without success. The reason is, that you can set the maxWidth on the GeometryReader doesn't work, it gets wider than the screen size.

My code looks like this:

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)
    }
}

标签： swiftui

Answer 1

If I got what you're trying to do, you can just use the padding modifier on the 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)
    }
}

EDIT: look the result with maxWidth = 10000