Swift 笔记#2 - SwiftUI 基础控件 Button 必知必会

JSCON简时空

发布于 2020-03-31 15:07:00

1.6K0

发布于 2020-03-31 15:07:00

文章被收录于专栏：JSCON简时空 JSCON简时空JSCON简时空

本期学习 SwiftUI 基础控件 Button 的使用，内容基本涵盖了 Button 高频的使用场景；通过本节课你将收获：

常规创建 button 的两种方式
给按钮设置图标、设置圆角；更改 前景色 、背景色
给按钮设置 渐变背景色、阴影效果
复用按钮样式，给按钮添加动效
简单交互实现

视频版长度 14 分钟（内涵 5 小节）

视频讲解

https://v.qq.com/x/page/b0941lzemwb.html

文字讲解

1、两种方式创建按钮

效果预览：

关键代码：

VStack {
    Button("第一个按钮"){
        print("被点击了")
    }.padding(.bottom, 20)

    Button(action: {
        print("再次被点击")
    }){
        Text("又一个按钮")
        .font(.title)
        .foregroundColor(Color.green)
    }
}

2、常用按钮样式

添加图标
前景色
背景色
完美圆角

效果预览：

关键代码：

VStack {
            Button(action: {
                print("被点击了呃")
            }){
                Image(systemName: "play.rectangle")
                Text("这是 Button");
            
            }
            .font(.title)
            .padding()
            .background(Color.orange)
            .foregroundColor(Color.white)
            .cornerRadius(50).padding(10)
            .overlay(
                RoundedRectangle(cornerRadius: 50).stroke(Color.orange, lineWidth: 5)
            )

3、渐变背景色

效果预览：

关键代码：

 Button(action: {
                print("又被点击了呃")
            }){
                Text("Hi~ 这是另一个 Button");
            }
            .font(.title)
            .padding()
            .background(LinearGradient(gradient: Gradient(colors: [Color("LightGreen"), Color("DarkGreen")]), startPoint: .leading, endPoint: .trailing))
            .foregroundColor(Color.white)
            .cornerRadius(50).padding(10)
        }

4、通栏按钮 + 阴影

效果预览：

长款按钮 + 阴影

关键代码：

Button(action: {
        print("被点击了呃")
    }){
        Text("Hi~这是另一个 Button")
    }
    .font(.title)
    .padding()
    .frame(minWidth: 0, maxWidth: .infinity)
    .background(LinearGradient(gradient: Gradient(colors: [Color("LightGreen"), Color("DarkGreen")]), startPoint: .leading, endPoint: .trailing))
    .foregroundColor(Color.white)
    .cornerRadius(50)
    .padding(.all, 10)
    .shadow(color: Color("DarkGreen"), radius: 5)

5、样式复用

分别实现 ButtonStyle 协议：

struct GradientButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
        .font(.title)
        .padding()
        .frame(minWidth: 0, maxWidth: .infinity)
        .background(LinearGradient(gradient: Gradient(colors: [Color("LightGreen"), Color("DarkGreen")]), startPoint: .leading, endPoint: .trailing))
        .foregroundColor(Color.white)
        .cornerRadius(50)
        .padding(.horizontal, 10)
        .shadow(color:Color("DarkGreen"), radius: 5)
        .scaleEffect(configuration.isPressed ? 0.9 : 1)
    }
}

struct BorderButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.title)
        .padding()
        .background(Color.orange)
        .foregroundColor(Color.white)
        .cornerRadius(50)
        .padding(.all, 10)
        .overlay(
        RoundedRectangle(cornerRadius: 50).stroke(Color.orange, lineWidth: 5)
        )
    }
}

分别装饰：

VStack {
    Button(action: {
        print("被点击了呃")
    }){
        HStack{
            Image(systemName: "play.rectangle")
            Text("这是 Button")
        }
    }.buttonStyle(BorderButtonStyle())

    Button(action: {
        print("被点击了呃")
    }){
        Text("Hi~这是另一个 Button")
    }.buttonStyle(GradientButtonStyle())

}

6、点击更改状态

效果预览：

关键代码：

struct ContentView: View {
    @State var clickedCount: Int = 0;
    
    ...
            
        Text("点击次数：\(clickedCount)");
        Button(action: {
            print("被点击了呃")
            self.clickedCount = self.clickedCount + 1;
        })
            
    ...
            
}

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-03-29，如有侵权请联系 cloudcommunity@tencent.com 删除

button