专栏首页韦弦的偶尔分享SwiftU:将状态绑定到UI控件

SwiftU:将状态绑定到UI控件

SwiftUI的@State属性包装器允许我们自由修改视图结构体,这意味着当程序更改时,我们可以更新视图属性以匹配。

但是,使用UI控件时,事情会更复杂一些。例如,如果要创建用户可以键入的可编辑文本框,可以创建如下所示的快速用户界面视图:

struct ContentView: View {
    var body: some View {
        Form {
            TextField("Enter your name")
            Text("Hello World")
        }
    }
}

尝试创建包含文本字段和文本视图的窗体。但是,该代码不会编译,因为SwiftUI想知道文本字段中的文本存储位置。

请记住,视图是其状态的函数——文本输入框只能在反映存储在程序中的值时显示某些内容。SwiftUI需要的是结构中的一个字符串属性,它可以显示在文本输入框中,还将存储用户在文本输入框中键入的任何内容。

所以,我们可以把代码改成:

struct ContentView: View {
    var name = ""

    var body: some View {
        Form {
            TextField("Enter your name", text: name)
            Text("Hello World")
        }
    }
}

这将添加一个name属性,然后使用它创建文本字段。但是,该代码仍然无法工作,因为Swift需要能够更新name属性以匹配用户在文本字段中键入的任何内容,因此您可以使用`@State``,如下所示:

@State private var name = ""

但这还不够,我们的代码仍然无法编译。

问题是Swift区分了“在此处显示此属性的值”和“在此处显示此属性的值,但将任何更改写回该属性”

在Swift中,我们用一个特殊的符号来标记这些双向绑定,这样它们就很显眼:我们在它们前面写一个美元符号$。这告诉Swift,它应该读取属性的值,但也应该在发生任何更改时将其写回。

所以,我们的结构体的正确版本是:

struct ContentView: View {
    @State private var name = ""

    var body: some View {
        Form {
            TextField("Enter your name", text: $name)
            Text("Hello World")
        }
    }
}

现在试着运行这个代码——你应该发现你可以点击文本字段并输入你的名字,如预期的那样。

在继续之前,让我们修改文本视图,使其在文本字段的正下方显示用户名:

Text("Your name is \(name)")

注意它是如何使用name而不是$name?这是因为我们不想在这里使用双向绑定——我们想读取值,是的,但我们不想以某种方式将其写回,因为文本视图不会改变。

因此,当您在属性名称前看到一个美元符号时,请记住它创建了一个双向绑定:属性的值是读的,也是写的。

Binding state to user interface controls

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 100 Days of SwiftUI —— Day 10:类

    最初,类看起来与结构体非常相似,因为我们使用它们来创建具有属性和方法的新数据类型。但是,它们引入了一个新的,重要的且复杂的功能,即继承——使一个类在另一个类的基...

    韦弦zhy
  • SwiftUI:视图拆分与组合

    SwiftUI使我们可以将复杂的视图分解为较小的视图,而不会产生任何性能影响。这意味着我们可以将一个大视图拆分为多个小视图,SwiftUI会为我们重新组装它们。

    韦弦zhy
  • Hacking with iOS: SwiftUI Edition 视图和修饰符项目——挑战

    这个技术项目旨在深入探究特定的SwiftUI主题,我希望您在这里学到了很多有关视图和修饰符的知识——为什么SwiftUI的视图使用结构体,为什么some Vie...

    韦弦zhy
  • 【Hive】DDL 与 DML 操作

    删除数据库的模型行为是 RESTRICT,如果数据库不为空,需要添加 CASCADE 进行级联删除。

    阿泽 Crz
  • ubuntu下mysql的安装以及基本命令

    打开终端,输入sudo apt-get install mysql-server

    bear_fish
  • tensorflow变量命名空间与可视化

    用户1733462
  • TypeScript数组类型

    HueiFeng
  • TypeScript数组类型

    HueiFeng
  • Go指南_指针接收者

    Zoctopus
  • android service详解(1)

    (2)Service是可以在后台执行长时间运行操作而没有用户界面的应用组件。服务可由其他应用组件启动(如Activity),服务一旦被启动将在后台一直运行,即使...

    随心助手

扫码关注云+社区

领取腾讯云代金券