SwiftUI Button 比例宽度高度

Posted

技术标签:

【中文标题】SwiftUI Button 比例宽度高度【英文标题】:SwiftUI Button proportional width height 【发布时间】:2019-10-16 11:47:57 【问题描述】:

我们如何在SwiftUI 中实现Buttonproportional 大小

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


如何根据设备实现登录和注册按钮的比例。

【问题讨论】:

【参考方案1】:

您可以使用GeometryReader 访问设备sizeframe 来设置按钮的比例宽度。例如:

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

【讨论】:

以上是关于SwiftUI Button 比例宽度高度的主要内容,如果未能解决你的问题,请参考以下文章

如何根据另一个视图的高度/宽度按比例设置视图高度/宽度?

js实现网页 高度和宽度成比例的代码

CSS3如何固定图片宽度使图片高度按图片比例自适应?

css实现宽度与高度成比例

CSS3如何固定图片宽度使图片高度按图片比例自适应?

具有比例宽度和文本驱动高度的动态 UILabel