本文原创作者：Martin Lasek
原文链接：https://medium.com/flawless-app-stories/swiftui-dynamic-list-identifiable-73c56215f9ff
在这个教程中，我们将会学习怎么去创建一个动态列表List，在这过程中我们会学习关于 Identifiable的知识，以及怎么在一个Navigation 添加一个 Button。
索引
- 新建一个Swift UI项目
- 创建一个静态列表
- 让列表基于数组实现
- 动态为列表添加元素
1. 新建一个Swift UI项目
在Xcode中， 新建一个项目，选择 Single View App：
接下来，在确认新建项目之前要确保 Use SwiftUI 是选中状态：
创建完你应该会看到 Swift UI 的模版代码如下：
2. 创建一个静态列表
在SwiftUI中，我们有几种使用列表的方法。虽然只有一个列表视图，但是它非常通用，这使得它非常适合许多场景！
接下来，让我们创建一个经典的口袋妖怪（pokemon）静态列表：
import SwiftUI
struct ContentView : View {
var body: some View {
List {
Text("Charmander")
Text("Squirtle")
Text("Bulbasaur")
Text("Pikachu")
}
}
}
如果我说我们以及完成了这个静态列表你相信吗？已经不需要再做什么了？是的，确实是这样！
List 工作起来类似于：它会以行的形式渲染每一个 row 里面的视图。我们现在有4个 Text，所以每一行都会显示一个 Text。
要不让我们让这个列表视图变得有趣些，给每个口袋妖怪（Pokemon）添加类型，比如喷火，喷水，长草，放电等等。让我们该下代码：
import SwiftUI
struct ContentView : View {
var body: some View {
List {
HStack {
Text("Charmander")
Text("Fire").foregroundColor(.red)
}
HStack {
Text("Squirtle")
Text("Water").foregroundColor(.blue)
}
HStack {
Text("Bulbasaur")
Text("Grass").foregroundColor(.green)
}
HStack {
Text("Pikachu")
Text("Electric").foregroundColor(.yellow)
}
}
}
}
在这里我们使用 HStack 对名字和类型显示进行水平方向布局，为了显示类型我们为每行新建了第二个 Text，还设置了跟他们匹配的颜色。
3. 让列表基于数组实现
静态列表是可行的，如果你想要实现一个设置页面。我们现在的目标是，调整现在的 ListView，让它可以根据数据的元素进行展示。实现的方法有好几种，让我们先看下两个实现方式中比较简单的一种。创建 Pokemon 结构体，属性有 name, type 和 color：
import SwiftUI
struct Pokemon {
let name: String
let type: String
let color: Color
}
struct ContentView : View {
var body: some View {
List {
HStack {
Text("Charmander")
Text("Fire").foregroundColor(.red)
}
HStack {
Text("Squirtle")
Text("Water").foregroundColor(.blue)
}
HStack {
Text("Bulbasaur")
Text("Grass").foregroundColor(.green)
}
HStack {
Text("Pikachu")
Text("Electric").foregroundColor(.yellow)
}
}
}
}
现在我们可以继续在 ContentVidew里面创建一个结构体属性，Pokemon，然后实例一个数组给到这个属性：
import SwiftUI
struct Pokemon {
let name: String
let type: String
let color: Color
}
struct ContentView : View {
var pokemonList = [
Pokemon(name: "Charmander", type: "Fire", color: .red),
Pokemon(name: "Squirtle", type: "Water", color: .blue),
Pokemon(name: "Bulbasaur", type: "Grass", color: .green),
Pokemon(name: "Pikachu", type: "Electric", color: .yellow),
]
var body: some View {
List {
HStack {
Text("Charmander")
Text("Fire").foregroundColor(.red)
}
HStack {
Text("Squirtle")
Text("Water").foregroundColor(.blue)
}
HStack {
Text("Bulbasaur")
Text("Grass").foregroundColor(.green)
}
HStack {
Text("Pikachu")
Text("Electric").foregroundColor(.yellow)
}
}
}
}
3.1 参数： id
这是创建一个基于我们数组数据显示的List的简单例子：
import SwiftUI
struct Pokemon {
let name: String
let type: String
let color: Color
}
struct ContentView : View {
var pokemonList = [
Pokemon(name: "Charmander", type: "Fire", color: .red),
Pokemon(name: "Squirtle", type: "Water", color: .blue),
Pokemon(name: "Bulbasaur", type: "Grass", color: .green),
Pokemon(name: "Pikachu", type: "Electric", color: .yellow),
]
var body: some View {
List(pokemonList, id: \.name) { pokemon in
HStack {
Text(pokemon.name)
Text(pokemon.type).foregroundColor(pokemon.color)
}
}
}
}
无论什么时候，我们基于数组数据使用List，就必须让List知道怎么认出每一行。在我们的例子中，口袋妖怪的名字作为识别符工作起来是正常的，我们的代码和View看开来应该是这样：
接下来让我们稍微破坏下我们的列表，将名字 “Squirtle” 改成 “Charmander”，这有助于我们理解 id 的需要：
你可以看到列表视图根据我们的修改刷新了。然而，有些地方出了问题。如果你仔细看第二行，“Charmander” 确实是根据我们数组元素里面进行显示。但我们保持了第二行的 “type” 是 “Water”没有做修改，但现在显示的是“Fire”。这是因为List 很迷惑两个一样 identifier的存在，两个row都把 name “Charmander” 设置成 identifier。这是不对的，让我们把名字改回 “Squirtle”。
3.2 协议： Identifiable
这是另外一个让 List 知道怎么去标识每一行的 row是唯一的，我觉得我们在以后的使用中会更喜欢这种方式：
import SwiftUI
struct Pokemon: Identifiable {
let id: Int
let name: String
let type: String
let color: Color
}
struct ContentView : View {
var pokemonList = [
Pokemon(id: 0, name: "Charmander", type: "Fire", color: .red),
Pokemon(id: 1, name: "Squirtle", type: "Water", color: .blue),
Pokemon(id: 2, name: "Bulbasaur", type: "Grass", color: .green),
Pokemon(id: 3, name: "Pikachu", type: "Electric", color: .yellow),
]
var body: some View {
List(pokemonList) { pokemon in
HStack {
Text(pokemon.name)
Text(pokemon.type).foregroundColor(pokemon.color)
}
}
}
}
当去实现Identifiable 协议的时候，我们需要去实现一个 id 的属性，这个变量不一定需要是 Int 类型。这个协议只要求 id 的类型必须是 Hashable 的。(Int,Double,String等等这些都是Hashable的)
但实现了Identifiable 协议之后，我们不再需要去告诉 List 我们数组元素中的元素（符合协议的）是如何标识唯一的。
4. 动态为列表添加元素
我们接下来要做的是非常酷的！我们将会在列表页面添加一个 带有Button的NavigationBar ，通过点击这个按钮，会随机添加一个口袋妖怪在我们的列表中。很酷对吧？我告诉你了！
SwiftUI 太啰嗦了，让人难以忍受。添加Navigation 非常简单：
import SwiftUI
struct Pokemon: Identifiable {
let id: Int
let name: String
let type: String
let color: Color
}
struct ContentView : View {
var pokemonList = [
Pokemon(id: 0, name: "Charmander", type: "Fire", color: .red),
Pokemon(id: 1, name: "Squirtle", type: "Water", color: .blue),
Pokemon(id: 2, name: "Bulbasaur", type: "Grass", color: .green),
Pokemon(id: 3, name: "Pikachu", type: "Electric", color: .yellow),
]
var body: some View {
NavigationView {
List(pokemonList) { pokemon in
HStack {
Text(pokemon.name)
Text(pokemon.type).foregroundColor(pokemon.color)
}
}
}
}
}
现在，让我们在Navigation中添加一个title，要确保你一直在Navigation 视图里面的第一个 ChildView这么做：
import SwiftUI
struct Pokemon: Identifiable {
let id: Int
let name: String
let type: String
let color: Color
}
struct ContentView : View {
var pokemonList = [
Pokemon(id: 0, name: "Charmander", type: "Fire", color: .red),
Pokemon(id: 1, name: "Squirtle", type: "Water", color: .blue),
Pokemon(id: 2, name: "Bulbasaur", type: "Grass", color: .green),
Pokemon(id: 3, name: "Pikachu", type: "Electric", color: .yellow),
]
var body: some View {
NavigationView {
List(pokemonList) { pokemon in
HStack {
Text(pokemon.name)
Text(pokemon.type).foregroundColor(pokemon.color)
}
}.navigationBarTitle(Text("Pokemon"))
}
}
}
你现在应该可以看到这样的页面：
让我们实现一个将会随机添加一个 口袋妖怪到 pokemonList 属性的方法，然后也要在属性前面添加 @State 作为修饰符，这样当我们改变它的值的时候，页面才会更新。
import SwiftUI
struct Pokemon: Identifiable {
let id: Int
let name: String
let type: String
let color: Color
}
struct ContentView : View {
@State var pokemonList = [
Pokemon(id: 0, name: "Charmander", type: "Fire", color: .red),
Pokemon(id: 1, name: "Squirtle", type: "Water", color: .blue),
Pokemon(id: 2, name: "Bulbasaur", type: "Grass", color: .green),
Pokemon(id: 3, name: "Pikachu", type: "Electric", color: .yellow),
]
var body: some View {
NavigationView {
List(pokemonList) { pokemon in
HStack {
Text(pokemon.name)
Text(pokemon.type).foregroundColor(pokemon.color)
}
}.navigationBarTitle(Text("Pokemon"))
}
}
func addPokemon() {
if let randomPokemon = pokemonList.randomElement() {
pokemonList.append(randomPokemon)
}
}
}
这里使用Array原生的 .randomElement() 方法获取一个随机的结果。返回的结果是optional的，这是因为如果数组空的，返回结果就为空。这也是为什么我们在这里返回值不为空的时候再进行处理。
现在，我们为 Navigation 添加一个 Button，按钮点击方法调用 addPokemon!
import SwiftUI
struct Pokemon: Identifiable {
let id: Int
let name: String
let type: String
let color: Color
}
struct ContentView : View {
@State var pokemonList = [
Pokemon(id: 0, name: "Charmander", type: "Fire", color: .red),
Pokemon(id: 1, name: "Squirtle", type: "Water", color: .blue),
Pokemon(id: 2, name: "Bulbasaur", type: "Grass", color: .green),
Pokemon(id: 3, name: "Pikachu", type: "Electric", color: .yellow),
]
var body: some View {
NavigationView {
List(pokemonList) { pokemon in
HStack {
Text(pokemon.name)
Text(pokemon.type).foregroundColor(pokemon.color)
}
}
.navigationBarTitle(Text("Pokemon"))
.navigationBarItems(
trailing: Button(action: addPokemon, label: { Text("Add") })
)
}
}
func addPokemon() {
if let randomPokemon = pokemonList.randomElement() {
pokemonList.append(randomPokemon)
}
}
}
我们可以使用 NavigationBarItems方法来给Navigation添加view。这些view可以根据你的需求放在左边或者右边，或者两边都放。
结下来，在模拟器运行你的项目，然后添加空袋妖怪吧！
