如何使布局适合屏幕尺寸

Question

我刚开始学习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))
        }
    }

源码很新手

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

Answer 1

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

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

如果您像代码一样在 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()
}

如何使布局适合屏幕尺寸

How to Fit the layout to the screen size

layout

xcode

ios

swift

swiftui