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教程與源碼