SwiftUI Button пропорциональная высота по высоте

Question

Как мы можем достичь proportional размера для Button в SwiftUI

struct ContentView: View {

    @State private var emailText = ""
    @State private var passwordText = ""

    var body: some View {
        NavigationView {
            ScrollView {

                VStack(alignment: .center, spacing: 30.0, content: {

                    TextField("Enter Email", text: $emailText)
                        .textFieldStyle(RoundedBorderTextFieldStyle())

                    SecureField("Enter Password", text: $passwordText)
                        .textFieldStyle(RoundedBorderTextFieldStyle())

                    Button(action: {
                        print("Button Tapped")
                    }) {
                        Text("Login")

                    }.frame(width: 100,
                            height: 40,
                            alignment: .center).background(Color.orange)

                   Button(action: {
                     print("Button Tapped")
                   }) {
                     Text("Sign Up")

                  }.frame(width: 150,
                         height: 40,
                         alignment: .center).background(Color.yellow)


                }).padding()
            }
            .navigationBarTitle("Login")
        }
    }
}

---

Какдобиться пропорциональности для кнопок входа и регистрации в зависимости от устройства.

Answer 1

Вы можете использовать GeometryReader для доступа к устройству size и frame для установки пропорциональной ширины кнопок. Например:

struct ContentView: View {

    @State private var emailText = ""
    @State private var passwordText = ""

    var body: some View {
        GeometryReader { geometry in
            NavigationView {
                ScrollView {

                    VStack(alignment: .center, spacing: 30.0, content: {

                        TextField("Enter Email", text: self.$emailText)
                            .textFieldStyle(RoundedBorderTextFieldStyle())

                        SecureField("Enter Password", text: self.$passwordText)
                            .textFieldStyle(RoundedBorderTextFieldStyle())

                        Button(action: {
                            print("Button Tapped")
                        }) {
                            Text("Login")

                        }.frame(width: geometry.size.width / 4,
                                height: 40,
                                alignment: .center).background(Color.orange)

                        Button(action: {
                            print("Button Tapped")
                        }) {
                            Text("Sign Up")

                        }.frame(width: geometry.size.width / 3,
                                height: 40,
                                alignment: .center).background(Color.yellow)


                    }).padding()
                }
                .navigationBarTitle("Login")
            }
        }
    }
}