(翻译) SwiftUI -- 创建详情页

1.png


本文原创作者：Martin Lasek
原文链接：https://medium.com/@martinlasek/swiftui-detail-view-44772246fa2a

在这个教程中，我将会展现给你知道创建一个详情页面，并且把数据传给它用于显示是多么的简单✨。

2.gif

这次的教程是跟上一个教程连起来的 (翻译) SwiftUI -- 理解 Binding，你可以先去看之前的教程再回来接着继续阅读，或者你不介意也可以跳过上一个教程，继续下去😊。

索引

1. 创建一个详情页面(Detail View)
2. 实现（使用）你的详情页面
   
   
   

1. 创建一个详情页面(Detail View)

如果你跳过了上一个教程，那么你可以从 理解 Binding CodeBase下载上个教程的代码下来，因为这个教程是基于之前的代码继续学习的。

我们的第一步是添加一些 pokemon 的图片到我们的项目中：

3.png

可以从这里去找到图片，确保每个图片名能和它们的名字对应起来。

接下来的一步是新建一个 SwiftUI View，并把它命名为 PokemonDetail：

4.png

我们将会像下面一样给PokemonDetail view 添加一个图片和文本：

import SwiftUI
struct PokemonDetail: View {
  let pokemon: Pokemon
  var body: some View {
    VStack {
      Image(pokemon.name.lowercased())
      Text(pokemon.type)
      Spacer()
    }
  }
}
#if DEBUG
struct PokemonDetail_Previews: PreviewProvider {
  static var previews: some View {
    PokemonDetail(
      pokemon: Pokemon(
        id: 0,
        name: "Charmander",
        type: "Fire",
        color: .red
      )
    )
  }
}
#endif

如你所见，我们使用 pokemon 的name在获取对应的图片。如果你在这之前没有见过 Spacer，这是它很荣幸能见到你的一刻！Spacer的作用是填满所有剩余的空间，使整个 view 往上推，这样我们最终会得到这样的：

5.png

我们可以添加一些风格来让我们的 view 变得更好看：

import SwiftUI
struct PokemonDetail: View {
  let pokemon: Pokemon
  var body: some View {
    VStack {
      Image(pokemon.name.lowercased())
        .resizable()
        .frame(width: 200, height: 200)
      Text(pokemon.type)
        .font(.title)
        .foregroundColor(pokemon.color)
      Spacer()
    }.navigationBarTitle(Text(pokemon.name), displayMode: .inline)
  }
}
#if DEBUG
struct PokemonDetail_Previews: PreviewProvider {
  static var previews: some View {
    PokemonDetail(
      pokemon: Pokemon(
        id: 0,
        name: "Charmander",
        type: "Fire",
        color: .red
      )
    )
  }
}
#endif

我们用resizable()告诉Image, 让它调整大小，以适应它的父视图。这样在默认的情况下是填满了整个父视图，除非我们设置了frame, 让它在这个范围内使用图片。这里设置了.frame(width: 200, height: 200)。

对于 Text，我们想要它稍微大一些，我们可以设置它的 size，比如 .caption / .body / .subheading / .title 等等。

到这里你应该看到一个引人注目的 PokemonDetail 视图，像这样：

6.png

2. 实现（使用）你的详情页面

准备好使用我们的PokemonDetail View 了吗？让我们在ContentView 添加如下代码：

import SwiftUI
struct Pokemon: Identifiable {
  ...
}
struct ContentView : View {
  @State var pokemonList = [ ... ]
  @State var showDetails = true
var body: some View {
    NavigationView {
      List(pokemonList) { pokemon in
        NavigationLink(destination: PokemonDetail(pokemon: pokemon) {
          HStack {
            Text(pokemon.name)
            if self.showDetails {
               Text(pokemon.type).foregroundColor(pokemon.color)
            }
          }
        }
      }
        .navigationBarTitle(Text("Pokemon"))
        .navigationBarItems(
          leading: ToggleTextButton(isOn: $showDetails),
          trailing: Button(
            action: addPokemon,
            label: { Text("Add") }
          )
        )
      }
    }
  func addPokemon() {
    ...
  }
}

让我们运行代码，看看所有的事情是如何神奇的出现的✨ 》》

7.gif