(翻译)SwiftUI -- 动态列表和 Identifiabl

2019-12-09 本文已影响0人 Grabin

1.gif

本文原创作者：Martin Lasek
原文链接：https://medium.com/flawless-app-stories/swiftui-dynamic-list-identifiable-73c56215f9ff

在这个教程中，我们将会学习怎么去创建一个动态列表List，在这过程中我们会学习关于 Identifiable的知识，以及怎么在一个Navigation 添加一个 Button。

2.gif

索引

新建一个Swift UI项目
创建一个静态列表
让列表基于数组实现
动态为列表添加元素

1. 新建一个Swift UI项目

在Xcode中，新建一个项目，选择 Single View App：

3.png

接下来，在确认新建项目之前要确保 Use SwiftUI 是选中状态：

4.png

创建完你应该会看到 Swift UI 的模版代码如下：

5.png

2. 创建一个静态列表

在SwiftUI中，我们有几种使用列表的方法。虽然只有一个列表视图，但是它非常通用，这使得它非常适合许多场景！

接下来，让我们创建一个经典的口袋妖怪（pokemon）静态列表：

import SwiftUI
struct ContentView : View {
  var body: some View {
    List {
      Text("Charmander")
      Text("Squirtle")
      Text("Bulbasaur")
      Text("Pikachu")
    }
  }
}

如果我说我们以及完成了这个静态列表你相信吗？已经不需要再做什么了？是的，确实是这样！

6.png

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，还设置了跟他们匹配的颜色。

7.png

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看开来应该是这样：

8.png

接下来让我们稍微破坏下我们的列表，将名字 “Squirtle” 改成 “Charmander”，这有助于我们理解 id 的需要：

9.png

你可以看到列表视图根据我们的修改刷新了。然而，有些地方出了问题。如果你仔细看第二行，“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 我们数组元素中的元素（符合协议的）是如何标识唯一的。

10.png

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"))
    }
  }
}

你现在应该可以看到这样的页面：

12.png

让我们实现一个将会随机添加一个口袋妖怪到 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可以根据你的需求放在左边或者右边，或者两边都放。

13.png

结下来，在模拟器运行你的项目，然后添加空袋妖怪吧！

14.gif

(翻译)SwiftUI -- 动态列表和 Identifiabl

索引

1. 新建一个Swift UI项目

2. 创建一个静态列表

3. 让列表基于数组实现

3.1 参数： id

3.2 协议： `Identifiable`

4. 动态为列表添加元素

猜你喜欢

热点阅读

(翻译)SwiftUI -- 动态列表和 Identifiabl

索引

1. 新建一个Swift UI项目

2. 创建一个静态列表

3. 让列表基于数组实现

3.1 参数： id

3.2 协议： Identifiable

4. 动态为列表添加元素

猜你喜欢

热点阅读

3.2 协议： `Identifiable`