Spacer và Divider trong SwiftUI

HStack {
    Text("Left")
    Spacer()
    Text("Right")
}
 
VStack {
    Text("Top")
    Spacer()
    Text("Bottom")
}

HStack {
    Text("A")
    Spacer()
    Text("B")
    Spacer()
    Text("C")
}
// A        B        C

HStack {
    Text("Left")
    Spacer(minLength: 50)  // Ít nhất 50 points
    Text("Right")
}

// Push sang trái
HStack {
    Text("Left aligned")
    Spacer()
}
 
// Push sang phải
HStack {
    Spacer()
    Text("Right aligned")
}
 
// Push lên trên
VStack {
    Text("Top")
    Spacer()
}
 
// Push xuống dưới
VStack {
    Spacer()
    Button("Bottom Button") { }
}

HStack {
    Spacer()
    Text("Centered")
    Spacer()
}

HStack {
    Button("Back") { }
    Spacer()
    Text("Title")
        .font(.headline)
    Spacer()
    Button("Edit") { }
}
.padding()

VStack {
    Text("Section 1")
    Divider()
    Text("Section 2")
}
 
HStack {
    Text("Left")
    Divider()
    Text("Right")
}

Divider()
    .frame(height: 2)
    .background(.blue)
 
// Custom divider
Rectangle()
    .fill(.gray.opacity(0.3))
    .frame(height: 1)

VStack(spacing: 0) {
    ForEach(items) { item in
        HStack {
            Text(item.name)
            Spacer()
            Text(item.value)
        }
        .padding()
        
        Divider()
            .padding(.leading)  // Indent divider
    }
}

VStack(alignment: .leading, spacing: 8) {
    Text("SECTION TITLE")
        .font(.caption)
        .foregroundColor(.gray)
    
    Divider()
    
    // Content
    Text("Content here")
}

struct SettingsRow: View {
    let icon: String
    let title: String
    let value: String
    
    var body: some View {
        VStack(spacing: 0) {
            HStack {
                Image(systemName: icon)
                    .foregroundColor(.blue)
                    .frame(width: 30)
                
                Text(title)
                
                Spacer()
                
                Text(value)
                    .foregroundColor(.gray)
                
                Image(systemName: "chevron.right")
                    .foregroundColor(.gray)
                    .font(.caption)
            }
            .padding()
            
            Divider()
                .padding(.leading, 56)
        }
    }
}

HStack {
    VStack {
        Text("120")
            .font(.title2.bold())
        Text("Posts")
            .font(.caption)
            .foregroundColor(.gray)
    }
    
    Spacer()
    Divider().frame(height: 40)
    Spacer()
    
    VStack {
        Text("1.2K")
            .font(.title2.bold())
        Text("Followers")
            .font(.caption)
            .foregroundColor(.gray)
    }
    
    Spacer()
    Divider().frame(height: 40)
    Spacer()
    
    VStack {
        Text("500")
            .font(.title2.bold())
        Text("Following")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

struct BottomBar: View {
    var body: some View {
        VStack(spacing: 0) {
            Divider()
            
            HStack {
                Spacer()
                
                Button { } label: {
                    VStack {
                        Image(systemName: "house.fill")
                        Text("Home").font(.caption)
                    }
                }
                
                Spacer()
                
                Button { } label: {
                    VStack {
                        Image(systemName: "magnifyingglass")
                        Text("Search").font(.caption)
                    }
                }
                
                Spacer()
                
                Button { } label: {
                    VStack {
                        Image(systemName: "person.fill")
                        Text("Profile").font(.caption)
                    }
                }
                
                Spacer()
            }
            .padding(.vertical, 8)
        }
        .background(.white)
    }
}