Spacer và Divider

1. Spacer

Spacer đẩy views ra xa nhau, chiếm hết không gian còn lại.

Cơ bản

HStack {
    Text("Left")
    Spacer()
    Text("Right")
}

VStack {
    Text("Top")
    Spacer()
    Text("Bottom")
}

Nhiều Spacer

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

Minimum Length

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

2. Spacer Patterns

Push to Edge

// 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") { }
}

Center với Spacers

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

Navigation Bar Style

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

3. Divider

Divider tạo đường kẻ phân cách.

Cơ bản

VStack {
    Text("Section 1")
    Divider()
    Text("Section 2")
}

HStack {
    Text("Left")
    Divider()
    Text("Right")
}

Styled Divider

Divider()
    .frame(height: 2)
    .background(.blue)

// Custom divider
Rectangle()
    .fill(.gray.opacity(0.3))
    .frame(height: 1)

4. Divider Patterns

List Separator

VStack(spacing: 0) {
    ForEach(items) { item in
        HStack {
            Text(item.name)
            Spacer()
            Text(item.value)
        }
        .padding()

        Divider()
            .padding(.leading)  // Indent divider
    }
}

Section Header

VStack(alignment: .leading, spacing: 8) {
    Text("SECTION TITLE")
        .font(.caption)
        .foregroundColor(.gray)

    Divider()

    // Content
    Text("Content here")
}

5. Kết hợp Spacer và Divider

Settings Row

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)
        }
    }
}

Profile Stats

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()

Bottom Bar

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)
    }
}

---

📝 Tóm tắt

Component	Mục đích
Spacer	Đẩy views ra xa, chiếm không gian trống
Divider	Tạo đường kẻ phân cách

Spacer tips:

• Trong HStack: mở rộng theo chiều ngang
• Trong VStack: mở rộng theo chiều dọc
• Spacer(minLength:) cho minimum spacing

Divider tips:

• Tự động horizontal trong VStack
• Tự động vertical trong HStack
• Có thể styled với .frame() và .background()