SwiftUI踩坑记之@State初始化之谜

问题

最近在写 SwiftUI 的时候遇到了一件怪事。

Swift 复制代码
struct AView: View {
    @State private var content: String
    var body: some View {
        Text(content)
    }
}

#Preview {
    AView(content: "Test")
}

上面的代码没有问题,参数可以传递给 AView 被 @state 标记的参数 content。

紧接着我们把 conten 变成 optional,结果还是一样符合预期。

Swift 复制代码
struct AView: View {
    @State private var content: String?
    var body: some View {
        Text(content ? "")
    }    
}

#Preview {
    AView(content: "Test")
}

不过当我们给 View 添加初始化方法后,奇怪的事情就开始出现了。外面的参数无法传递给 conten 了,最终 Aview 展示了空字符串。 打断点看了一下,参数确实传递进去了,但走到 body 方法内部时,content 是空的(类型是State<Optional<String>>, _value = nil)。

Swift 复制代码
struct AView: View {
    @State private var content: String?
    var body: some View {
        Text(content ? "")
    }
    
    init(content: String) {
        self.content = content
    }
}

#Preview {
    AView(content: "Test")
}

网上查了一下,发现如果给 View 加 init 方法,需要用特殊的方式给 State 属性赋值。

Swift 复制代码
init(content: String) {
    _content = State(initialValue: content)
}

我理解被 @State 包装的属性类型已经变了(State<Type>)。我们在 View 的上下文中可以直接修改它,但是在初始化方法中不行。

不过当我们把 content 从 optional 改成 非 optional 时,情况又变了。不需要使用特殊的方式,值一样可以通过 init 方法传递给 content 。。。

Swift 复制代码
struct AView: View {
    @State private var content: String
    var body: some View {
        Text(content)
    }
    
    init(content: String) {
        self.content = content
    }
}

#Preview {
    AView(content: "Test")
}

结论

一般我们不会主动去写 View 的 init 方法,不过当参数比较多且不是必要参数时,我们可能会重写 init 方法给参数默认值,以简化初始化方法。如果在之后的开发者遇到了参数无法传递问题,可以尝试使用 State 的构造方法来赋值。

相关推荐
东坡肘子5 天前
当 Build in Public 重新转入地下 -- 肘子的 Swift 周报 #157
人工智能·swiftui·swift
OliverQiu6 天前
开源一个 macOS 小工具:集中管理 ChatGPT 的网络启动配置
macos·chatgpt·swiftui·mac·proxy·codex·dmg
传奇开心果编程10 天前
【SwiftUI提高练中学】第9课 安全与隐私
swiftui·移动开发·swift·编程语言理论·开发范式·编程框架·声明式ui
传奇开心果编程10 天前
【声明式UI开发实用技术学与练】第8课 状态提升与下放
学习·flutter·react native·ui·swiftui·composer
东坡肘子10 天前
Swift Server,又多了一个 Google -- 肘子的 Swift 周报 #156
人工智能·swiftui·swift
传奇开心果编程11 天前
【现代声明式UI学与练】第4课 列表渲染与 key——如何高效渲染列表、key 的作用、列表重排时的状态保持
学习·flutter·react native·ui·swiftui·android jetpack
传奇开心果编程12 天前
【SwiftUI提高练中学】第8课 网络层架构:拦截器、重试、缓存与离线优先
学习·macos·ui·ios·swiftui
传奇开心果编程12 天前
【现代声明式UI学与练】第7课 组件通信——父传子、子传父、跨层级通信、状态提升与 Context
学习·flutter·react native·ui·swiftui·android jetpack
tink12 天前
告别 Xcode IDE:用 VS Code + SweetPad + XcodeGen 开发 iOS 应用的完整指南
ios·swiftui·xcode
传奇开心果编程12 天前
【现代声明式UI学与练】第9课 性能优化——渲染优化、列表优化、内存优化、启动优化
学习·flutter·react native·ui·性能优化·swiftui·android jetpack