SwiftUI实战教程-土豆List

代码库

教程中的项目代码都保存在这里：https://gitee.com/KINGWDY_admin/swiftui01

前言

在这一章节中，我们会使用List控件做一个土豆List，实现了列表填充、增加记录、删除记录以及列表记录重排序。

当你点击列表中的todo记录时将会跳转到详情页，详情页包含todo标题的放大版以及图标的放大版。

新建项目

怎么新建一个项目我们在第一章中介绍过，这里就不再赘述了，新建好的项目长这个样子：

为了在List中展示todo记录，我们在ContentView文件中添加如下代码：

struct ContentView: View {
    var body: some View {
        List {
            Text("吃饭")
            Text("睡觉")
            Text("看看书")
            Text("打打红警")
        }
    }
}

效果图：



现在List中的每一行数据还很单调，只有文字。

我想要在每一行之中除了文字之外还要展示一个分类的图标，表示该条todo记录属于什么类别，所以使用HStatck包裹我们要在一行展示的数据：

struct ContentView: View {
    var body: some View {
        List {
            HStack {
                Image(systemName: "desktopcomputer")
                    .resizable()
                    .frame(width: 20, height: 20)
                Text("Coding...")
            }
             HStack {
                Image(systemName: "house")
                    .resizable()
                    .frame(width: 20, height: 20)
                Text("健身")
            }
            HStack {
                Image(systemName: "theatermasks")
                    .resizable()
                    .frame(width: 20, height: 20)
                Text("相亲")
            }
        }
    }
}

效果图：

如果 Image中使用的图片是自己从网上找的，大小可能不一致，这就可能导致图片超过了屏幕的大小，整个屏幕只显示了图片的一角。

这时就可以使用resizeable让图片自适应大小。

Image(systemName: "desktopcomputer").resizable().frame(width: 50, height: 50)

使用frame来限定图片的大小。

使用数组内容填充List

目前为止，我们通过写死代码的方式在List中展示了几条数据，接下来我们要使其能够动态变化。

新建一个 Todo 结构体，保存 todo 数据

在ContentView.swift代码中增加一个结构体：

struct Todo {
    let name: String // todo 标题
    let category: String // todo 分类
}

新建一个 @State 修饰的数组

在ContentView.swift中增加数组：

struct ContentView: View {
    @State private var todos = [
        Todo(name: "coding", category: "desktopcomputer"),
        Todo(name: "健身", category: "house"),
        Todo(name: "相亲", category: "theatermasks")
    ]
    ...
}

我们创建了一个数组todos，并且用@State修饰，这样List中的数据条目就可以动态更新了。

声明数组的同时，我们还新建了3条 todo 结构体放到了数组中。

填充数组内容到 List

var body: some View {
    List {
        ForEach(todos, id:\.name) { (todo) in
            HStack {
                Image(systemName: todo.category)
                	.resizable()
                	.frame(width: 20, height: 20)
                Text(todo.name)
            }
        }
    }
}

在 List 中我们使用ForEach来取出数组中的所有记录并展示。Image 中展示分类图片，Text 中展示 todo 的 name。

在 ForEach 中我们使用 .name来唯一标记一条 todo 记录（不应该这么做，只是临时方案），这里我们假设 todo 的 name 属性是唯一不会重复的。

你现在运行app的话，看到的效果跟之前把 todo 数据写死在代码里时是一样的。

在 NavigationView 中展示 List

接下来我们来实现点击一条 todo 记录后跳转到详情页，实现这个功能需要将 List 包裹在 NavigationView 中：

var body: some View {
    NavigationView {
        List {
            ForEach(todos, id:\.name) {(todo) in
                ...
            }
        }.navigationBarTitle("土豆List")
    }
}

我们还通过 navigationBarTitle 为当前页面设置了一个标题。

注意： 我们的 navigationBarTitle 是放在了 NavigationView中的 List上。之所以这么做是因为在点击了 List 中的某条记录后， NavigationView 将会展示一个新的页面，而不是现在的 List，每一个页面都应该有一个不同的标题，如果把 navigationBarTitle 放到 NavigationView 上，那么切换页面时标题就固定死了，不会变化的。

让 List 中的记录可以点击

将 List 包裹在 NavigationView 中可以让 List 在被点击后跳转到新的页面。

要使 List 中的 todo 记录被点击后跳转到详情页，修改代码中的 ForEach如下：

ForEach(todos, id:\.name) { (todo) in
    NavigationLink(destination: {
        VStack {
            Text(todo.name)
            Image(systemName: todo.category)
                .resizable()
                .frame(width: 200, height: 200)
        }
    }) {
        HStack {
            Image(systemName: todo.category)
                .resizable()
                .frame(width: 20, height: 20)
            Text(todo.name)
        }
    }
}

我们在 NavigationLink中提供了一个参数表示详情页的 UI。

NavigationLink(destination:
    VStack {
        Text(todo.name)
        Image(systemName: todo.category)
            .resizable()
            .frame(width: 200, height: 200)
    })

当你运行app并且点击 List 中的某个 todo 记录后，app 将会跳转到一个新的详情页，新详情页的上方还会显示一个返回按钮。

删除一条 todo 记录

在 iOS 中我们通常会通过向左滑动来显示删除按钮或者直接删除。

为了使我们 app 中的 List 也具有这个功能，我们需要在 ForEach 的结尾处添加 onDelete 修饰符。

var body: some View {
    NavigationView {
        List {
            ForEach(todos, id: \.name) { (todo) in
                NavigationLink(destination:
                    ...
                }
            } .onDelete(perform: {indexSet in
                todos.remove(asOffsets: indexSet)})
        }.navigationBarTitle("土豆List")
    }
}

onDelete会产生一个变量indexSet，里面包含了所有要删除的 todo记录 的索引位置，我们将这个参数indexSet传入todos.remove方法实现移除数组中某些元素。

重排序列表中的记录

可以通过在ForEach的结尾处添加onMove()修饰符来实现改变List中记录顺序的效果：

var body: some View {
    NavigationView {
        List {
            ForEach(todos, id:\.name) {(todo) in
                NavigationLink(destination:
                    VStack {
                        Text(todo.name)
                        Image(...)
                    }
                ){
                    HStack {
                        Image(...)
                        Text(todo.name)
                    }
                }
            }
            .onDelete(perform: {indexSet in
                todos.remove(atOffsets: indexSet)
            })
            .onMove(perform: {indices, newOffset in
                todos.move(fromOffsets: indices, toOffset: newOffset)
            })
        }.navigationBarTitle("土豆List")
        .navigationBarItems(trailing: EditButton())
    }
}

onMove提供了indices和newOffset两个变量，indices包含了所有要移动的todo记录的旧位置索引，newOffset包含了要移动到的新位置索引。

需要注意的是，只有进入了编辑模式后才可以移动todo记录，所以我在导航栏(Navigation Bar)中添加了一个 Edit 按钮，当点击了 Edit 按钮后就会进入编辑模式，这时候就可以移动 todo记录的位置了。

当点击 Edit 按钮进入编辑模式后，在每一个 todo记录 的左侧还会出现一个红色的删除按钮，这是编辑模式自带的效果。

为todo记录增加唯一标识

• 为todo记录增加唯一标识

前面我们假设每一条 todo记录的标题都是唯一不重复的，所以使用 name 属性来唯一标记某条todo。

ForEach(todos, id:\.name)`

那如果出现多个重名的 todo记录怎么办呢？？

如果有多个重名的todo记录的话，当我们删除记录的时候就会出现问题，因为它不知道到底应该删除哪条记录。为了解决这个问题，我们需要给 Todo结构体增加一个唯一标识符。

struct Todo: Identifiable { // 遵守 Identifiable 协议
    let id = UUID() // 新加一个 id 属性
    let name: String
    let category: String
}

我们做了两处修改：

1. 遵守Identifiable协议
2. 增加一个id属性

遵守Identifiable协议就需要我们增加一个 id属性，同时也意味着这个结构体是可以被唯一标识的。使用 UUID()函数生成一个唯一的标识符赋给每个新建的 Todo 结构体。

所以之前的代码就可以删除id:\.name，改完后代码如下：

ForEach(todos) {
    ...
}

List 会自动使用 todo.id 来唯一标识某条记录，不需要我们额外指明 id: \.id。

增加一条 todo记录

想要增加一条 todo记录的话，就要新建一个 Todo 并加入到 todos数组中，同时我们在app导航栏的左侧增加一个按钮，点击后实现增加 todo记录。

var body: some View {
    NavigationView {
        List {
            ...
        }
        .navigationBarTitle("土豆List")
        .navigationBarItems(
            leading: Button(action: {}, label: {
            	Text("+1")
        	}),
            trailing: EditButton()
        )
    }
}

我们为+1按钮增加一个点击事件处理函数 addTodo：

NavigationView {
    List {
        ...
    }
    .navigationBarTitle("土豆List")
    .navigationBarItems(
    	leading: Button(action: addTodo,
                       label: {
                           Text("+1")
                       }),
    	trailing: EditButton()
    )
}

addTodo函数的代码：

func addTodo() {
    todos.append(Todo(name: "新的Todo", category: "desktopcomputer"))
}

修改完后运行app，点击 +1按钮后你将会看到屏幕上多出了一条记录：

使用用户输入数据新建 todo记录

目前我们新增的 todo记录的 name和 category 都是写死在代码里的，这样显然不符合常理，接下来我们就新建一个页面，根据用户输入的 name 和 category 新建 todo记录。

在 ContentView.swift 文件中增加以下代码:

struct AddTodoView: View {
    var body: some View {
        Text("这是增加 todo记录的界面")
    }
}

同时在 ContentView 中增加一个 @State 变量，根据这个变量的值来判断是否需要跳转到 AddTodoView 来新建 todo记录：

@State private var showAddTodoView = false // 默认为 false，不跳转AddTodoView

接下来修改 +1按钮的点击处理逻辑如下：

{
    ...
}
.navigationBarItems(
	leading: Button(action: {
        		// 反转 showAddTodoView 的值，false => true
        		self.showAddTodoView.toggle()
    		}, label: {
        		Text("+1")
    		})
			.sheet(isPresented: $showAddTodoView) {
        		AddTodoView() // 我们刚才新建的新界面 struct
    		},
	trailing: EditButton()
)

我们在 +1按钮后增加了一个 sheet修饰符用于自底向上弹出一个新界面，我们在新界面输入 name和 category来新建一个 todo记录。

sheet中的isPresented参数绑定了我们自定义的 showAddTodoView变量，当showAddTodoView的值为true时，弹出 sheet，否则隐藏 sheet。

可以手动向下拖拽 sheet 来隐藏 sheet。

这里我们还需要在 sheet界面里添加一个输入框获取用户输入，一个按钮用户点击后自动隐藏 sheet：

struct AddTodoView: View {
    // @Binding 的作用下面马上会解释
    @Binding var showAddTodoView: Bool

    var body: some View {
        Text("添加一个 todo")

        Button(action: {
            self.showAddTodoView = false // 变为false后sheet自动隐藏
        }, label: {
            Text("完成")
        })
    }
}

回到之前的 ContentView修改代码如下：

{
    ...
}
.navigationBarTitle(...)
.navigationBarItems(
	leading:
		Button(action: {
            self.showAddTodoView.toggle()
        }, label: {
            Text("+1")
        })
		.sheet(isPresented: $showAddTodoView) {
            AddTodoView(showAddTodoView: self.$showAddTodoView)
        }
)
...

@Binding 这个变量会从任何地方传进来，并且这个变量的值会在当前位置和传此值进来的代码间共享。

在此代码中 showAddTodoView的值在 ContentView 和 AddTodoView 间共享，因为该变量是从 ContentView 中的 sheet里传进来的:

.sheet(isPresented: $showAddTodoView) {
         AddTodoView(showAddTodoView: self.$showAddTodoView)
}

因此，当 AddTodoView 中的 showAddTodoView 变量发生变化时，ContentView 中的 showAddTodoView 也会发生变化，在 AddTodoView 中将 showAddTodoView 设为 false，那么 sheet就会自动隐藏。

下面我们在 AddTodoView 中增加一个输入框用于用户输入 Todo的 name，一个选择器用于选择 Todo的 category:

@State private var name: String = ""
// 用户选择了 categoryTypes中的某一项后，该变量为其索引值
@State private var selectedCategory = 0
// 存放预先定义的玄功选择的 category，展示在选择器 picker中
var categoryTypes = ["house", "theatermasks", "desktopcomputer"]

var body: some View {
    VStack {
        Text("增加 todo").font(.largeTitle)
        TextField("name", text: $name)
        	.textFieldStyle(RoundedBorderTextFieldStyle())
        	.border(Color.black)
        	.padding()

        Text("选择 category")
        Picker("", selection: $selectedCategory) {
            ForEach(0 ..< categoryTypes.count) {
                // $0 表示取第一个参数
                Text(self.categoryTypes[$0])
            }
        }
        .pickerStyle(SegmentedPickerStyle())
    }.padding()
}

Picker 控件常用于用户从指定的列表中选择一个值，在 ForEach中我们遍历所有 categoryTypes中的元素展示到 Picker供用户选择。

在 Picker最后我们添加了一句pickerStyle(SegmentedPickerStyle())，你可以尝试去掉这一句代码，看看会产生什么影响。

接下来我们开始编写根据用户输入内容新建 Todo的代码，增加一条 todo记录的话除了要新建一个 Todo还要将添加到 ContentView中的 todos数组中去。

为此，我们要修改 ContentView中的+1按钮后添加的sheet代码：

.sheet(isPresented: $showAddTodoView) {
    AddTodoView(
        showAddTodoView: self.$showAddTodoView,
        todos: self.$todos // 增加了一个 todos参数
    )
}

同时还要修改 AddTodoView中的代码，添加一行@Binding标记的代码用于接收从 ContentView传入的 todos参数：

@Binding var todos: [Todo] // Todo类型的数组，用于接收其它地方传入参数

使用 @Binding标记后的 todos就可以同时在 ContentView和 AddTodoView两个页面里共享状态了。

最后，在 AddTodoView中增加一个按钮，用户点击后获取输入的 name和选择的 category新建一个 Todo，然后添加到 todos数组中。

Button(action: {
    self.showAddTodoView = false // 隐藏 sheet
    // 新建一个 Todo并添加到 todos数组中
    todos.append(Todo(name: name,
                     category: categoryTypes[selectedCategory]))
}, label: {
    Text("点击新建")
})

运行一下代码看看效果吧！！

真棒！！我们已经得到了一个自己开发的 土豆List ！！

在上面的代码中，我们添加新建的 Todo到 todos数组用的是 append，这会把新数据添加到数组的末尾，反映到app界面上也就是新添加的记录会展示的屏幕最下方。为了“修复”这个问题，你可以试试 insert ！！

小结

在这一章节里我们自己完成了一款 土豆List app，涉及到了 List的数据填充、点击、移动、删除等，还使用了一个新控件：Picker！！

目前还有一个问题就是数据的持久化，我们的 todo记录目前都是保存在手机的内存中的，app关闭之后再打开数据就丢失了。