Padding và Frame trong SwiftUI

Text("Hello")
    .padding()          // Padding đều 4 hướng
 
Text("Hello")
    .padding(20)        // 20 points đều
 
Text("Hello")
    .padding(.horizontal)    // Trái phải
    .padding(.vertical, 10)  // Trên dưới 10

.padding(.all)           // Tất cả
.padding(.horizontal)    // Trái + phải
.padding(.vertical)      // Trên + dưới
.padding(.top)           // Chỉ trên
.padding(.bottom)        // Chỉ dưới
.padding(.leading)       // Chỉ trái
.padding(.trailing)      // Chỉ phải

Text("Hello")
    .padding([.top, .leading], 20)
 
Text("Hello")
    .padding(.horizontal, 16)
    .padding(.vertical, 8)

Text("Hello")
    .padding(EdgeInsets(
        top: 10,
        leading: 20,
        bottom: 10,
        trailing: 20
    ))

Text("Hello")
    .frame(width: 200, height: 100)
 
Rectangle()
    .frame(width: 100, height: 100)

Text("Hello")
    .frame(minWidth: 100, maxWidth: 300)
 
Text("Hello")
    .frame(maxWidth: .infinity)  // Full width
 
Text("Hello")
    .frame(maxWidth: .infinity, maxHeight: .infinity)  // Full screen

Text("Hello")
    .frame(width: 200, height: 100, alignment: .topLeading)
 
Text("Hello")
    .frame(maxWidth: .infinity, alignment: .leading)

// Background bao padding
Text("Hello")
    .padding()
    .background(.blue)
 
// Background chỉ text, padding bên ngoài
Text("Hello")
    .background(.blue)
    .padding()

Button("Submit") { }
    .padding(.horizontal, 24)
    .padding(.vertical, 12)
    .background(.blue)
    .foregroundColor(.white)
    .cornerRadius(8)

VStack(alignment: .leading, spacing: 8) {
    Text("Title")
        .font(.headline)
    Text("Description")
        .font(.subheadline)
        .foregroundColor(.gray)
}
.padding()
.frame(maxWidth: .infinity, alignment: .leading)
.background(.white)
.cornerRadius(12)
.shadow(radius: 2)

VStack {
    Text("Content")
}
.frame(maxWidth: .infinity)
.padding()
.background(.gray.opacity(0.1))

Text("Centered")
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(.blue.opacity(0.1))

// Có thể bị cắt
Text("Very long text here that might get truncated")
    .frame(width: 100)
 
// Không bị cắt
Text("Very long text here that won't get truncated")
    .fixedSize()
    .frame(width: 100)
 
// Chỉ fix một chiều
Text("Long text")
    .fixedSize(horizontal: true, vertical: false)

HStack {
    Text("Short")
    
    Text("This is a very long text that needs more space")
        .layoutPriority(1)  // Được ưu tiên
    
    Text("Short")
}

GeometryReader { geometry in
    VStack {
        Text("Width: \(Int(geometry.size.width))")
        Text("Height: \(Int(geometry.size.height))")
        
        Rectangle()
            .fill(.blue)
            .frame(
                width: geometry.size.width * 0.5,
                height: geometry.size.height * 0.3
            )
    }
}

GeometryReader { geo in
    let isCompact = geo.size.width < 500
    
    if isCompact {
        VStack { content }
    } else {
        HStack { content }
    }
}

VStack(spacing: 16) {
    TextField("Email", text: $email)
        .padding()
        .background(.gray.opacity(0.1))
        .cornerRadius(8)
    
    SecureField("Password", text: $password)
        .padding()
        .background(.gray.opacity(0.1))
        .cornerRadius(8)
    
    Button("Login") { }
        .frame(maxWidth: .infinity)
        .padding()
        .background(.blue)
        .foregroundColor(.white)
        .cornerRadius(8)
}
.padding(.horizontal, 24)

VStack(spacing: 0) {
    HStack {
        Text("Home")
            .font(.largeTitle.bold())
        Spacer()
        Image(systemName: "bell")
            .font(.title2)
    }
    .padding()
    .background(.white)
    
    Divider()
    
    // Content
    ScrollView {
        // ...
    }
}