SwiftUI 控件之Button 按钮初级和高级实用（2020版教程）

Button是一个非常基本的UI控件，您可以在所有应用中找到该控件。如果您以前学习过iOS编程，则SwiftUI中的Button与UIKit中的UIButton非常相似。它更加灵活和可定制。本文将给您介绍一下几个方面的内容：

• 如何创建一个简单的按钮并处理用户的选择
• 如何自定义按钮的背景，填充和字体
• 如何在按钮上添加边框
• 如何同时创建带有图像和文本的按钮
• 如何创建带有渐变背景和阴影的按钮
• 如何创建全角按钮

代码

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button(action:{
            print("touch")
        }){
            
            Text("Hello World")
                .fontWeight(.bold)
                .font(.title)
                .padding()
                .background(Color.purple)
                .cornerRadius(40)
                .foregroundColor(.white)
                .padding(10)
                .overlay(
                    RoundedRectangle(cornerRadius: 40)
                        .stroke(Color.purple, lineWidth: 5)
            )
            
        }
    }
}

效果

SwiftUI 控件之Button

设置图片按钮

Button(action: {
    print("Delete tapped!")
}) {
    HStack {
        Image(systemName: "trash")
            .font(.title)
        Text("Delete")
            .fontWeight(.semibold)
            .font(.title)
    }
    .padding()
    .foregroundColor(.white)
    .background(Color.red)
    .cornerRadius(40)
}

效果

Button 图片效果有圆角

设置渐变效果

import SwiftUI

struct ContentView: View {
    var body: some View {
      Button(action: {
          print("Delete tapped!")
      }) {
          HStack {
              Image(systemName: "trash")
                  .font(.title)
              Text("Delete")
                  .fontWeight(.semibold)
                  .font(.title)
          }
          .padding()
          .foregroundColor(.white)
          //.background(Color.red)
            .background(LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing))
          .cornerRadius(40)
      }
    }
}

SwiftUI Button 设置渐变效果

SwiftUI 自定义颜色集

通过16进制设置颜色

SwiftUI 自定义颜色集 Color Set

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button(action: {
            print("Delete tapped!")
        }) {
            HStack {
                Image(systemName: "trash")
                    .font(.title)
                Text("Delete")
                    .fontWeight(.semibold)
                    .font(.title)
            }
            .padding()
            .foregroundColor(.white)
                //.background(Color.red)
                .background(LinearGradient(gradient: Gradient(colors: [Color("DarkGreen"), Color("LightGreen")]), startPoint: .leading, endPoint: .trailing))
                .cornerRadius(40)
        }
    }
}

SwiftUI 自定义颜色集

SwiftUI 设置控件铺满整个屏幕

import SwiftUI

struct ContentView: View {
    var body: some View {
       Button(action: {
           print("Delete tapped!")
       }) {
           HStack {
               Image(systemName: "trash")
                   .font(.title)
               Text("Delete")
                   .fontWeight(.semibold)
                   .font(.title)
           }
           .frame(minWidth: 0, maxWidth: .infinity)
           .padding()
           .foregroundColor(.white)
           .background(LinearGradient(gradient: Gradient(colors: [Color("DarkGreen"), Color("LightGreen")]), startPoint: .leading, endPoint: .trailing))
           .cornerRadius(40)
       }
    }
}

SwiftUI 设置控件铺满整个屏幕

参考文献

• 渐变效果生成网站 https://uigradients.com/#Horizon

• https://www.appcoda.com/author/admin/

• https://www.appcoda.com/swiftui-buttons/

更多SwiftUI教程和代码关注专栏

• 请关注我的专栏 SwiftUI教程与源码