粉丝帮女流做的网站,镇江网页设计公司,做资质去哪个网站填资料,123883网站概览
用 SwiftUI 框架开发过应用的小伙伴们都知道#xff0c;SwiftUI 中的视图由各种属性和绑定“扑朔迷离”的缠绕在一起#xff0c;自成体系。 想要在 Xcode 预览中泰然处之的调试 SwiftUI 视图有时并不是件容易的事。其中#xff0c;最让人秃头码农们头疼的恐怕就要数如…
概览
用 SwiftUI 框架开发过应用的小伙伴们都知道SwiftUI 中的视图由各种属性和绑定“扑朔迷离”的缠绕在一起自成体系。 想要在 Xcode 预览中泰然处之的调试 SwiftUI 视图有时并不是件容易的事。其中最让人秃头码农们头疼的恐怕就要数如何正确的向预览传入视图内部的状态了。 在本篇博文中您将学到如下内容 概览1. PreviewModifier 到底有啥用2. 用 PreviewModifier “点缀”预览视图外观3. PreviewModifier 诞生之前我们如何向预览传送数据4. 用 PreviewModifier 注入inject预览模拟数据总结 遵循 SwiftUI 6.0Xcode 16新推出的 PreviewModifier 协议正可谓是“你好我好大家都好”。
不信且看分晓Let‘s go 1. PreviewModifier 到底有啥用
从 SwiftUI 6.0 开始顺便借助 Xcode 16 的东风苹果推出了全新的 PreviewModifier 协议 正如该协议“自夸”的那样PreviewModifier 可以让 Xcode 预览Preview界面和调试数据“浑然天成融洽无间”。
有了 PreviewModifier我们即可从两个方面来为预览调试“雪中送炭”
统一改变预览中视图的外观为预览视图传入模拟测试数据
下面就让我们依次来看看它们究竟是如何“大施拳脚”的吧。
2. 用 PreviewModifier “点缀”预览视图外观
假若我们希望 Xcode 预览中某些被调试的视图都放在导航容器中并且根据实际情况增加导航标题和导航栏 Logo。
注意这些视图的 body 代码自身并没有嵌入到导航视图内因为这是使用它们的父视图份内的事儿。这意味着我们必须繁文缛节的在所有预览中将这些视图嵌入到导航视图中去
#Preview {NavigationStack {ContentView().navigationTitle(SwiftUI 滚动行为演示).toolbar {Text(大熊猫侯佩 \(Text(CSDN).foregroundStyle(.red))).foregroundStyle(.orange).font(.headline.weight(.heavy))}}
}如上代码所示我们不但要在预览中为每个“潜在的”导航子视图添加导航容器NavigationStack还要不厌其烦的为它们设置相应的导航标题和 Logo 视图。
现在我们看看 PreviewModifier 协议能为我们做些什么吧
struct NavPreviewHelper: PreviewModifier {var title: Stringfunc body(content: Content, context: Void) - some View {NavigationStack {content.navigationTitle(title).toolbar {Text(大熊猫侯佩 \(Text(CSDN).foregroundStyle(.red))).foregroundStyle(.orange).font(.headline.weight(.heavy))}}}
}如大家所见我们创建了一个 NavPreviewHelper 结构并让其遵循 PreviewModifier 协议。我们只需实现其中的 body 方法然后将预览测试的视图包裹在导航容器NavigationStack内部并妥善为其设置了标题和预览 Logo。
有了 NavPreviewHelper 这位“贤内助”我们可以易如反掌的将任何需要“如此炮制”的预览测试视图嵌入到 NavigationStack 中并妥善“装扮”了
#Preview(traits: .modifier(NavPreviewHelper(title: SwiftUI 滚动行为演示))) {ContentView()
}#Preview(另一个视图, traits: .modifier(NavPreviewHelper(title: 另一个视图演示))) {Text(另一个测试视图)
}从下面的演示中大家可以看到我们的 NavPreviewHelper 就像“预览模版”一样可供任何有此需求的预览视图使用了 我们甚至还能通过 PreviewTrait 扩展进一步简化 #Preview 宏中 NavPreviewHelper 的调用
extension PreviewTrait where T Preview.ViewTraits {MainActor static func navHelper(_ title: String) - PreviewTraitT {.modifier(NavPreviewHelper(title: title))}
}#Preview(traits: .navHelper(SwiftUI 滚动行为演示)) {ContentView()
}#Preview(另一个视图, traits: .navHelper(另一个视图演示)) {Text(另一个测试视图)
}3. PreviewModifier 诞生之前我们如何向预览传送数据
在 PreviewModifier 降临之前倘若我们想要为视图传入预览测试数据在某些场景下非得大费周章一番不可
#Preview {Previewable var clock Clock.newCountClock(name: 大熊猫侯佩的计时器)let container ModelContainer.previewtry! container.mainContext.save(clock)return CountClockCell(clockID: clock.id).modelContainer(container)
}如上代码所示我们需要为所有使用 Clock 托管实例的预览视图“喋喋不休”的初始化测试数据。虽然使用 SwiftUI 6.0 新加入的 Previewable 宏能够让实现简洁不少但在每个预览视图之前都来上这么“一坨”代码恐怕也绝非长久之计。毕竟它严重违反了 DRY和 KISS原则。 关于 SwiftUI 6.0Xcode 16 中预览新增 Previewable 宏的使用请小伙伴们移步如下链接观赏更详细的内容
SwiftUI 6.0Xcode 16全新 Entry 和 Previewable 宏让开发妙趣横生 4. 用 PreviewModifier 注入inject预览模拟数据
现在我们回到拥有 PreviewModifier 色彩斑斓的“新世界”中吧。
回忆一下之前 NavPreviewHelper 类型的实现我们实际上完全忽略了 body 方法中的 context 参数所以将其类型设置为 Void。其实这个 context 可以大有作为。
为了让 context 物尽其用我们需要另外实现一个 makeSharedContext 方法用它来注入测试模型数据。
现在我们尝试将前一个需要 Clock 模型数据的预览改写为 PreviewModifier “助人为乐”的形式
var clockID: UUID?
private struct MockClockData: PreviewModifier {static func makeSharedContext() throws - ModelContainer {let container ModelContainer.previewlet clock Clock.newCountClock(name: 大熊猫的计时器)clockID clock.idtry container.mainContext.save(clock)return container}func body(content: Content, context: ModelContainer) - some View {content.modelContainer(context)}
}extension PreviewTrait where T Preview.ViewTraits {available(watchOS 11.0, *)MainActor static var sampleData: Self .modifier(MockClockData())
}available(watchOS 11.0, *)
#Preview(traits: .mockClockData) {CountClockCell(clockID: clockID!)
}从上面的代码可以看到我们利用 makeSharedContext 方法在指定的 ModelContainer 中生成并保存了所需的测试数据接下来在 Xcoce 预览中使用这些数据就是水到渠成的事情啦 有了这位预览“好帮手”之后我们现在可以为任何需要 Clock 托管数据的预览视图“套用” MockClockData “测试模版”啦小伙伴们是不是觉得事倍功半一步到位了呢棒棒哒
总结
在本篇博文中我们介绍了如何使用 SwiftUI 6.0Xcode 16中最新的 PreviewModifier 协议让预览调试闲情逸致、如虎添翼。
感谢观赏再会啦
