当前位置：首页 > news >正文

一发入魂：极简解决 SwiftUI 复杂视图未能正确刷新的问题（上）

news 2025/7/3 16:15:49

在这里插入图片描述

概述

各位似秃非秃小码农们都知道，在 SwiftUI 中视图是状态的函数，这意味着状态的改变会导致界面被刷新。

但是，对于有些复杂布局的 SwiftUI 视图来说，它们的界面并不能直接映射到对应的状态上去。这就会造成一个问题：状态的改变并没有及时的引起 UI 的变化。

在这里插入图片描述

如上图所示：无论英雄挑战关卡的结果是成功还是失败，在视图的显示中都没有体现出来。这该如何是好呢？

在本篇博文中，您将学到如下内容：

概述
1. “固执己见”的 SwiftUI 视图
- 1.1 关卡视图 StageView
- 1.2 世界视图 WorldView
总结

相信学完本课后，大家都会掌握只需寥寥几行代码就让 SwiftUI 复杂视图乖乖听话的奥义！

那还等什么呢？Let‘s go！！！😉

1. “固执己见”的 SwiftUI 视图

在上面的示例图中，英雄可以恣意挑战当前关卡，如果挑战成功则进入下一关卡，如果失败则会刷新挑战次数。前者应该在世界视图 WorldView 上有所体现，而后者则必须在关卡视图 StageView 中立即反映出来：

Button {if try! hero.challengeStage() {try! hero.moveToNextStage()}
} label: {Label("挑战关卡！", systemImage: "figure.fencing").foregroundStyle(.white)
}

可惜的是，无论何种情况所有视图都将成为不舞之鹤，无动于衷。这是“肿”么回事呢？

1.1 关卡视图 StageView

我们先到 StageView 中看看与此相关的 UI 布局代码：

let records = stage.queryAllChallengingRecords()if records.isEmpty {ContentUnavailableView("一片寂静，无人在此逗留...", systemImage: "eyes")
} else {ForEach(records) { record inif let hero = record.hero {VStack {heroCell(hero)HStack {Text("失败次数: \(record.challengeFailedCount)")Spacer(minLength: 0)if let timeString = try! hero.getStageStayRelevantTimeString(stage) {Text("已徘徊 \(timeString)")}}.foregroundStyle(.gray)}}}
}

理想的情况是：当英雄挑战关卡失败时，将会递增对应关卡挑战记录中挑战的次数，这会引起界面相关显示的变化。

在这里插入图片描述

但实际运行发现，界面并没有立即刷新。而只有当视图重建后，失败的挑战次数才能得以更新：

在这里插入图片描述

1.2 世界视图 WorldView

WorldView 视图是 StageView 的父视图，它的关键代码如下所示：

Form {let zones = world.zoneSortByNumberAryForEach(zones) { zone inSection {HStack {Image(systemName: "map")Text("\(zone.number). \(zone.name ?? "")")}.font(.title2.bold())if let desc = zone.desc, !desc.isEmpty {Text(desc).foregroundStyle(.gray)}ScrollView {LazyVGrid(columns: [GridItem](repeating: .init(), count: 3)) {ForEach(zone.stageSortByNumberAry) { stage inNavigationLink {StageView(stage: stage)} label: {VStack(alignment: .leading) {HStack {stageLogoImage(stage)Text("\(stage.number)")}.frame(maxWidth: .infinity, alignment: .leading).font(.title3.bold()).foregroundStyle(stageColor(stage))Text("\(stage.name ?? "")").monospaced().minimumScaleFactor(0.8).foregroundStyle(stageColor(stage))Spacer()HStack {let challengingHeros = stage.queryAllChallengingRecords().countlet victoryHeros = stage.queryAllVictoryRecords().countVStack(alignment: .leading) {Image(systemName: "person.3")Text("\(challengingHeros)/\(victoryHeros)")}.minimumScaleFactor(0.5).font(.subheadline).foregroundStyle(.teal)Spacer(minLength: 0)let includeHeros = stageChallengingMyHerosCount(stage)if includeHeros > 0 {HStack(spacing: 0) {Image(systemName: "star.hexagon")Text("\(includeHeros)")}.font(.subheadline).foregroundStyle(.yellow)}}}.padding().frame(maxWidth: .infinity).frame(height: 150).background(.thinMaterial, in: RoundedRectangle(cornerRadius: 11))}}}}.listRowSeparator(.hidden)}}
}
.navigationTitle("世界地图")