swift - SwiftUI 中的自动布局

Question

下午好社区，

有什么方法可以在 swiftui 中自动布局，以便我的视图在纵向和横向上看起来都不错？我已经尝试了几何渲染和框架（.infinity）的所有内容，但我无法得到它。

有人设法通过 swuftui 在两种模式下都拥有他的 ap？

我附上了我的代码和几张图片。

 import SwiftUI

 struct OnBoardingView: View {


var ImageOnTop:some View{
    Image("headerPicture")
        .resizable()
        
}

var Title:some View {
    Text("Hey You")
        .font(.custom("Montserrat-Medium", size: 48))
        .foregroundColor(.white)
        
   
}
var subTitle:some View{
    Text("Out With A Porpuse ")
        .font(.custom("Montserrat-SemiBold", size: 16))
        .foregroundColor(.white)
}
var secondSubtitle:some View{
   
        Text("Find and build communities with people in your area. \n #GoodbyeCatfish \n #HellowConnections")
            .font(.custom("Montserrat-Regular", size: 16))
            .foregroundColor(.white)
            .multilineTextAlignment(.center)

}

var navigatinButton:some View{
    VStack(alignment:.center){
        
      NavigationLink(
        destination: CreateAccountView(),
        label: {
            Text("Create Account")
        })
    

        .font(.custom("Montserrat-Medium", size: 18))
        .foregroundColor(.white)
        .frame(width: 230, height: 42, alignment: .center)
        .overlay(RoundedRectangle(cornerRadius: 18)
                    .stroke(Color.yellow, lineWidth: 1.8))
        HStack{
            Text("Already have an account?")
                .font(.custom("Montserrat-Regular", size: 12))
                .foregroundColor(.white)
                .multilineTextAlignment(.leading)
            NavigationLink(
                destination: LoginView(LoginViewM: LoginViewModel()),
              label: {
                  Text("Log In")
              })
            
            .font(.custom("Montserrat-Regular", size: 12))
            .foregroundColor(.yellow)
        }
      

    }
}

var lastString: some View{
    HStack{
        Text("By using this app you agree with the")
            .foregroundColor(.white)
            .font(.custom("Montserrat-Medium", size: 11))
            Text("terms of services")
            .underline(true, color: .yellow)
                .foregroundColor(.yellow)
                .font(.custom("Montserrat-Medium", size: 11))

    }
    .padding(30)
}



var body: some View {
    GeometryReader{ geometry in
        NavigationView{
        VStack(spacing:40){
            
            VStack(alignment: .center,spacing:15){
                ImageOnTop
                    .frame(width: geometry.size.width, height: 270)
                Title
                subTitle
        }
            .frame(width: geometry.size.width, height: 270)

        
          secondSubtitle
            .frame(width: geometry.size.width, height: 75, alignment: .center)
            .padding(30)
            
        navigatinButton
           
            Spacer(minLength: 14)
           lastString
            Spacer().frame(height:20)
                        
        }
        
        .edgesIgnoringSafeArea(.all)
        .background(Color.black)
    }
        .frame(width: geometry.size.width, height: geometry.size.height)
        .navigationBarBackButtonHidden(true)
    }
    
}



 }

 struct ContentView_Previews: PreviewProvider {
static var previews: some View {
    OnBoardingView()
        .previewDevice(PreviewDevice(rawValue: "iPhone 12"))
        .previewDisplayName("iPhone 12")
        
    }
 }

标签： swiftswiftui

Answer 1

这是适用于所有屏幕尺寸和位置的代码版本。在 SwiftUI 中少即是多。硬编码的值越多，SwiftUI 就越难进行调整。

struct OnBoardingView: View {
    var ImageOnTop:some View{
        //Just to simulate,I switched to a system image you will have to adjust for your own
        Image(systemName: "square")
            .resizable()
            .foregroundColor(.blue)
    }
    
    var Title:some View {
        Text("Hey You")
            .font(.custom("Montserrat-Medium", size: 48))
            .foregroundColor(.white)
        
        
    }
    var subTitle:some View{
        Text("Out With A Porpuse ")
            .font(.custom("Montserrat-SemiBold", size: 16))
            .foregroundColor(.white)
    }
    var secondSubtitle:some View{
        VStack{
            Text("Find and build communities with people in your area.")
                .lineLimit(1)
            Text("#GoodbyeCatfish \n #HellowConnections")
        }
        
        .font(.custom("Montserrat-Regular", size: 16))
        .foregroundColor(.white)
        .multilineTextAlignment(.center)
        .minimumScaleFactor(0.5)
    }
    
    var navigatinButton:some View{
        VStack(alignment:.center){
            NavigationLink(
                destination: Text("CreateAccountView()"),
                label: {
                    Text("Create Account")
                })
                .font(.custom("Montserrat-Medium", size: 18))
                .foregroundColor(.white)
                //Don't fix the size or thre won't be any differences between devices
                .frame(minWidth: 0, idealWidth: 230, maxWidth: 230, minHeight: 0, idealHeight: 42, maxHeight: 42, alignment: .center)
                .overlay(RoundedRectangle(cornerRadius: 18)
                .stroke(Color.yellow, lineWidth: 1.8))
            HStack{
                Text("Already have an account?")
                    .font(.custom("Montserrat-Regular", size: 12))
                    .foregroundColor(.white)
                    .multilineTextAlignment(.leading)
                NavigationLink(
                    destination: Text("LoginView(LoginViewM: LoginViewModel()"),
                    label: {
                        Text("Log In")
                    })
                    .font(.custom("Montserrat-Regular", size: 12))
                    .foregroundColor(.yellow)
            }
        }
    }
    
    var lastString: some View{
        HStack{
            Text("By using this app you agree with the")
                .foregroundColor(.white)
                .font(.custom("Montserrat-Medium", size: 11))
            Text("terms of services")
                .underline(true, color: .yellow)
                .foregroundColor(.yellow)
                .font(.custom("Montserrat-Medium", size: 11))
            
        }
        .padding(30)
    }
    var body: some View {
        GeometryReader{ geometry in
            NavigationView{
                VStack{
                    ImageOnTop
                        .frame(height: geometry.size.height * 0.2)
                    VStack{
                        Title
                        subTitle
                    }.frame(height: geometry.size.height * 0.25)

                    Spacer()
                    secondSubtitle
                    //You can give spaces more weight by addign spacers
                    //This makes the space above the button twice as wide as the bottom
                    Spacer()
                    Spacer()
                    navigatinButton
                    Spacer()
                    lastString
                }
                .background(Color.black)
                .edgesIgnoringSafeArea(.all)
                .navigationBarHidden(true)
            }
            .navigationBarBackButtonHidden(true)
        }
        
    }
}