SwiftUI属性包装器
2022-03-31 本文已影响0人
星星编程
SwiftUI属性包装器.png一、@State
二、@State和@Binding
三、@StateObject和@Published
四、@Environment
五、@EnvironmentObject
一、@State
State是修饰状态属性的,状态属性改变时会自动刷新视图。状态属性声明为私有属性,以防止其它视图访问它们。从任何线程突变状态属性都是安全的。
struct ContentView: View {
@State private var showState: String = "默认显示State"
var body: some View {
VStack{
Text(showState).padding()
Text("点击更改State" ) .onTapGesture {
showState = "State已经被更改了"
}
}
}
}
二、@State和@Binding
@State和@Binding结合使用实现了MVVM模式。视图传@State修饰的参数时,须使用@Binding修饰的属性接收参数,从而实现双向绑定,保证数据实时更新。
struct BindingView: View {
@State private var paramState: String = "State传参"
var body: some View {
VStack{
ParamView(paramState: $paramState)
Text("点击State传参" ).onTapGesture {
paramState = "State传参成功!"
}
}
}
struct ParamView:View {
@Binding var paramState:String
var body:some View{
Text(paramState).padding()
Text("内部改变参数").padding().onTapGesture {
paramState = "State在内部修改成功!"
}
}
}
}
三、@StateObject和@Published
@StateObject是修饰class实例的状态属性,该实例的状态属性改变时会自动刷新视图。该实例须实现ObservableObject协议,该实例的属性用@Published修饰。
struct StateObjectView: View {
@StateObject var model = StateModel(name: "默认名字",age: 18)
var body: some View {
VStack{
Text(model.name).padding()
Text("点击更改StateObject" ).onTapGesture {
model.name = "星星编程"
}
}
}
class StateModel:ObservableObject {
@Published var name: String
@Published var age: Int
init(name: String, age: Int) {
self.name = name
self.age = age
}
}
}
四、@Environment
@Environment是获取系统环境变量的。例如isEnabled,editMode,presentationMode,horizontalSizeClass,verticalSizeClass等。
struct EnvironmentView: View {
@Environment(\.editMode) var mode
var body: some View {
VStack{
EditButton()
if mode?.wrappedValue == .active{
Text("完成编辑").padding()
} else {
Text("开始编辑").padding()
}
}
}
}
五、@EnvironmentObject
@EnvironmentObject是自定义的环境对象,须实现ObservableObject协议,该对象的属性用@Published修饰,可以跨视图传参、反向传参,保证数据实时更新。
创建EnvironmentModel环境对象。
class EnvironmentModel:ObservableObject {
@Published var id: Int
@Published var name: String
init(id: Int,name: String) {
self.id = id
self.name = name
}
}
创建EnvironmentObjectView视图。
struct EnvironmentObjectView: View {
@EnvironmentObject var model: EnvironmentModel
var body: some View {
Text(model.name)
}
}
给EnvironmentObjectView传值。
EnvironmentObjectView().environmentObject(EnvironmentModel(id:888,name: "星星编程"))