如何使布局适合屏幕尺寸答案

【问题标题】：How to Fit the layout to the screen size如何使布局适合屏幕尺寸
【发布时间】：2021-06-21 21:51:38
【问题描述】：

我刚刚开始学习 Swift。

上图是我使用VStack和HStack制作的画面。

但我想将按钮或文本放在任何我想要的地方。

这张图是我用相框调整大小整理出来的。

但是，当分辨率改变时，会出现按钮或文本超出屏幕的问题。

我想保持这种安排，让它自动适用于各种 iPhone 分辨率。

VStack {
        HStack {
            Text("Hello")
                .font(.largeTitle)
                .fontWeight(.black)
                .foregroundColor(Color.black)
                .multilineTextAlignment(.center)
        }
        VStack {
            HStack {
                VStack {
                    Text("ID")
                        .padding()
                    Text("PW")
                        .padding()
                }
                
                VStack {
                    TextField("ID", text: $ID)
                        .padding()
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                    SecureField("password", text: $password)
                        .padding()
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                }
            }
            
        }
        VStack {
            Button(action: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/{}/*@END_MENU_TOKEN@*/) {
                Text("Login")
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundColor(Color.white)
        
            }
            .padding()
            .background(Color.green.cornerRadius(18))
            Button(action: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/{}/*@END_MENU_TOKEN@*/) {
                Text("Sign up")
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundColor(Color.white)
            }
            .padding()
            .background(Color.red.cornerRadius(18))
        }
    }

源码非常缺乏经验。

如果您能告诉我这是否是编写布局的正确方法，我将不胜感激。

【问题讨论】：

标签： ios swift xcode layout swiftui

【解决方案1】：

使用.frame(maxWidth: .infinity)。这使得View 的大小最大化到他们的容器。

另外，在Text 上使用.background() 修饰符而不是Button。

如果您像代码一样在Button 上使用.background()，Button 仅适用于文本区域。

VStack {
    Button(action: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/{}/*@END_MENU_TOKEN@*/) {
        Text("Login")
            .font(.title)
            .fontWeight(.bold)
            .frame(maxWidth: .infinity, alignment: .center)
            .foregroundColor(Color.white)
            .background(Color.green.cornerRadius(18)) 
    }
    .padding()

    Button(action: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/{}/*@END_MENU_TOKEN@*/) {
        Text("Sign up")
            .font(.title)
            .fontWeight(.bold)
            .frame(maxWidth: .infinity, alignment: .center)
            .foregroundColor(Color.white)
            .background(Color.red.cornerRadius(18))
    }
    .padding()
}

【讨论】：