SwiftUI学习10：State和Binding绑定的使用

前言

在本章节中，你将学会如何使用 State 和 Binding 绑定，监听属性值的变化，和根据 Binding 绑定关系，改变一个属性值同时影响另一个属性值的变化

举例：

当我们在听音乐或看视频时，点击 播放 按钮，播放 按钮变成 暂停 按钮，同时视频开始播放

这就用到了 @State属性包装器 和 @Binding包装器

尝试完成下面的设计稿：

分析

• 首先我们准备好图片素材，未选中的图片和选中的图片，放到Assets中
• 定义一个@State变量存放状态，通过点击来切换状态
• 创建按钮通过状态变量判断显示图片

注：定义的变量放在struct下面，body上面

具体代码的实现

知识点：

.toggle() 切换按钮状态

完成代码：

struct ContentView: View {
    // 定义变量
    @State var isSelect:Bool = false
    
    var body: some View {
        
        // 按钮
        Button {
            print("点击了按钮")
            self.isSelect.toggle()
        } label: {
            Image(systemName: isSelect ? "checkmark.circle.fill" : "circle")
                .font(.system(size: 150))
                .foregroundColor(isSelect ? Color(red: 112/255, green: 182/255, blue: 3/255) : Color(red: 170/255, green: 170/255, blue: 170/255))
        }

    }
}

Binding绑定

以上面的代码为例，如果我们在按钮下面添加一个文本Text

按钮关闭时，title文字为：未开启

按钮打开时，title文字为：已开启

我们实现一下代码：

struct ContentView: View {
    // 定义变量
    @State var isSelect:Bool = false
    
    var body: some View {
        
        // 按钮
        VStack {
            Button {
                print("点击了按钮")
                self.isSelect.toggle()
            } label: {
                Image(systemName: isSelect ? "checkmark.circle.fill" : "circle")
                    .font(.system(size: 150))
                    .foregroundColor(isSelect ? Color(red: 112/255, green: 182/255, blue: 3/255) : Color(red: 170/255, green: 170/255, blue: 170/255))
            }
            
            // 文本
            titleView()
        }
    }
}


struct titleView: View {
    var body: some View {
        Text("未开启")
            .font(.system(size: 25))
            .fontWeight(.bold)
            .padding()
    }
}

此时如果我们想通过 isSelect 来关联 Text文字，会报错，因为找不到，不在一个视图下

因此，我们这里引入了 Binding绑定 概念，Binding共享了State定义的状态，State状态改变时，Binding绑定的参数会一起改变

• 定义绑定变量 isSelect

// 定义绑定
@Binding var isSelect:Bool

• 绑定状态用$

// 文本
titleView(isSelect: $isSelect)

• 完整代码

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct ContentView: View {
    // 定义变量
    @State var isSelect:Bool = false
    
    var body: some View {
        
        // 按钮
        VStack {
            Button {
                print("点击了按钮")
                self.isSelect.toggle()
            } label: {
                Image(systemName: isSelect ? "checkmark.circle.fill" : "circle")
                    .font(.system(size: 150))
                    .foregroundColor(isSelect ? Color(red: 112/255, green: 182/255, blue: 3/255) : Color(red: 170/255, green: 170/255, blue: 170/255))
            }
            
            // 文本
            titleView(isSelect: $isSelect)
        }
    }
}


struct titleView: View {
    // 绑定状态
    @Binding var isSelect:Bool
    
    var body: some View {
        Text(self.isSelect ? "已开启" : "未开启")
            .font(.system(size: 25))
            .fontWeight(.bold)
            .padding()
    }
}