大师学SwiftUI第6章 - 声明式用户界面 Part 2

本文链接：https://blog.csdn.net/ardor123/article/details/135403658

控制视图

控件是交互工具，用户通过交互修改界面状态、选取选项或插入、修改或删除信息。我们实现过其中的一部分，如前例中的Button视图以及TextField视图。要定义一个有用的接口，需要学习有关视图的更多知识以及其它由SwiftUI所提供的控制视图。

按钮视图

我们已经学到，Button视图创建一个简单的控件，在点击时执行操作。以下是该结构体部分初始化方法。

Button(String, action: Closure)：此初始化方法创建一个Button视图。第一个参数是定义按钮标签的字符串，action参数是在点击按钮时执行的代码的闭包。
Button(action: Closure, label: Closure)：此初始化方法创建一个Button视图。action参数是在点击按钮时执行的代码的闭包，label参数是返回用于创建标签的视图的闭包。
Button(String, role: ButtonRole?, action: Closure)：此初始化方法创建一个Button视图。第一个参数是定义按钮标签的字符串。role参数一个结构体，包含描述按钮目的的类型属性。有两个属性：cancel和destructive。action参数是在点击按钮时执行的代码的闭包。

我们已经实现过第二个初始化方法创建按钮，但如果仅需对标签使用字符中，可以简化代码使用第一个初始方法加后置的用于操作的闭包。

示例6-10：实现Button视图

struct ContentView: View {
    @State private var colorActive: Bool = false
    
    var body: some View {
        VStack(spacing: 10) {
            Text("Default Title")
                .padding()
                .background(colorActive ? Color.green : Color.clear)
            Button("Change Color") {
                colorActive.toggle()
            }
            Spacer()
        }.padding()
    }
}

上例在VStack中包仿一个Text视图和一个Button视图。Text视图展示固定的文本，背景色用colorActive属性定义。如果属性值是true，我们将green色赋值给背景，否则颜色为clear（透明）。在按下按钮时，会切换这一属性的值，再次运算body属性的值，文本的背景修改为下一个颜色。

图6-4：按钮视图

图6-4：按钮视图

✍️跟我一起做：创建一个多平台项目。使用示例6-10的代码更新ContentView视图。点击Change Color按钮。会看到文本背景色的变化（参见图6-4右图）。

如果希望将视图与控件执行的操作进行分离，可以将相关语句移到函数中。例如，可以上在ContentView结构体中添加一个函数，用于切换colorActive属性的值，然后在按钮的操作中调用这个函数。应用的功能的相同，但代码更有条理。

示例6-11：使用函数来组织代码

struct ContentView: View {
    @State private var colorActive: Bool = false
    
    var body: some View {
        VStack(spacing: 10) {
            Text("Default Title")
                .padding()
                .background(colorActive ? Color.green : Color.clear)
            Button("Change Color") {
                changeColor()
            }
            Spacer()
        }.padding()
    }
    
    func changeColor() {
        colorActive.toggle()
    }
}

如果按钮唯一的操作就是调用方法，可以简化视图的定义为声明action参数并指定所要执行操作的方法名。如下所示。

示例6-12：引用方法

Button("Change Color", action: changeColor)

声明方法名称带括号会马上执行方法，但仅声明名称会提供一个方法的引用供系统稍后执行。

✍️跟我一起做：使用示例6-11中的代码更新ContentView视图。应用功能和之前相同。使用示例6-12中的Button视图更新Button视图。点击按钮确定所执行的操作。

上例中，我们使用了三元运算符来根据colorActive属性的值选取background()修饰符的值。这是推荐的做法，这样SwiftUI可以识别视图并有效管理状态的转换，但我们也可以使用if else语句来响应修改。例如，有时会用按钮这类控件在界面中显示或隐藏视图。

示例6-13：在界面中添加及删除视图

struct ContentView: View {
    @State private var showInfo = false
    
    var body: some View {
        VStack(spacing: 10) {
            Button("Show Information") {
                showInfo.toggle()
            }.padding()
            if showInfo {
                Text("This is the information")
            }
            Spacer()
        }
    }
}

本例中的按钮切换@State属性showInfo的值。在按钮下方，可查看到该属性的当前值。若其值为true，显示 Text视图，否则什么也不显示。因此，在按下按钮时，showInfo的值发生改变，body属性的内容会重新绘制，Text视图根据showInfo的当前值出现或消失。

图6-5：动态界面

图6-5：动态界面

if else语句可用于选择是否执行按钮的操作，但SwiftUI提供了如下修饰符来在要做禁用操作时禁用按钮。

disabled(Bool)：这一修饰符决定该控件是否响应用户的交互。

下例使用了该修饰符在点击后禁用按钮，因此用户只能执行一次操作。

示例6-14：禁用按钮

struct ContentView: View {
    @State private var color = Color.clear
    @State private var buttonDisabled = false
    
    var body: some View {
        VStack(spacing: 10) {
            Text("Default Title")
                .padding()
                .background(color)
            Button("Change Color") {
                color = Color.green
                buttonDisabled = true
            }
            .disabled(buttonDisabled)
            Spacer()
        }.padding()
    }
}

这个视图包含两个@State属性，一个用于追踪颜色，另一个表示按钮是否处于禁用状态。在点击按钮时，操作中将true赋值给buttonDisabled属性，按钮就停止运作了，这样用户只能点一次。

图6-6：按钮禁用