美文网首页
Swift 笔记#2 - SwiftUI 基础控件 Button

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

作者: JSCON简时空 | 来源:发表于2020-03-29 10:52 被阅读0次

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

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

    视频版长度 14 分钟(内涵 5 小节),点击前往 观看视频


    以下是文字版

    1、两种方式创建按钮

    效果预览:

    s1

    关键代码:

    VStack {
        Button("第一个按钮"){
            print("被点击了")
        }.padding(.bottom, 20)
    
        Button(action: {
            print("再次被点击")
        }){
            Text("又一个按钮")
            .font(.title)
            .foregroundColor(Color.green)
        }
    }
    

    2、常用按钮样式

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

    效果预览:


    s2

    关键代码:

    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、渐变背景色

    效果预览:


    s2

    关键代码:

     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;
            })
                
        ...
                
    }
    
    

    相关文章

      网友评论

          本文标题:Swift 笔记#2 - SwiftUI 基础控件 Button

          本文链接:https://www.haomeiwen.com/subject/xruyuhtx.html