Button在SwiftUI中的使用

今天会说说每个app都会用到的视图Button，Button是用于创建交互式按钮的重要组件。Button使用户能够与应用程序进行交互，例如触发动作、导航到其他视图或执行特定操作

最为简单的Button使用方式

Button("标题") {
   // 事件
 }

只需要给定一个button的title，就可以显示一个button

你可以设置tint属性来改变颜色

我们增加一个Text，来完成一个任务，当我们点击按钮时，title的内容会变成，我点击了按钮 #1

首先，title的修饰符是一个let，用它修饰的属性值将无法在变更，所以我们必须要把let改成var，被var修饰的属性的值是可以变化的，var的英文是variable

其次，在swiftUI中有一个属性包装器 @State，它的作用是当被修饰的属性值发生变化时，使用它的地方都会接收到新的值。 本质就是一个KVO，将新值再次传递给观察者

所以最后title的部分就是下面这样

@State var title: String = "这是标题"

当我再次点击按钮，上面的文字就变成了 我点击了按钮 #1

基本用法就是上面这样，下面我们来绘制几个不同的按钮，大多都是我们平时项目用到的

按钮一

Button {
                title = "我点击了按钮 #2"
            } label: {
                Text("点我 #1")
                    .font(.headline)
                    .foregroundColor(Color.white)
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color.blue)
                    .cornerRadius(10)
            }

背景蓝色，带有圆角，屏幕等宽的按钮

按钮二

Button {
                title = "我点击了按钮 #3"
            } label: {
                Circle()
                    .fill(Color.white)
                    .frame(width: 60,height: 60)
                    .shadow(radius: 10)
                    .overlay(
                        Image(systemName: "heart.fill")
                            .font(.title)
                            .foregroundColor(Color.red)
                    )
            }

带有阴影的圆按钮，主要使用Overlay 叠加层来达成效果

按钮三

Button {
                
            } label: {
                Text("完成")
                    .foregroundColor(Color.gray)
                    .background(
                        Capsule()
                            .stroke(Color.gray, lineWidth: 2)
                            .frame(width: 100, height: 50)
                    )
            }

利用Capsule作为背景

按钮四

Button {
                title = "我点击了按钮 #5"
            } label: {
                Text("渐变色按钮")
                    .font(.subheadline)
                    .fontWeight(.semibold)
                    .foregroundColor(Color.black)
                    .padding()
                    .padding(.horizontal, 20)
                    .background(
                        LinearGradient(
                            colors: [Color.orange, Color.yellow],
                            startPoint: .leading, endPoint: .trailing
                        )
                    )
                    .cornerRadius(10)
            }

渐变色按钮

按钮五

Button {
                title = "我点击了按钮 #6"
            } label: {
                HStack {
                    Image(systemName: "play.fill")
                    Text("Play")
                }
                .foregroundColor(Color.white)
                .padding()
                .padding(.horizontal, 10)
                .background(Color.blue)
                .cornerRadius(10)
            }

iOS系统的播放按钮

以下是全部代码

struct ButtonSample: View {
    
    @State var title: String = "这是标题"
    
    var body: some View {
        VStack(spacing: 40) {
            Text(title)
                .font(.subheadline)
            
            Button("点我") {
                title = "我点击了按钮 #1"
            }
            .tint(Color.gray)
            
            Button {
                title = "我点击了按钮 #2"
            } label: {
                Text("点我 #2")
                    .font(.headline)
                    .foregroundColor(Color.white)
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color.blue)
                    .cornerRadius(10)
            }
            
            Button {
                title = "我点击了按钮 #3"
            } label: {
                Circle()
                    .fill(Color.white)
                    .frame(width: 60,height: 60)
                    .shadow(radius: 10)
                    .overlay(
                        Image(systemName: "heart.fill")
                            .font(.title)
                            .foregroundColor(Color.red)
                    )
            }
            
            Button {
                title = "我点击了按钮 #4"
            } label: {
                Text("完成")
                    .foregroundColor(Color.gray)
                    .background(
                        Capsule()
                            .stroke(Color.gray, lineWidth: 2)
                            .frame(width: 100, height: 50)
                    )
            }
            
            Button {
                title = "我点击了按钮 #5"
            } label: {
                Text("渐变色按钮")
                    .font(.subheadline)
                    .fontWeight(.semibold)
                    .foregroundColor(Color.black)
                    .padding()
                    .padding(.horizontal, 20)
                    .background(
                        LinearGradient(
                            colors: [Color.orange, Color.yellow],
                            startPoint: .leading, endPoint: .trailing
                        )
                    )
                    .cornerRadius(10)
            }
            
            Button {
                title = "我点击了按钮 #6"
            } label: {
                HStack {
                    Image(systemName: "play.fill")
                    Text("Play")
                }
                .foregroundColor(Color.white)
                .padding()
                .padding(.horizontal, 10)
                .background(Color.blue)
                .cornerRadius(10)
            }
        }
    }
}