【SwiftUI基础篇】5 表单控件之Button(按钮)的详细使用说明

按钮是一种触发时执行操作的控件。分为2个部分：视图与动作。SwiftUI里的按钮和普通视图使用方法是一样的。只是对其增加了特有的特性，按钮的action是一个方法或闭包属性，当用户单击或点击按钮时，它会做一些事情。标签是描述按钮操作的视图。

一、Button按钮的基本用法

Button 需要一个 action 和一个 label，前者的类型是 () -> Void，也就是点击会回调的函数，后者是个表示 Button 的样式的视图。

Button(action: {
    print("运行登陆验证")
}){
    Text("登录")
}

对于视图仅仅是文字的情况，Button提供另一个初始方法，可以在第一个参数里传入 String。

Button("登录", action: {
    print("做啥？")
})
//闭包简写如下
Button("登录"){
    print("你瞅啥？")
}
.contentShape(Rectangle())//可以扩大点击区域

在不同的系统平台触发按钮的方式不同:

1、在iOS和watchOS中，用户通过点击一个标准按钮来触发它。

2、在macOS中，用户通过单击来触发一个标准按钮。

3、在tvOS中，用户在专注于按钮的同时，按下外部遥控器上的“选择”按钮，比如Siri遥控器，就会触发一个标准按钮。

有的人还喜欢这样使用按钮：

//利用Label使用图片样式
Button(action: {
    print("Say something!")
}, label: {
   Label("你干哈？", systemImage:"arrowshape.turn.up.backward.circle.fill")
})

效果和第一种差不多，只是用法上的区别，可以根据自己的需要与喜欢的方式去使用。

上面都是打印信息，我们实际使用中一般都是触发某种操作，这里用代码简单的演示一下怎么点击显示/隐藏内容：

struct ContentView: View {
    @State private var showDetails = false//定义一个默认显示状态
    var body: some View {
        VStack(alignment: .leading) {
            Button( showDetails ? "隐藏简介" : "显示简介") {
                showDetails.toggle()
            }
            if showDetails {
                Text("你点击了显示简介按钮，这里可以使用样式对齐格式化。")
                    .font(.largeTitle)
            }
        }
    }
}

关于@State状态与数据流可以访问：http://www.55mx.com/ios/114.html 有非常详细的介绍！

 

二、利用buttonStyle 装饰按钮

ButtonStyle主要应用于整个APP中的标准按钮设计，自定义按钮样式可以方便统一修改与定义。使用ButtonStyle需要定义一个符合协议的新结构体，该结构将根据需要通过按钮的配置来执行操作。

//定义一个符合ButtonStyle协议的结构体用于用户按下时的样式设置
struct GrowingButton: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label//描述按下按钮的效果的视图。
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .clipShape(Capsule())
            //isPressed是一个布尔值，指示用户当前是否正在按下按钮
            .scaleEffect(configuration.isPressed ? 1.2 : 1)
            .animation(.easeOut(duration: 0.2))//动画
    }
}

然后我们在按钮上就可以这样使用了：

Button("你点我试试？") {
    print("这是按钮触发的操作~")
}
.buttonStyle(GrowingButton())//将上面的按钮样式给安排上

除了我们上面自己定义的GrowingButton外，系统还内置了几种buttonStyle：

1、PlainButtonStyle 普通按钮样式按钮样式在空闲时不会设置样式或修饰其内容，但可以应用视觉效果来指示按钮的按下，聚焦或启用状态。

2、BorderlessButtonStyle 不应用边框的按钮样式。

3、PrimitiveButtonStyle 原始按钮样式，将自定义交互行为和自定义外观应用于视图层次结构中的所有按钮(上面自定义的就是这种)。

当然还有其它的，可以看文档查看，注意适合的平台，上面列出的几种是多平台通用的。部分样式只适用于TVOS或者MACOS等。

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/119