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

}

我们做了两处修改：

遵守Identifiable协议
增加一个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关闭之后再打开数据就丢失了。

巴特西