Make a VStack fill the width of the screen in SwiftUI

前端 未结 14 1666
失恋的感觉
失恋的感觉 2020-12-07 16:58

Given this code :

import SwiftUI

struct ContentView : View {
    var body: some View {
        VStack(alignment: .leading) {
            Text(\"Title\")
            


        
相关标签:
14条回答
  • 2020-12-07 18:00

    I know this will not work for everyone, but I thought it interesting that just adding a Divider solves for this.

    struct DividerTest: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Foo")
            Text("Bar")
            Divider()
        }.background(Color.red)
      }
    }
    
    0 讨论(0)
  • 2020-12-07 18:00

    Login Page design using SwiftUI

    import SwiftUI
    
    struct ContentView: View {
    
        @State var email: String = "william@gmail.com"
        @State var password: String = ""
        @State static var labelTitle: String = ""
    
    
        var body: some View {
            VStack(alignment: .center){
                //Label
                Text("Login").font(.largeTitle).foregroundColor(.yellow).bold()
                //TextField
                TextField("Email", text: $email)
                    .textContentType(.emailAddress)
                    .foregroundColor(.blue)
                    .frame(minHeight: 40)
                    .background(RoundedRectangle(cornerRadius: 10).foregroundColor(Color.green))
    
                TextField("Password", text: $password) //Placeholder
                    .textContentType(.newPassword)
                    .frame(minHeight: 40)
                    .foregroundColor(.blue) // Text color
                    .background(RoundedRectangle(cornerRadius: 10).foregroundColor(Color.green))
    
                //Button
                Button(action: {
    
                }) {
                    HStack {
                        Image(uiImage: UIImage(named: "Login")!)
                            .renderingMode(.original)
                            .font(.title)
                            .foregroundColor(.blue)
                        Text("Login")
                            .font(.title)
                            .foregroundColor(.white)
                    }
    
    
                    .font(.headline)
                    .frame(minWidth: 0, maxWidth: .infinity)
                    .background(LinearGradient(gradient: Gradient(colors: [Color("DarkGreen"), Color("LightGreen")]), startPoint: .leading, endPoint: .trailing))
                    .cornerRadius(40)
                    .padding(.horizontal, 20)
    
                    .frame(width: 200, height: 50, alignment: .center)
                }
                Spacer()
    
            }.padding(10)
    
                .frame(minWidth: 0, idealWidth: .infinity, maxWidth: .infinity, minHeight: 0, idealHeight: .infinity, maxHeight: .infinity, alignment: .top)
                .background(Color.gray)
    
        }
    
    }
    
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }
    
    0 讨论(0)
提交回复
热议问题