Section trong SwiftUI: nó là gì, tạo section và nhóm

Section trong SwiftUI là gì?

Section là một component cấu trúc của SwiftUI được thiết kế để nhóm các phần tử bên trong container Form và List. Không giống như VStack hay HStack, Section thêm khoảng cách hệ thống, tiêu đề và chân trang, cũng như làm nổi bật trực quan nhóm dưới dạng khối có góc bo tròn trên iOS.

Section không thay đổi hành vi của các phần tử con — nó chỉ tổ chức cách trình bày. Tất cả điều khiển bên trong Section — Picker, Toggle, TextField — hoạt động bình thường, nhưng được kết hợp trực quan thành một nhóm logic. Điều này đặc biệt quan trọng đối với form trên màn hình nơi người dùng cần nhanh chóng định hướng trong cấu trúc nhập liệu.

Hệ thống tự động quản lý khoảng cách giữa các section: khoảng cách giữa các Section trên iOS là 16–20 điểm, giữa các phần tử trong Section là 0 (dấu phân cách giữa các hàng). Nhà phát triển không thể thay đổi các khoảng cách này thông qua bộ điều chỉnh padding — chúng được kiểm soát bởi hệ thống để đảm bảo giao diện nhất quán.

Tiêu đề và chân trang của Section

Section chấp nhận hai tham số tùy chọn: header — tiêu đề của nhóm, và footer — văn bản giải thích bên dưới nhóm. Tiêu đề hiển thị phía trên các phần tử section bằng phông chữ in đậm kiểu caption, chân trang bằng phông nhỏ hơn màu xám. Cả hai tham số đều chấp nhận bất kỳ SwiftUI View nào, không chỉ Text.

Tiêu đề của Section giúp người dùng hiểu các phần tử trong nhóm thuộc danh mục nào. Ví dụ, trên màn hình cài đặt, các tiêu đề như “Thông báo”, “Quyền riêng tư” và “Tài khoản” định hướng người dùng ngay lập tức. Chân trang hữu ích cho các giải thích: “Tắt thông báo trong cuộc họp” hoặc “Mật khẩu phải có ít nhất 8 ký tự.” Chân trang tự động xuống dòng khi cần.

Section(
    header: Text("Account Security"),
    footer: Text("Use a strong password with at least 8 characters.")
) {
    SecureField("Current password", text: $currentPassword)
    SecureField("New password", text: $newPassword)
}

Trong ví dụ, Section có tiêu đề “Account Security” và chân trang với lời khuyên về bảo mật mật khẩu. Người dùng thấy tiêu đề như nhãn section, điền hai trường và đọc ngay cảnh báo bên dưới. Cấu trúc này cải thiện trải nghiệm người dùng vì tất cả thông tin về section đều nằm trên một màn hình mà không cần điều hướng đến trang trợ giúp riêng.

Section bên trong Form và List

Section hoạt động cả trong Form lẫn List, nhưng biểu diễn trực quan khác nhau. Trong Form, Section hiển thị dưới dạng khối có góc bo tròn và nền hệ thống, được phân cách với các section liền kề bằng khoảng cách. Trong List, Section có thể sử dụng kiểu plain — không có nền và góc bo tròn, hoặc inset-grouped — với các khối bo tròn tương tự Form.

Việc chọn container ảnh hưởng đến kiểu của Section. Nếu bạn đặt Section có cùng nội dung trong Form và List với kiểu .insetGrouped, kết quả sẽ giống hệt nhau. Tuy nhiên, Form thêm khoảng cách hệ thống và sử dụng kiểu grouped theo mặc định, trong khi List yêu cầu chỉ định kiểu rõ ràng thông qua bộ điều chỉnh .listStyle(.insetGrouped).

Để đạt được giao diện tương tự trong List, hãy sử dụng .listStyle(.insetGrouped). Kiểu này mô phỏng giao diện của Form và phù hợp cho các màn hình cài đặt xây dựng trên List. Đối với danh sách dữ liệu tiêu chuẩn, hãy sử dụng .plain — không làm nổi bật section, với dấu phân cách mỏng giữa các hàng.

Nội dung động với ForEach

Section có thể chứa số lượng phần tử động thông qua ForEach. Điều này cho phép tạo các nhóm với phần tử lặp lại trong khi vẫn giữ tiêu đề và chân trang cho toàn bộ nhóm. ForEach bên trong Section lặp qua một tập hợp dữ liệu và tạo các View con cho mỗi phần tử mà không phá vỡ cấu trúc section.

Các section động hữu ích cho màn hình cài đặt với số lượng tùy chọn thay đổi: danh sách ngôn ngữ có sẵn, thiết bị đã kết nối hoặc đăng ký push. Tiêu đề section vẫn tĩnh trong khi nội dung thay đổi tùy theo dữ liệu.

struct DynamicSectionView: View {
    let categories = ["Work", "Personal", "Finance", "Health"]
    @State private var selected = Set<String>()

    var body: some View {
        Form {
            Section(header: Text("Categories"),
                    footer: Text("Select your preferred categories")) {
                ForEach(categories, id: \.self) { category in
                    Toggle(category, isOn: Binding(
                        get: { selected.contains(category) },
                        set: { if $0 { selected.insert(category) }
                                     else { selected.remove(category) } }
                    ))
                }
            }

            Section {
                Text("Selected: \(selected.count) categories")
                    .foregroundStyle(.secondary)
            }
        }
    }
}

Trong ví dụ này, ForEach tạo một Toggle cho mỗi danh mục từ mảng categories. Tiêu đề và chân trang của section được đặt một lần và áp dụng cho toàn bộ nhóm. Section thứ hai hiển thị số lượng danh mục đã chọn — nó không phụ thuộc vào ForEach và vẫn tĩnh. Cách tiếp cận này cho phép tạo form linh hoạt nơi tiêu đề và chân trang ngữ cảnh hóa một nhóm các phần tử động.

Ví dụ mã Section

Hãy xem xét một ví dụ hoàn chỉnh về màn hình hồ sơ sử dụng Section để nhóm dữ liệu. Form chứa ba section: thông tin người dùng, cài đặt quyền riêng tư và thống kê. Mỗi section sử dụng tiêu đề riêng và section cuối cùng có chân trang với thông tin tóm tắt.

struct ProfileView: View {
    @State private var displayName = "Alex Johnson"
    @State private var bio = "iOS developer"
    @State private var isProfilePublic = true
    @State private var showEmail = false

    var body: some View {
        Form {
            Section(header: Text("Profile Info")) {
                TextField("Display name", text: $displayName)
                TextField("Bio", text: $bio, axis: .vertical)
                    .lineLimit(3)
            }

            Section(header: Text("Privacy")) {
                Toggle("Public profile", isOn: $isProfilePublic)
                Toggle("Show email", isOn: $showEmail)
                    .disabled(!isProfilePublic)
            }

            Section(header: Text("Stats"),
                    footer: Text("Last updated today at 2:30 PM")) {
                LabeledContent("Posts", value: "42")
                LabeledContent("Followers", value: "1,280")
                LabeledContent("Following", value: "346")
            }
        }
        .navigationTitle("Profile")
    }
}

Ba Section phân chia rõ ràng các khu vực chức năng: trường hồ sơ có thể chỉnh sửa, công tắc quyền riêng tư và thống kê. Section thứ hai minh họa xác thực: công tắc “Show email” bị vô hiệu hóa cho đến khi hồ sơ được công khai. Chân trang của section thứ ba hiển thị thời gian cập nhật cuối cùng — một ví dụ về việc sử dụng chân trang cho thông tin ngữ cảnh bổ sung. LabeledContent là một component SwiftUI tiêu chuẩn để hiển thị cặp khóa-giá trị trong Form.

Section với tiêu đề tùy chỉnh

Section(
    header: HStack {
        Image(systemName: "bell.fill")
            .foregroundStyle(.blue)
        Text("Notifications")
            .font(.headline)
    },
    footer: Text("Manage push and email alerts")
) {
    Toggle("Push notifications", isOn: $push)
    Toggle("Email notifications", isOn: $email)
    Stepper("Quiet hours: \(quietStart) — \(quietEnd)",
            value: $quietStart,
            in: 0...23)
}

Ví dụ này cho thấy header có thể là bất kỳ SwiftUI View nào. Sử dụng HStack với Image và Text thêm biểu tượng bên cạnh tiêu đề, làm cho section trực quan hơn. Tiêu đề tùy chỉnh hữu ích để làm nổi bật các section quan trọng trong giao diện: cài đặt thông báo, tính năng trả phí hoặc section có cảnh báo. Tuy nhiên, không nên lạm dụng tiêu đề tùy chỉnh — 1–2 section với kiểu không chuẩn trên mỗi màn hình là đủ để duy trì tính nhất quán của giao diện.