ios(swiftui) 属性包装器详解

目录

1. @State  

2. @Binding 

3. @ObservedObject 和@Published 

4. @StateObject 

5. @EnvironmentObject和@Environment 

6. @AppStorage 


在 SwiftUI 中,属性包装器用于增强和管理视图的状态,以及处理视图与数据模型之间的绑定和交互。下面是一些常见的属性包装器:

1. @State  

使用@State属性包装器的变量是私有的,并且仅在创建它们的视图中使用。当用户与界面交互引起状态改变时,SwiftUI会重新绘制依赖这些状态的视图。这是响应式编程思想在SwiftUI中的表现。

这里有一个简单的例子,演示如何使用@State

import SwiftUIstruct ContentView: View {// 使用@State修饰的计数器变量@State private var counter = 0var body: some View {VStack {Text("你点击了 \(counter) 次")Button("点击我") {// 因为counter是@State变量,改变它的值将会重新绘制视图self.counter += 1}}}
}

在这个例子中,每当counter变量的值改变时(例如,用户每次点击按钮时),SwiftUI都会重新调用body属性,因此文本显示的计数器值会更新。

2. @Binding 

允许视图共享并能够双向绑定到外部的状态。这常用于将父视图的状态传递给子视图。

@Binding 是一个属性包装器,它允许子视图共享父视图的状态。@Binding 为子视图提供对父视图的某个状态的引用,这样一来,子视图可以读取这个状态并能够在发生更改时更新它,而不是维护它自己的状态副本。

当你使用 @Binding 时,它实际上是对一个 @State@ObservedObject@EnvironmentObject 或其他具有可观察状态的源的引用。

以下是一个简单的例子说明如何使用 @Binding

首先,假设你有一个父视图,使用 @State 管理一个布尔值 isOn

struct ParentView: View {@State private var isOn = falsevar body: some View {VStack {Toggle("Switch", isOn: $isOn)ChildView(isOn: $isOn) // 传递 @State 给子视图}}
}

接着,你有一个子视图 ChildView,需要使用从父视图传递的 isOn 状态:

struct ChildView: View {@Binding var isOn: Bool // 使用 @Binding 接收父视图的状态var body: some View {Text(isOn ? "It's on" : "It's off")}
}

在这个例子中,子视图 ChildView 可以直接显示 isOn 的状态,也能够在不同的视图层级之间共享和修改这个状态,如果 isOn 在子视图中被修改,父视图中的 @State 也会相应更新。

3. @ObservedObject 和@Published 

@Published 通常用于 ObservableObject 里的属性。当给标记为 @Published 的属性赋值时,这个改动会发布出去,所有观察者都可以接收到这个改变。

@ObservedObject和 @Binding 类似,但是用于当数据模型遵守 ObservableObject 协议时。它会使得视图自动更新以响应可观察对象中发生的变化。

 声明一个外部来源的可观察对象。当这个可观察对象发生变化时,使用 @ObservedObject 标记的视图会被重新绘制。这使得在SwiftUI中实现数据的双向绑定和状态管理变得更加简单和直观。

这里有一些基础的概念和使用示例:

可观察对象 (Observable Object)

可观察对象通常是遵循了 ObservableObject 协议的类,并且通过 @Published 属性包装器来声明那些当变化时需要通知视图重新渲染的属性。

import Combine
import SwiftUIclass ExampleModel: ObservableObject {@Published var score = 0
}

使用 @ObservedObject

在SwiftUI视图中使用 @ObservedObject 来观察这些对象的变化:

struct ExampleView: View {@ObservedObject var model: ExampleModelvar body: some View {Text("Score: \(model.score)").onTapGesture {model.score += 10}}
}

在这个例子中,每次点击文本时,模型的 score 属性会增加10。由于 score被标记为 @Published,且 ExampleModel 遵循了 ObservableObject,所以每次 score 改变时,使用了 @ObservedObject 的 ExampleView 都将重新绘制,反映出新的分数。

注意事项

  • 当使用 @ObservedObject 时,你需要确保这个对象在视图更新时不会被销毁或者重新创建,否则会丢失其状态。这通常意味着这个对象是由外部传递给视图的,或者在视图的父级或共享环境(如使用 EnvironmentObject)中保存。
  • 对于视图自己的内部状态,你通常会使用 @State 或者 @StateObject 作为属性包装器。

@StateObject vs @ObservedObject

不要混淆 @ObservedObject 和 @StateObject

  • @StateObject 用于视图对数据所有权的声明(它负责创建这个对象),并且它会在视图重新绘制时保持对象的生命周期。它在SwiftUI 2.0中引入,用来取代在视图体内部初始化 @ObservedObject 的用法。
  • @ObservedObject 通常是从父视图或其他部分的应用程序传递过来的,并且视图不负责管理其生命周期。

在实践中,你需要根据实际的数据所有权和生命周期管理要求来选择使用 @StateObject 还是 @ObservedObject

4. @StateObject 

- 在 SwiftUI 2.0 中引入,用来初始化可观察对象,并且拥有对该对象的所有权。也就是说它会构建并保持对象直到视图的整个生命周期结束。

@StateObject 与 @ObservedObject 类似,都用于引用遵守 ObservableObject 协议的类实例。这种遵守 ObservableObject 协议的类会发布对其属性的更改,这样 SwiftUI 就可以在这些属性变化时更新 UI。

两者之间的区别在于它们的用途和生命周期:

  • @StateObject 应当用于创建和拥有对应的 observable object,即表示该视图负责初始化这个对象,并且是这个对象的“源头”或首个拥有者。这保证了状态对象不会因为视图的重新渲染而被重新创建。

  • @ObservedObject 应当用于那些已经由其他部分创建的 observable objects。其实际上是对从外部传入的状态对象的引用,意味着它不负责该对象的生命周期。

在以下情形下使用 @StateObject

import SwiftUIclass ExampleModel: ObservableObject {@Published var count: Int = 0// Other properties and methods
}struct ExampleView: View {@StateObject var model = ExampleModel()var body: some View {// UI elements that use 'model'Text("Count: \(model.count)").onTapGesture {model.count += 1}}
}

这个例子展示了如何在视图中创建一个 @StateObject 以存储和管理状态。在视图的生命周期中,ExampleModel 对象将保持活动并不会因为视图的重建而被销毁或重置。使用这种方式,你可以确保状态的一致性并避免不必要的对象重建

5. @EnvironmentObject和@Environment 

@EnvironmentObject可以从环境中获取共享的数据模型,这个属性包装器不负责创建对象,而是假定共享的对象已经被其它某部分的代码添加到环境中去了

@Environment 允许视图访问从 iOS 提供的环境值,例如 @Environment(\.presentationMode) 可以访问视图的表现模式。

@EnvironmentObject 和 @Environment 都是用于数据传递和状态共享的属性包装器,不过它们在使用中有一些区别。

(1)@EnvironmentObject

@EnvironmentObject 用于向视图的层次结构中传递共享的数据对象。你可以在应用的任意位置注入这个共享的数据对象,让其他需要这些数据的视图可以直接访问它,而不需要通过视图参数来逐层传递。这增加了数据共享的便捷性,尤其是在大型项目中。它通常用于类似于全局状态或者应用中的共享数据模型。

使用@EnvironmentObject时,首先需要在某个视图之外的地方创建一个可观察对象。该对象需要遵守ObservableObject协议。然后,在视图层次结构的上游 somewhere(比如在顶级视图或者场景代理中) 你需要将这个对象作为环境对象注入。在需要访问这些数据的视图中,你使用@EnvironmentObject来声明这个依赖,然后 Swift UI会自动为你提供这个对象。

示例代码:

class SharedData: ObservableObject {@Published var value: String = "Hello, World!"
}struct ContentView: View {// 注入环境对象@EnvironmentObject var sharedData: SharedDatavar body: some View {Text(sharedData.value)}
}let sharedData = SharedData()
let contentView = ContentView().environmentObject(sharedData)

如果尝试访问未注入的@EnvironmentObject,应用会崩溃。

(2)@Environment

@Environment用于读取从环境中传递下来的值,如系统设置、接口样式、布局方向等。相比@EnvironmentObject@Environment更多用于访问由 SwiftUI 框架维护的预设值,而不是自定义的可观测对象。一个常见的使用场景是,读取系统的颜色方案(.colorScheme),或者是当前的时间区域(.timeZone)。

示例代码:

struct ContentView: View {// 从环境中读取值@Environment(\.colorScheme) var colorSchemevar body: some View {Text("The current color scheme is \(colorScheme == .dark ? "Dark" : "Light")")}
}

在这个例子中,我们没有注入任何自定义对象到环境中。相反,我们直接访问了 SwiftUI 环境中的预设值。

两者虽然看起来类似,但根据使用场景的不同,开发者可以选择最适合的一个。@EnvironmentObject 更适合那些全局共享状态的情景,而@Environment更适合需要访问由系统维护的环境值。

6. @AppStorage 

-在 SwiftUI 2.0 中引入,用于简单的数据持久化,当读写 UserDefaults 时自动同步视图。

@AppStorage 是一个 Swift 属性包装器(property wrapper),提供了一种将用户默认设置或应用设置存储在 UserDefaults 中的便捷方式。使用 @AppStorage, 你可以创建一个绑定到 UserDefaults 中具体键的属性,当该属性的值发生变化时,UserDefaults 会自动更新,反之亦然。

在 SwiftUI 中,@AppStorage 的使用十分普遍,特别是用来响应某些设置或偏好的变化,并据此更新UI。这种数据持久化的方式适用于存储少量的用户配置信息,例如:标记应用是否为首次启动、用户的暗黑模式偏好、或者任何小型配置数据。

这里是一个基本的使用示例:

import SwiftUIstruct ContentView: View {// 使用 @AppStorage 监视对应的 UserDefaults 键值对,当值变化时自动更新视图。@AppStorage("isDarkMode") private var isDarkMode = falsevar body: some View {VStack {Text(isDarkMode ? "Dark Mode is ON" : "Dark Mode is OFF")// 切换按钮可以更改 @AppStorage 绑定的值Button("Toggle Dark Mode") {isDarkMode.toggle()}}}
}

在上面的例子中,isDarkMode 属性绑定到了 UserDefaults 中的 "isDarkMode"键。当你点击按钮切换 isDarkMode 的值时,这个值会自动保存到 UserDefaults并在下次应用启动时保留。同时 UI 也会响应这个值的变化并立即更新。这种简单的数据绑定方法让你能够不必直接操作 UserDefaults API 而轻松保存和访问用户设置。

官网:SwiftUI | Apple Developer Documentation

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/184576.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flutter创建TabBar

使用TabBar和TabBarView来创建一个包含"首页"、"分类"和"我的"的TabBar。每个Tab对应一个Tab控件,TabBarView中的每个页面对应一个Widget。 1.Tab使用自定义图标和颜色 一般UI设计的图会带渐变色之类的,应该保持图片的原…

【实战教程】PHP如何轻松对接阿里云直播?

1. 配置阿里云直播的推流地址和播放地址 使用阿里云直播功能前,首先需要在阿里云控制台中创建直播应用,然后获取推流地址和播放地址。 推流地址一般格式为: rtmp://{Domain}/{AppName}/{StreamName}?auth_key{AuthKey}-{Timestamp}-{Rand…

vuepress-----5、SEO

# 5、SEO 标题描述信息作者faviconkeywords 图标下载:https://favicon.io/ (opens new window) 个人博客SEO属性设置 module.exports { title: "小邵子",description: 小邵子的个人笔记,head: [[link, { rel: icon, href: /favicon.ico }],[meta, { …

什么是API? (应用程序编程接口)

我们经常听到 API 这个专业名称。那么什么是 API 呢? 定义 API(Application Programming Interface,应用程序接口)是一些预先定义的函数,或指软件系统不同组成部分衔接的约定。目的是提供应用程序与开发人员基于某软…

【电路笔记】-分流器

分流器 文章目录 分流器1、概述2、通用/网络配置3、无功分流器3.1 电阻电容分流器3.2 电阻-电感分流器 4、总结 我们在之前关于分压器的文中已经看到,分压过程是通过在串联配置中关联相同的组件来实现的。 在本文中,我们将重点关注电流分频器执行的电流分…

MongoDB导入导出命令

(1)mongoexport命令 例如: mongoexport --db testdb --collection person --out person.json mongoexport --db testdb --collection person --fields name,age --out person.json mongoexport --db testdb --collection person --query {&qu…

Arkts@Watch装饰器与内置组件双向同步深度讲解与实战应用【鸿蒙专栏-14】

文章目录 ArkTS 状态管理深度解析:@Watch 和 $$ 运算符的妙用@Watch 装饰器:状态变量的敏感监听装饰器说明语法说明观察变化和行为表现限制条件使用场景$$ 运算符:内置组件状态的双向同步使用规则使用示例ArkTS 深度探索:@Watch 装饰器与 $$ 运算符的进阶应用进阶应用:@Wa…

四个方法,设置excel文件只读模式

由于excel文件经常用于数据文件,数据就需要特别保护,大家可能需要将文件设置为只读模式来保护数据不被修改,Excel文件想要设置为只读的方法有很多,今天分享四种方法给大家: 方法一:文件属性 右键点击文件…

浅谈交流电表在印度充电桩生产厂家的应用

一.背景: 近几年为应对温室气体的排放导致的全球变暖、气候变化等问题,各大国纷纷对焦推进电动汽车,从而减少传统燃油汽车带来的大量温室气体排放。而推进新能源汽车的各项举措之中,充电桩的基础建设,又是其中的重中之重&#xf…

开源播放器GSYVideoPlayer + ViewPager2 源码解析

开源播放器GSYVideoPlayer ViewPager2 源码解析 前言一、GSYVideoPlayer🔥🔥🔥是什么?二、源码解析1.ViewPager2Activity 总结 前言 本文介绍GSYVideoPlayer源码中关于ViewPager2 GSYVideoPlayer 实现的滑动播放列表的实现原理。…

VMD-Attention-LSTM 价格预测实战

VMD-Attention-LSTM时间序列价格预测实战 完整数据代码可直接运行_哔哩哔哩_bilibili 数据展示:数据有几万条 足够的 主要模型代码: import tensorflow as tfdef attention_3d_block(inputs,TIME_STEPS,SINGLE_ATTENTION_VECTOR):# inputs.shape = (batch_size, time_steps,…

C#队列(Queue)及泛型类(Queue<T>)

队列实现先进先出,有装箱拆箱行为,可存放任意类型,但无法获取指定位置元素,只能取出最先存储的元素。 一、基本队列操作 1、向队列添加元素(Enqueue) Queue queue new Queue(); queue.Enqueue(1); queue.…

升级openssh以及回滚,telnet远程链接

目录 安装telnet 编译安装openssl 解压并编译安装OpenSSH 修改配置允许root用户远程登录 测试没问题后开启防火墙关闭telnet 回滚办法(如果没有备份的话) 安装telnet 为了防止升级安装失败,无法使用ssh做远程连接,因此安装…

区间合并笔记

文章目录 什么是区间合并怎么做区间合并AcWing 803. 区间合并思路解析my - CODEdalao の CODE 什么是区间合并 区间合并是指给定多个区间,让你将重合的区间合并为一个区间 怎么做区间合并 区间合并类问题大多三个办法: 按左端点排序按右端点排序按左右…

企业微信ipad版,http协议接口发开,获取客户群列表

版本介绍: HTTP协议接口可以通过该接口实现企业微信的各种功能,使用HTTP协议可以避免使用hook形式的需要开启PC客户端的方式,同时可以实现三端同时在线,不影响PC和手机端的登录状态,调用简单,可以支持几千…

Apache Doris 整合 FLINK CDC 、Paimon 构建实时湖仓一体的联邦查询入门

1.概览 多源数据目录(Multi-Catalog)功能,旨在能够更方便对接外部数据目录,以增强Doris的数据湖分析和联邦数据查询能力。 在之前的 Doris 版本中,用户数据只有两个层级:Database 和 Table。当我们需要连…

一键删除方舟编译器缓存文件js、js.map插件ArkCompilerSupport

新手学习鸿蒙开发,发现DevEco Studio编译过种会生成js、js.map,在论坛上看了其它开发者也提了问题但无没解决,写了一个插件大家试下: https://plugins.jetbrains.com/plugin/23192-arkcompilersupport 源码:https://g…

js 如何实现转驼峰处理

目录 1,需求2,实现和原理3,原理1,正则2,替换函数 1,需求 在开发中,有时需要将中划线 -,下划线 _,冒号 : 这些连接符转为驼峰形式。 如果只有一个连接符,处理…

深度学习——Loss汇总

深度学习——Loss汇总 一、IOU Loss二、L1 Loss 一、IOU Loss 公式: 参考资料: 目标检测回归损失函数——IOU、GIOU、DIOU、CIOU、EIOU 二、L1 Loss 公式: 参考资料: PyTorch中的损失函数–L1Loss /L2Loss/SmoothL1Loss

Day72x.算法训练

739. 每日温度 class Solution {public int[] dailyTemperatures(int[] temperatures) {LinkedList<Integer> st new LinkedList<>();st.push(0);int[] res new int[temperatures.length];for (int i 1; i < temperatures.length; i) {while (!st.isEmpty()…