【IOS开发】SwiftUI中的@State、@Binding、@ObservedObject、@EnvironmentObject等属性包装器的作用和用法,并附上代码案例!!!

1.@State包装器的作用和用法

  • 作用:@State 用于在视图中声明可变的状态属性,并自动更新视图。当使用 @State 标记属性时,SwiftUI
    会跟踪该属性的变化,并在属性值发生更改时自动刷新视图。
  • 示例:在下面的示例中,我们使用 @State 来声明一个可变的计数属性,点击按钮时,计数会增加并更新视图。
struct ContentView: View {
    @State private var count: Int = 0

    var body: some View {
        Button(action: {
            count += 1
        }) {
            Text("Count: \(count)")
        }
    }
}

2.@Binding包装器的作用和用法

  • 作用:@Binding用于在视图之间传递和共享可读写的值。它创建了一个对属性的引用,以便多个视图可以共享同一份数据,并且对数据的更改会在所有引用的地方生效。
  • 示例:在下面的示例中,父视图通过 @Binding 将布尔值传递给子视图,以控制子视图的可见性。
struct ParentView: View {
    @State private var isChildViewVisible = false

    var body: some View {
        VStack {
            Toggle(isOn: $isChildViewVisible) {
                Text("Show Child View")
            }
            if isChildViewVisible {
                ChildView(isVisible: $isChildViewVisible)
            }
        }
    }
}

struct ChildView: View {
    @Binding var isVisible: Bool

    var body: some View {
        Text("Child View")
        Button(action: {
            isVisible = false
        }) {
            Text("Hide")
        }
    }
}

3.@ObservedObject包装器的作用和用法

  • 作用:@ObservedObject用于观察引用类型对象的变化,并在对象更改时更新视图。它用于管理外部对象的状态,并在该对象发生变化时自动刷新视图。
  • 示例:在下面的示例中,我们创建一个 UserData 类,使用 @ObservedObject标记属性,在视图中观察和使用该对象的属性。
class UserData: ObservableObject {
    @Published var name: String = ""
}

struct ContentView: View {
    @ObservedObject var user = UserData()

    var body: some View {
        TextField("Enter your name", text: $user.name)
            .textFieldStyle(.roundedBorder)
        Text("Hello, \(user.name)!")
    }
}

4.@EnvironmentObject包装器的作用和用法

  • 作用:@EnvironmentObject用于在整个应用程序中共享全局环境对象。它允许在应用程序中的任何地方访问和使用该对象,而无需手动传递数据。
  • 示例:在下面的示例中,我们创建一个 UserData 类,并使用 @EnvironmentObject 在视图中共享该对象。
class UserData: ObservableObject {
    @Published var name: String = ""
}

struct ContentView: View {
    @EnvironmentObject var user: UserData

    var body: some View {
        TextField("Enter your name", text: $user.name)
            .textFieldStyle(.roundedBorder)
        Text("Hello, \(user.name)!")
    }
}

5.@StateObject包装器的作用和用法

  • 作用:@StateObject 用于在视图中创建一个持久化的可观察对象,并在视图的生命周期内保持持久性。它类似于@ObservedObject,但在对象生命周期中只会创建一次。
  • 示例:在下面的示例中,我们创建一个 DataModel 类,并使用 @StateObject 在视图中创建和使用该对象。
class DataModel: ObservableObject {
    @Published var data: [String] = []
}

struct ContentView: View {
    @StateObject var dataModel = DataModel()

    var body: some View {
        VStack {
            Button(action: {
                dataModel.data.append("New Item")
            }) {
                Text("Add Item")
            }
            ForEach(dataModel.data, id: \.self) { item in
                Text(item)
            }
        }
    }
}

6.@GestureState包装器的作用和用法

  • 作用:@GestureState 用于跟踪手势的状态和进度。它用于创建自定义手势,并跟踪手势过程中的状态变化。
  • 示例:在下面的示例中,我们使用 @GestureState 跟踪长按手势的状态,并根据手势的状态来改变视图的颜色。
struct ContentView: View {
    @GestureState private var isLongPressed = false

    var body: some View {
        Circle()
            .fill(isLongPressed ? Color.red : Color.blue)
            .frame(width: 100, height: 100)
            .gesture(
                LongPressGesture()
                    .updating($isLongPressed) { currentState, gestureState, _ in
                        gestureState = currentState
                    }
            )
    }
}

7.@Environment包装器的作用和用法

  • 作用:使用 @Environment 属性包装器,你可以声明一个属性来获取特定环境变量的值,而无需手动传递它们。当环境变量的值发生变化时,相关的视图会自动更新。
  • 示例:下面是一个使用 @Environment 属性包装器的示例代码:
import SwiftUI

struct ContentView: View {
    @Environment(\.colorScheme) var colorScheme

    var body: some View {
        if colorScheme == .dark {
            Text("Dark Mode")
                .foregroundColor(.white)
                .background(Color.black)
        } else {
            Text("Light Mode")
                .foregroundColor(.black)
                .background(Color.white)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewLayout(.sizeThatFits)
    }
}
  • 在上面的示例中,我们使用 @Environment(.colorScheme) 将 colorScheme属性声明为从环境中获取当前的颜色方案。根据颜色方案的值,我们设置不同的文本颜色和背景色。
  • 在预览中,你可以尝试切换模拟器的外观(Light 或 Dark),以查看文本颜色和背景色是如何自动根据环境变量的值而更新的。
  • 需要注意的是,@Environment 属性包装器只能获取已经存在于环境中的环境变量的值。如果你想要自定义环境变量,可以使用@EnvironmentObject 属性包装器结合 ObservableObject 协议来创建和传递自定义的环境对象。
  • 注意,在使用 @Environment 属性包装器时,确保引入 import SwiftUI 并将视图的 body 属性声明为some View 类型。另外,使用 @Environment时,要确保环境变量在视图层次结构中正确传递和设置,以便让视图能够获取到环境变量的值。
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
SwiftUI,@State属性包装用于标记某个属性为状态属性,该属性的变化将自动触发视图的刷新。然而,在初始化,我们无法直接更改@State属性的值。 这是因为初始化是在视图初始化之前被调用的,此时视图的生命周期还未开始,@State属性还没有被实例化。因此,在初始化对@State属性进行更改是没有意义的,也无法触发视图的刷新。 如果需要在初始化属性进行更改,可以使用@Binding或@ObservedObject属性包装来替代@State。@Binding用于传递一个属性的引用,使其可以在视图之间进行更改和通信。@ObservedObject用于引用外部的可观察对象,通过该对象的绑定属性来进行状态的更改和通知。 以@Binding为例,可以在初始化接受一个@Binding参数并将其赋值给一个属性。然后,在视图,通过修改这个@Binding属性的值来实现对状态的更改。 例如,假设有一个视图需根据某个开关的状态来显示或隐藏某个元素。我们可以在初始化接受一个@Binding<Bool>类型的参数,并将其赋值给一个名为isOn的属性。 ```swift struct ContentView: View { @Binding var isOn: Bool init(isOn: Binding<Bool>) { _isOn = isOn } var body: some View { if isOn { Text("Hello, SwiftUI!") } else { EmptyView() } } } ``` 然后,在父视图,通过传入一个@State属性的引用来创建ContentView,并在需要时更改@Binding属性的值,即可实现对状态的更改和视图的刷新。 ```swift struct ParentView: View { @State private var isToggleOn = true var body: some View { VStack { Toggle("Toggle", isOn: $isToggleOn) ContentView(isOn: $isToggleOn) } } } ``` 这样,在切换Toggle开关时,ContentView的显示或隐藏将实时更新,从而实现了状态的更改和视图的刷新。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

令人作呕的溏心蛋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值