HStack: nó là gì, HStack VStack ZStack trong SwiftUI

HStack trong SwiftUI là gì?

HStack (Horizontal Stack) là một container SwiftUI sắp xếp các view con thành một đường ngang. Mỗi phần tử con chiếm không gian cần thiết, trừ khi được chỉ định khác. HStack chấp nhận hai tham số bắt buộc: alignment (căn chỉnh dọc, mặc định .center) và spacing (khoảng cách giữa các phần tử, mặc định nil — khoảng cách hệ thống). Theo Apple Human Interface Guidelines (2025), HStack là lựa chọn ưu tiên cho thanh nút, hàng nhập liệu và danh sách biểu tượng ngang.

HStack(alignment: .center, spacing: 16) {
    Image("star")
        .resizable()
        .frame(width: 24, height: 24)
    Text("Yêu thích")
        .font(.body)
    Spacer()
    Image("chevron.right")
        .foregroundColor(.gray)
}
.padding()

Trong ví dụ này, HStack tạo một hàng gồm ba phần tử: biểu tượng, văn bản và mũi tên. Spacer() đẩy các phần tử ra xa — biểu tượng và văn bản dính vào cạnh trái, còn mũi tên dính vào cạnh phải. Alignment .center căn chỉnh cả ba phần tử dọc theo trục trung tâm dọc.

VStack: bố cục dọc và căn chỉnh

VStack (Vertical Stack) là một container SwiftUI để sắp xếp các phần tử con theo chiều dọc từ trên xuống dưới. Tương tự HStack, nó chấp nhận alignment (căn chỉnh ngang: .leading, .center, .trailing) và spacing. VStack là nền tảng để xây dựng biểu mẫu, thẻ, hồ sơ và danh sách cài đặt. Theo Apple Docs (2025), VStack kết hợp với LazyVStack bao phủ 85% các tình huống bố cục dọc trong SwiftUI.

VStack(alignment: .leading, spacing: 8) {
    Text("Tên công thức")
        .font(.headline)
    Text("Thời gian chuẩn bị: 30 phút")
        .font(.subheadline)
        .foregroundColor(.secondary)
    HStack(spacing: 4) {
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.8")
    }
}

VStack với alignment .leading căn chỉnh tất cả các hàng về cạnh trái. Bên trong VStack, một HStack được lồng vào để đánh giá — đây là mẫu điển hình để xây dựng bố cục phức tạp thông qua các stack lồng nhau. Spacing 8 tạo khoảng cách đều giữa các dòng văn bản.

ZStack: xếp chồng phần tử theo chiều sâu

ZStack (Z-axis Stack) là một container SwiftUI để xếp chồng các view con lên nhau dọc theo trục chiều sâu. Phần tử đầu tiên trong thân ZStack được vẽ ở nền, phần tử cuối cùng — ở tiền cảnh. ZStack được sử dụng cho hình nền có văn bản bên trên, chỉ báo tùy chỉnh, nút lớp phủ và hoạt ảnh chuyển tiếp. Theo Apple Docs (2025), ZStack mặc định căn chỉnh tất cả các phần tử vào trung tâm (alignment: .center) nhưng hỗ trợ mọi tổ hợp Alignment.

ZStack(alignment: .bottomLeading) {
    Image("mountains")
        .resizable()
        .scaledToFill()
        .frame(height: 200)
        .clipped()
    Color.black
        .opacity(0.3)
    Text("Phong cảnh núi non")
        .font(.title)
        .bold()
        .foregroundColor(.white)
        .padding()
}

Trong ví dụ này, ZStack xếp chồng ba lớp: hình ảnh ngọn núi, màu đen bán trong suốt để làm tối và văn bản tiêu đề. Alignment .bottomLeading ghim văn bản vào góc dưới bên trái. Việc làm tối (Color.black.opacity(0.3)) cải thiện khả năng đọc văn bản trên các vùng sáng của hình ảnh.

HStack vs VStack vs ZStack: khi nào sử dụng loại nào

Lựa chọn stack phụ thuộc vào hướng bố cục: HStack — sắp xếp ngang (nút, hàng nhập liệu), VStack — sắp xếp dọc (biểu mẫu, thẻ), ZStack — xếp chồng (nền, lớp phủ). Theo Apple Human Interface Guidelines (2025), đối với bố cục phức tạp, các stack được lồng vào nhau: một VStack bên ngoài chứa HStack và ZStack bên trong. LazyHStack và LazyVStack là các phiên bản lười biếng cho bộ sưu tập lớn.

Alignment và Spacing: tinh chỉnh stack

Các tham số alignment và spacing cung cấp toàn quyền kiểm soát vị trí của các phần tử con trong stack SwiftUI. Alignment trong HStack kiểm soát căn chỉnh dọc của các phần tử có chiều cao khác nhau. VStack alignment kiểm soát căn chỉnh ngang. Spacing đặt khoảng cách giữa tất cả các phần tử con trong stack. Theo SwiftUI Lab (2025), alignment có thể là tiêu chuẩn (.top, .center, .bottom) hoặc tùy chỉnh thông qua AlignmentID.

HStack(alignment: .top, spacing: 12) {
    Text("Tiêu đề")
        .font(.largeTitle)
    VStack(alignment: .leading) {
        Text("Phụ đề")
        Text("Mô tả với văn bản bổ sung")
            .font(.caption)
            .foregroundColor(.gray)
    }
}
.padding()

Ở đây, alignment .top căn chỉnh tiêu đề lớn và VStack lồng nhau dọc theo cạnh trên. Spacing 12 tạo khoảng cách giữa chúng. VStack lồng nhau với alignment .leading căn chỉnh phụ đề và mô tả về cạnh trái. Việc kết hợp các alignment khác nhau bên trong các stack lồng nhau cho phép kiểm soát bố cục chính xác.

Stack lồng nhau: ví dụ xây dựng bố cục phức tạp

Các giao diện thực tế được xây dựng bằng cách kết hợp HStack, VStack và ZStack lồng nhau. Một thẻ sản phẩm là một ví dụ điển hình: một VStack bên ngoài chứa hình ảnh (ZStack với lớp phủ), tiêu đề (Text), đánh giá (HStack) và giá. Theo Apple Sample Projects (2025), độ sâu lồng nhau của stack hiếm khi vượt quá 4 cấp — lồng nhau sâu hơn làm giảm khả năng đọc mã và hiệu suất.

VStack(spacing: 12) {
    ZStack(alignment: .topTrailing) {
        Image("product")
            .resizable()
            .scaledToFit()
        Text("-20%")
            .font(.caption)
            .bold()
            .foregroundColor(.white)
            .padding(6)
            .background(Color.red)
            .cornerRadius(4)
    }
    Text("Điện thoại thông minh Model X")
        .font(.headline)
    HStack(spacing: 8) {
        Text("$999")
            .font(.title2)
            .bold()
        Spacer()
        Image("star.fill")
            .foregroundColor(.yellow)
        Text("4.7")
    }
}
.padding()

Trong ví dụ này, VStack kết hợp một ZStack (hình ảnh với huy hiệu giảm giá), tên sản phẩm và một HStack (giá + đánh giá). ZStack sử dụng alignment .topTrailing để đặt huy hiệu «-20%» ở góc trên bên phải. Spacer trong HStack đẩy giá về cạnh trái và đánh giá về cạnh phải.