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

Posted 2023-02-24

【中文标题】如何使视图最大。 SwiftUI 中带填充的宽度

【英文标题】：How to make a view max. width with padding in SwiftUI

【发布时间】：2019-08-04 08:42:02

【问题描述】：

我正在研究如何在 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)
    

【参考方案1】：

如果我得到你想要做的事情，你可以在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，它确实有效。真的不知道我之前做错了什么...... :-)