SwiftUI属性包装器

2022-03-31  本文已影响0人  星星编程

一、@State
二、@State和@Binding
三、@StateObject和@Published
四、@Environment
五、@EnvironmentObject

SwiftUI属性包装器.png

一、@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: "星星编程"))
上一篇下一篇

猜你喜欢

热点阅读