如何使布局适合屏幕尺寸

Posted 2023-03-17

【中文标题】如何使布局适合屏幕尺寸

【英文标题】：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))
        
    

源码非常缺乏经验。

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

【参考方案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()