从零开始的 Swift UI (三)

Innei

发布于 2021-12-28 11:00:40

5100

发布于 2021-12-28 11:00:40

文章被收录于专栏：静之森

接上文：

从零开始的 Swift UI (二)

上篇文章介绍了如何使用 UserDefaults 和 ObserveableObject 来进行数据管理。

这篇文章来完成 LikeView 的布局和功能实现。

Layout

在 LikeView 中编写如下代码。

swift

1struct LikeView: View {
2  @EnvironmentObject var like: Like
3
4  var likes: [LikeModel] {
5    like.likes
6  }
7
8  var body: some View {
9    ZStack {
10      GeometryReader { _ in
11                      List {
12                        ForEach(likes) { like in
13                                        Button(action: {}, label: { Text(like.text) })
14                                       }
15                      }
16                     }
17    }
18  }
19}

COPY

再修改 HomeView 中的 Like Button 代码。

swift

1Button(action: {
2  like.add(hikotoko: model)
3}, label: {
4  Image(systemName: liked ? "suit.heart.fill" : "suit.heart")
5  .foregroundColor(liked ? .red : .primary)
6  .font(.custom("icon", size: 28))
7})

COPY

Like.swift 中新增一个方法。

swift

1func add(hikotoko: HitokotoModel) -> Bool {
2  let date = ISO8601DateFormatter().date(from: hikotoko.createdAt) ?? Date()
3
4  return add(item: LikeModel(id: UUID(uuidString: hikotoko.uuid) ?? UUID(), text: hikotoko.hitokoto,
5                             createdAt: date, from: hikotoko.from, author: hikotoko.creator))
6}

COPY

上面 Like Button 时候被选中，可以根据 Like 中有没有存储判断。

将 ActionView 修改为如下代码：

swift

1struct ActionView: View {
2    @Binding var model: HitokotoModel?
3    @EnvironmentObject var like: Like
4
5    var liked: Bool {
6        guard let model = model else {
7            return false
8        }
9        return like.has(uuid: UUID(uuidString: model.uuid))
10    }
11
12    @ViewBuilder
13    var body: some View {
14        if let model = model {
15            HStack(spacing: 20) {
16                Button(action: {
17                    like.add(hikotoko: model)
18                }, label: {
19                    Image(systemName: liked ? "suit.heart.fill" : "suit.heart")
20                        .foregroundColor(liked ? .red : .primary)
21                        .font(.custom("icon", size: 28))
22                })
23                Button(action: {
24                }, label: {
25                    Image(systemName: "square.and.arrow.up")
26                        .font(.custom("icon", size: 28))
27                        .foregroundColor(.primary)
28                })
29            }
30        }
31    }
32}

COPY

liked 计算属性根据 model 中的 uuid 推断状态。因为使用了 @Binding 所以上层 View 还需要传一个 Binding 给他。可以理解为 React 中的 Props。注意的是只有加了 @Binding 的参数传递才是引用传递，也就是上层数据更新后下层也会被更新。

在 HomeView 中修改为 ActionView(model: $model).offset(x: 0, y: reader.size.height / 2 - 50)

被 @State 装饰的属性，取他的 Binding 只需要在前面加一个 $

这样点击 Like Button 后 ❤就会变红啦。

Navigation

为了实现能在各个 View 之间导航。使用 NavigationView 就可以做到啦。

修改 HomeView，在外层加上 NavigationView。

修改 LikeView，在外层加上 NavigationView。

swift

1var body: some View {
2  NavigationView {
3    ZStack {
4      GeometryReader { _ in
5                      List {
6                        ForEach(likes) { like in
7                                        Button(action: {}, label: { Text(like.text) })
8                                       }
9                      }
10                     }
11    }.navigationBarTitle("喜欢")
12  }
13}

COPY

注意在设定 .navigationBarTitle 必须加在 NavigationView 的子 View 上才会生效。