首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

SwiftUI -从一个视图更改@Published变量,并将其反映到另一个视图上

SwiftUI是一种用于构建用户界面的声明式框架,它是苹果公司推出的一种前端开发技术。通过使用SwiftUI,开发人员可以通过简单的代码来创建各种视图和控件,并且可以方便地对其进行修改和更新。

在SwiftUI中,可以使用@Published属性包装器来创建可观察的变量。当这些变量的值发生变化时,SwiftUI会自动更新相关的视图。这种机制称为响应式编程,它使得数据的变化能够自动地反映到用户界面上。

要实现从一个视图更改@Published变量,并将其反映到另一个视图上,可以按照以下步骤进行操作:

  1. 创建一个ObservableObject类,并使用@Published属性包装器声明一个或多个需要观察的变量。例如:
代码语言:txt
复制
import SwiftUI
import Combine

class MyData: ObservableObject {
    @Published var value: String = ""
}
  1. 在第一个视图中,使用@ObservedObject属性包装器将ObservableObject实例与视图关联起来。例如:
代码语言:txt
复制
struct ContentView: View {
    @ObservedObject var data = MyData()
    
    var body: some View {
        VStack {
            TextField("Enter value", text: $data.value)
            Button("Update") {
                // 更新value的值
                data.value = "New Value"
            }
        }
    }
}
  1. 在第二个视图中,同样使用@ObservedObject属性包装器将ObservableObject实例与视图关联起来,并使用@State属性包装器来创建一个可以在视图内部修改的变量。例如:
代码语言:txt
复制
struct DetailView: View {
    @ObservedObject var data: MyData
    @State private var detailValue: String = ""
    
    var body: some View {
        VStack {
            Text("Value: \(data.value)")
            TextField("Enter detail value", text: $detailValue)
            Button("Update") {
                // 更新value的值
                data.value = detailValue
            }
        }
    }
}

通过以上步骤,当在第一个视图中点击"Update"按钮更新value的值时,第二个视图中的Text和TextField也会相应地更新。

在腾讯云的产品中,与SwiftUI相关的推荐产品是腾讯云移动开发套件(Mobile Development Kit,MDK)。MDK是一套用于构建跨平台移动应用的开发工具,它提供了丰富的组件和功能,可以帮助开发人员更高效地开发和部署移动应用。您可以通过以下链接了解更多关于腾讯云移动开发套件的信息:腾讯云移动开发套件

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

SwiftUI 动画进阶 — Part4:TimelineView

请注意,Cadence 不是你可以更改的东西,而是反映设备状态的东西。文档仅提供了一例子。在 watchOS 上,降低手腕时 Cadence 会减慢。...为什么左边的 emoji 会变,而另一个总是悲伤?事实证明, SubView 没有接收到任何变化的参数,这意味着它没有依赖关系。SwiftUI 没有理由重新计算视图的主体。...笔者将在本节中介绍的技术,使用我们已熟知的动画并且热衷于视图动画从一时间线更新到下一时间线。这最终将让我们在纯 SwiftUI 中创建我们自己的类似关键帧的动画。...使用 onChange 和 onAppear 推进动画,使用 @State 变量来跟踪动画,设置一动画,将我们的视图从一时间线更新过渡到下一。...如果你需要更改存储的值,但要避免视图刷新……你可以使用一技巧。使用 @StateObject 代替@State。确保你不要在 @Published 中设置这样的值。

3.7K30

SwiftUI 4.0 的全新导航系统

一分为二 新的导航系统最直接的变化是废弃了 NavigationView,将其功能分成了两单独的控件 NavigationStack 和 NavigationSplitView。...,因此无须创建多余的视图实例 对由同一类型的值驱动的目标进行统一管理( 可以将堆栈中所有视图的 NavigationLink 处理程序统一视图中 ),有利于复杂的逻辑判断,也方便剥离代码 NavigationLink...分栏布局 在 SwiftUI 4.0 之前的版本,可以这样使用 NavigationView 来创建拥有左右两栏的编程式导航视图: class MyStore: ObservableObject {...动态控制多栏显示状态 另一个之前困扰多栏 NavigationView 的问题就是,无法通过编程的手段动态地控制多栏显示状态。...到了 SwiftUI 4.0 版本后,SwiftUI 已经将其真正的视为了 Button 。

10.3K62

Ask Apple 2022 与 SwiftUI 有关的问答(上)

是否有任何建议用来检测列表中的行选择,类似于 “NavigationLink”,但不导航另一个视图(例如,显示 Sheet 或从列表中选择一选项 )?...只有将这些变量重构视图模型中去这一种方式?A:如果在同一视图中,有多个相互关联的 @State 属性,将他们提取到一结构中或许是好的选择。...比如说我可以在父级视图中拥有 StateObject,通过 EnvironmentObject 传递该对象。然而,如果里面的 @Published 属性改变了,父视图和它的子树也都被重新计算。...使用一共同的底层数据源,并将其投射到 UI 的需求上,这样就可以对该模型进行单元测试,以确保常规和紧凑的投影是一致的。...但是从一文本字段下一文本字段的聚焦感觉不够流畅,而且每当我在一文本字段中输入一字母时,我的 CPU 使用率似乎会飙升到 70% — 100%。

12.2K20

架构之路 (七) —— iOS App的SOLID原则(一)

对于 SwiftUI 预览,您将始终显示日常开支。 只需更改数据源类型,您就可以使视图更加通用。 这显示了这两文件中有多少代码重复。 现在,即使您创建了一般视图,您仍然没有在任何地方使用它。...SwiftUI 列表具有用于两种报告类型的两硬编码 NavigationLink 视图。 如果要添加新类型的报告,例如 每周报告,您必须在此处和 ReportRange中更改代码。 这是低效的。...下一部分将允许您消除用于预览报告的预览视图上下文。 3....如果修改要保存的字段,则需要将此更改传播到两视图。但是,如果您直接传递数据源,则列表视图将不负责有关如何保存信息的任何详细信息。...即使将您的代码从一项目重用到另一个项目也毫不费力。 编写干净且有组织的代码是一总能得到回报的目标。如果你说,“我稍后会清理它”,当那个时刻到来时,事情通常会太复杂而无法真正清理。

4.7K10

SwiftUI-数据流

A Single Source Of Truth: 保持单一数据源,在 SwiftUI 中不同视图之间如果要访问同样的数据,不需要各自持有数据,直接共用一数据源即可,这样做的好处是无需手动处理视图和数据的同步...@Binding 主要有两作用: 在不持有数据源的情况下,任意读取。 从 @State 中获取数据应用,保持同步。...数据流图 从上图可以看出SwiftUI 的数据流转过程: 用户对界面进行操作,产生一操作行为 action 该行为触发数据状态的改变 数据状态的变化会触发视图重绘 SwiftUI 内部按需更新视图,...最终再次呈现给用户,等待下次界面操作 注意 在 SwiftUI 中,开发者只需要构建一视图可依赖的数据源,保持数据的单向有序流转即可,其他数据和视图的状态同步问题 SwiftUI 帮你管理,所以 ViewController...,这种视图的拼装方式大大提高了界面开发的灵活性和复用性,视图组件化任意组合的方式是 SwiftUI 官方非常鼓励的做法。

10.1K20

深度解读 Observation —— SwiftUI 性能提升的新途径

减少 SwiftUI 中对视图的无效更新,提高应用性能。...我将其梳理如下: 创建观察阶段: withObservationTracking 在当前线程的 _ThreadLocal.value 中创建一 _AccessList 执行 apply 闭包 可观察对象的可观察属性在...观察行为是线程安全的,withObservationTracking 可以运行在另一个线程中,onChange 闭包将运行于 withObservationTracking 发起的线程中 只有可观察属性可以被观察...精细地决定是否重新评估 body @StateObject var store = Store() // 只要有属性( @Publsiehd )发生变化,便对 body 重新评估 可观察对象支持嵌套吗( 一可观察对象的属性为另一个可观察对象...更多对视图优化技巧,请阅读 避免 SwiftUI 视图的重复计算[5] 一文。

53620

SwiftUI:使用 @EnvironmentObject 从环境中读取自定义值

好吧,@ EnvironmentObject更进一步:我们可以将对象放置环境中,以便任何子视图都可以自动访问它。...如果我们使用@ObservedObject,则需要将我们的对象从每个视图传递下一视图,直到它最终到达可以使用该视图视图E,这很烦人,因为B,C和D不在乎它。...在向您展示一些代码之前,还有最后一件事:环境对象使用您已经学过的ObservableObject协议,SwiftUI将自动确保共享同一环境对象的所有视图更改时都会更新。...接下来,我们可以定义两SwiftUI视图以使用我们的新类。...DisplayView().environmentObject(user) } } } 这就是使我们的代码正常工作所要做的一切——您现在就可以运行该应用更改文本字段

9.6K20

避免 SwiftUI 视图的重复计算

如果视图响应了不该响应的状态,或者视图的状态中包含了不该包含的成员,都可能造成 SwiftUI 对该视图进行不必要的更新( 重复计算 ),当类似情况集中出现,将直接影响应用的交互响应,产生卡顿的状况。...所有可以让变量成为 Source of Truth 的属性包装器都有一特点 —— 符合 DynamicProperty 协议。...SwiftUI 的托管数据池中,并且 SwiftUI 也尚未在属性图中将其作为 Source of Truth 与视图关联起来。...当 SwiftUI视图视图树上删除时,会一完成对 SwiftUI 数据池以及关联的清理工作。如此,使用 State 包装的变量,其存续期将与视图的存续期保持完全一致。...并且 SwiftUI 会在其变化时自动更新( 重新计算 )对应的视图SwiftUI 上有一困扰了不少人的问题:为什么无法在视图的构造函数中,更改 State 包装的变量值?

9.2K81

SwiftUI 中创建自适应的程序化导航方案

与 UIKit 使用的命令式导航方式不同,SwiftUI 作为一声明式框架,感知与设置两者之间是二位一体的关系。读取状态即可获知当前的导航位置,更改状态便可调整导航路径。...在栈中推送和弹出数据的过程对应了导航容器中添加和移除视图的操作。弹出全部数据相当于返回根视图,推送多个数据相当于一次性添加多个视图直接跳转到最后数据所代表的视图。...我们可以将 NavigationSplitView 视为具备一些预置能力的 HStack,通过在其中声明两或三视图从而创建两列或三列的导航界面。...不过我们可以通过使用另一个 navigationDestination(isPresented:) 修饰器来达到类似的目的。...不要忘记 NavigationStack 的根视图不在它的“栈”数据中在本例中,转换至 NavigationStack 时,需要将 Detail 列中声明的视图添加到“栈”的底端。反过来则将其移除。

4.2K30

如何在 SwiftUI 中创建悬浮操作按钮

悬浮按钮具有圆角形状,并在中心具有一图标。悬浮按钮带有一轻微的阴影。这是要实现悬浮按钮的所有行为。让我们逐步实现这些需求。在此之前,需要先创建初始化一屏幕用来承载这个悬浮按钮。...以下是一简单的列表视图,嵌套在导航视图和选项卡视图中,列表中显示了 item 加索引内容。...要使视图出现在另一个视图前面,可以使用 ZStack 或 overlay 修饰符。...将一按钮放在内容视图上。这将在列表视图上添加一加号图像按钮。示例运行截图如下:悬浮按钮位于屏幕的右下角接着,是需要实现需求中的第二步,使按钮与内容视图对齐右下角。...,添加了填充,背景色和前景色,并将其裁剪成圆形。

13432

Ask Apple 2022 与 SwiftUI 有关的问答(下)

你可以使用符合 ObservableObject 协议的不同对象来分割失效的范围有时,不依赖 @Published 而获得一些手动控制直接向 objectWillChange 发布变化是很有用的添加一中间视图...,只提取你需要的属性,依靠 SwiftUI 的 equality 检查来提前中止无效计算苹果工程师给出的答案与 避免 SwiftUI 视图的重复计算[5] 一文中的很多建议都一致。...任何标记 @Published变量都应该在主线上被修改,所以应该使用 @MainActor 。但任何触及该属性的代码都将被影响。是否有建议的标准模式或方法来改善这一点?...将背景扩展安全区域Q:如果我有一自定义的容器类型,可以接受一顶部和底部的视图,是否有办法让 API 的调用者将所提供的视图的背景扩展安全区域内,同时将内容( 如文本或按钮 )保留在安全区域内?...连锁动画Q:在 SwiftUI 中,如何实现连锁动画?例如,我想先给一视图做动画,当动画完成后立即启动另一个动画。A:不幸的是,目前不可能实现连锁动画。

14.8K30

SwiftUI 中的作用域动画

前言从一开始,动画就是 SwiftUI 最强大的功能之一。你可以在 SwiftUI 中快速构建流畅的动画。...简单示例让我们从一简单的示例开始,展示我们旧方法的一些缺点,这些方法用于在 SwiftUI 中驱动动画。...动画视图修饰符我们可以通过使用动画视图修饰符的另一个版本来消除意外动画,在这个版本中,我们可以绑定特定值,并且仅在值更改时进行动画处理。...它允许我们将动画范围限定为单个值,仅在与特定值相关的更改时执行动画。在这种情况下,我们没有任何意外的动画。使用多个可动画属性如果我们有多个可动画属性怎么办?...在 ViewBuilder 闭包内部,可以安全地对视图应用任何视图修饰符,期望仅对此代码块进行动画处理。

14010

为自定义属性包装类型添加类 @Published 的能力

访问我的博客 www.fatbobman.com[1] 可以获得更好的阅读体验 本文将对 @Published 与符合 ObservableObject 协议的类实例之间的沟通机制做以介绍,通过三示例...这一特性,也让 @Published 成为 SwiftUI 中最有用的属性包装器之一。...上面的代码也解释了为什么在使用了属性包装器后,无法再声明相同名称(前面加下划线)的变量。 // 在使用了属性包装器后,无法再声明相同名称(前面加下划线)的变量。...send() }) } } @PublishedObject 为我们提供了更加灵活的能力来驱动 SwiftUI视图,比如我们可以这样使用 @PublishedObject...的第三方库 —— @CloudStorage ,实现了在 NSUbiquitousKeyValueStore 发生变化时可以驱动 SwiftUI 视图的更新: struct DemoView: View

3.3K20

SwiftUI 下使用 NSUbiquitousKeyValueStore 同步数据

我无法对不同的开发者账号指向同一 iCloud Key-Value Store 的情况进行测试,请有条件的朋友帮忙测试一下告知我,谢谢。...在 SwiftUI 视图中使用 NSUbiquitousKeyValueStore 本节中,我们将在不使用任何第三方库的情况下,实现 SwiftUI 视图对 NSUbiquitousKeyValueStore...下面的代码将在 NSUbiquitousKeyValueStore 创建一键名称为 text 的字符串,并将其视图中的变量 text 关联起来: struct ContentView: View {...我对 CloudStrorage 进行了一点修改,在几个数据更改的时机点上添加了通知机制,通过在符合 ObservableObject 的类中,响应该通知调用objectWillChange.send...只能使用storage.cloud的方式,stroage.cloud将会导致 binding 数据无法刷新 wrappedValue 情况,从而出现视图上数据更新不完整的情况。

4.9K40

我庆幸果断放弃了SwiftUI:它还不够成熟

他发表了一篇博客,总结了尝试放弃 SwiftUI 的过程,这篇文章在 Hacker News 上引发了开发者们的大量讨论: “恕我直言,SwiftUI 是一很好的机会,但苹果公司对它投资不足。...这是宝贵的机会,能让我认真体验一把 SwiftUI 探索其内部工作原理。 起初项目工作良好,我对 SwiftUI 的表现可以说非常满意,我甚至创建了自己的修改器,以便更轻松地显示警报消息。...但每当 SwiftUI 更新检查器视图时(这种更新可能出现在移动过程中,甚至是在输入文本字段的时候),渲染速率都会下降到每秒 10 15 帧,而且相当不稳定。这显然让人无法容忍。...但我觉得这可能只是独立问题,并不能因此把 SwiftUI 一棒子打死。所以,我打算继续探索。 越来越慢 在实现了第一检查器之后,我开始研究另一个主题:Sprite 资产编辑器。...但上图展示的效果其实是在 AppKit 中完成的,因为我在 SwiftUI 一直实现不了预期的功能。大家应该注意到了,中间的 SpriteKit 视图上有三按钮(分别是 +、200% 和 -)。

4.9K20

打造可适配多平台的 SwiftUI 应用

另一个角度来看,用 SwiftUI 编写的代码,尽管大部分可以运行在不同的平台上,但有一部分则只能运行在特定平台上,而且往往这部分有平台限定的功能,最能体现平台所具有的特点和优势。...图片为了避免在适配其他平台时重复调整代码,我们可以采用类似于 horizontalSizeClass 的方式(通过环境变量),创建一可用于所有需要适配平台的自定义环境变量来解决这个问题。...在 SwiftUI 中,除了环境值外,另一个具备较多平台“限制”的部分就是视图的 Modifier。...当我们将“电影猎手”从 iPhone 移植 iPad 或 Mac 上时,除了屏幕可用空间更大之外,另一个显着的变化是使用者可以同时打开多个窗口,并可以在不同的窗口中对“电影猎手”进行独立的操作。...在“电影猎手”中,我们在 App 的位置创建了 Store(保存应用状态以及主要处理逻辑的单元)的实例,通过 .environmentObject(store) 注入视图中。

3.1K80

在 Text 中实现基于关键字的搜索和定位

Fae3VkfVUAAFzqBFae3VkkVUAAga7w考虑这个问题对于 SwiftUI 的应用来说比较新颖,且涉及不少博客中介绍过的知识,因此我对聊天室原本给出的解决方案进行了重新整理,通过本文对解决思路...,会自动将其设置为当前高亮关键字滚动至视图中心位置scrollTo_keyword2_2022-08-22_09.06.20.2022-08-22 09_07_57在对话数据较多的情况下(上千条)不应有性能瓶颈解决思路一千人眼中有一千哈姆雷特...image-20220822161247454点击切换按钮定位对应的搜索结果为 TranscriptionRow 视图添加显式标识符,通过 ScrollViewProxy 滚动到指定的位置。...如果当前显示的 transcription 无法满足条件,才会定位第一满足条件的结果位置。...总结范例代码并没有十分刻意地创建规范的数据流,但由于做到视图与数据分离,因此将其改写成任何你想使用的数据流方式并非难事。

4.2K30

打造可适配多平台的 SwiftUI 应用

另一个角度来看,用 SwiftUI 编写的代码,尽管大部分可以运行在不同的平台上,但有一部分则只能运行在特定平台上,而且往往这部分有平台限定的功能,最能体现平台所具有的特点和优势。...在 SwiftUI 中,除了环境值外,另一个具备较多平台“限制”的部分就是视图的 Modifier。...当我们将“电影猎手”从 iPhone 移植 iPad 或 Mac 上时,除了屏幕可用空间更大之外,另一个显着的变化是使用者可以同时打开多个窗口,并可以在不同的窗口中对“电影猎手”进行独立的操作。...在“电影猎手”中,我们在 App 的位置创建了 Store(保存应用状态以及主要处理逻辑的单元)的实例,通过 .environmentObject(store) 注入视图中。...因此,如果我们打算将应用引入支持多窗口平台的时候,最好能提前考虑这种情况,想好如何组织应用的状态。

2K10
领券