SwiftUI 入门教程 – List

前语

List 是 SwiftUI 官方提供的一个组件，它用来展现多行单列的数据。类似于 UIKit 中的 UITableView，但它的运用要比前者愈加简单、愈加优雅。并且它提供了挑选单个或许多个数据的能力。下面是它最简单的运用方式:

var body: some View {
    List {
        Text("第一条数据")
        Text("第二条数据")
        Text("第三条数据")
        Text("第四条数据")
    }
}

作用图如下：

支撑动态数据

在咱们日常开发中，很少有静态数据的列表，更多的情况是恳求接口拿到数据再填充到表格中。下面是一个动态数据的例子，主要通过三个过程来完成：

• 定义一个结构体来表示数据格式
• 声明一个变量来存储数据源
• 将数据源填充到 List 中来进行展现

代码如下：

// 第一步
struct Food: Identifiable {
    let name: String
    let id = UUID()
}
struct ListTest: View {
	// 第二步
    let foods = [Food(name: "Hamburg"), Food(name: "Chicken"), Food(name: "Fish"), Food(name: "Beef")]
    var body: some View {
    	// 第三步
        List {
            ForEach(foods) { food in
                Text(food.name)
            }
        }
    }
}

因为 List 的结构器本身支撑了 ForEach 的功能，所以 List 的代码能够简化成下面的：

var body: some View {
    List(foods){
        Text($0.name)
    }
}

Tips: 定义的数据结构需求遵守 Identifiable。

带有 Section 的列表

对于需求分 Section 的列表，咱们能够借助 ForEach 和 Section 来完成。示例代码如下：

struct FoodSection: Identifiable {
    let type: String
    let foods: [Food]
    let id = UUID()
}
struct ListTest: View {
    let sectionFoods = [        FoodSection(type: "主食", foods: [Food(name: "Hamburg"), Food(name: "Pizza")]),
        FoodSection(type: "小食", foods: [Food(name: "Chicken"), Food(name: "Fish")])
    ]
    var body: some View {
        List {
            ForEach(sectionFoods) { section in
                Section(content: {
                    ForEach(section.foods) { food in
                        Text(food.name)
                    }
                }, header: {
                    Text("Title \(section.type)")
                })
            }
        }
    }
}

首要，咱们声明一个 FoodSection 的结构体来表示分区数据源的数据结构。接着，咱们声明一个 sectionFoods 的常量来存储需求展现的数据。最终，在 List 中运用 ForEach 对 sectionFoods 进行遍历，运用 Section 组件，在 content 里边遍历 foods 字段进行食物名称的展现。然后取出每个 section 的 type 字段赋值给 header。

这样，就能够展现具有分区的数据列表了。

作用图如下：

支撑单元格的单选和多选

如果要完成单元格的单选或许多选，咱们需求声明一个 @State 润饰的变量来存储已挑选的数据，然后运用 List 的这个初始化结构器：init(_:selection:rowContent:)。其它过程和上述的基本运用并无不同：

struct ListTest: View {
	let foods = [Food(name: "Hamburg"), Food(name: "Chicken"), Food(name: "Fish"), Food(name: "Beef")]
    @State private var selections = Set<UUID>()
    var body: some View {
        NavigationStack {
            List(foods, selection: $selections) {
                Text($0.name)
            }
            .navigationTitle("菜单")
            .toolbar {
                EditButton()
            }
        }
        Text("挑选了\(selections.count)种食物")
    }
}

为了演示作用，给 List 的外层包裹了 NavigationStack，对其不了解的能够看这里。

作用如下：

需求注意的是，该作用需求运转代码在模拟器中看，在实时预览的页面是看不到这个动态作用的。