ListStyle trong giao diện người dùng Swift

May 08 2023
Đối với iOS, kiểu danh sách mặc định (. automatic ) là .

Đối với iOS , kiểu danh sách mặc định ( .automatic) là .insetGrouped.

Kiểu .automaticdanh sách có nghĩa là chúng tôi để lại sự lựa chọn kiểu trong tay SwiftUI . SwiftUI sẽ chọn cái phù hợp với ngữ cảnh.

Điều này có thể khác nhau tùy theo nền tảng, ví dụ: iPhone, iPad, Mac hoặc thậm chí là nơi sử dụng Chế độ xem danh sách.

Kiểu danh sách iOS

SwiftUI hỗ trợ nhiều kiểu khác nhau dựa trên nền tảng.

Trong bài viết này, chúng tôi sẽ chỉ tập trung vào iOS. Chúng tôi có sáu lựa chọn .

  1. .tự động
  2. .insetGrouped
  3. .grouped
  4. .inset
  5. .đơn giản
  6. .thanh bên

SwiftUI hỗ trợ nhiều kiểu khác nhau dựa trên nền tảng.

Trong bài viết này, chúng tôi sẽ chỉ tập trung vào iOS. Chúng tôi có sáu lựa chọn .

  1. .tự động
  2. .insetGrouped
  3. .grouped
  4. .inset
  5. .đơn giản
  6. .thanh bên

NavigationStack {
    List {
        Section {
            Text("First")
            Text("Second")
            Text("Third")
        } header: {
            Text("First Section Header")
        } footer: {
            Text("Eos est eos consequatur nemo autem in qui rerum cumque consequatur natus corrupti quaerat et libero tempora.")
        }
        
        Section {
            Text("One")
            Text("Two")
            Text("Three")
        } header: {
            Text("Second Section Header")
        } footer: {
            Text("Tempora distinctio excepturi quasi distinctio est voluptates voluptate et dolor iste nisi voluptatem labore ipsum blanditiis sed sit suscipit est.")
        }
        
        Section {
            Text("1")
            Text("2")
            Text("3")
        } header: {
            Text("Third Section Header")
        } footer: {
            Text("Ea consequatur velit sequi voluptatibus officia maiores ducimus consequatur rerum enim omnis totam et voluptates eius consectetur rerum dolorem quis omnis ut ut.")
        }
    }
    .navigationTitle("List Style")
    // This is the only difference.
    .listStyle(.insetGrouped)
}

Như đã đề cập trước đó, SwiftUI sẽ sử dụng kiểu Inset Grouped khi cài đặt tự động ( .automatic) hoặc DefaultListStyletrên iOS.

List {
    // ...
}
// Leave blank or .listStyle(.automatic) yield the same result in iOS.
.listStyle(.automatic)

Ví dụ về Inset Grouped .insetGroupedhoặc InsetGroupedListStyle.

List {
    // ...
}
.listStyle(.insetGrouped)

      
                

Ví dụ về Nhóm .groupedhoặc GroupedListStyle.

List {
    // ...
}
.listStyle(.grouped)

      
                

Ví dụ về Inset .insethoặc InsetListStyle.

List {
    // ...
}
.listStyle(.inset)

      
                

Ví dụ về Đồng bằng .plainhoặc PlainListStyle.

List {
    // ...
}
.listStyle(.plain)

      
                

Kiểu thanh bên ( .sidebarhoặc SidebarListStyle) được trang bị một chức năng đặc biệt . Trên macOS và iOS, kiểu danh sách thanh bên hiển thị các chỉ báo tiết lộ trong tiêu đề phần cho phép người dùng thu gọn và mở rộng các phần .

List {
    // ...
}
.listStyle(.sidebar)