Swift 筆記#2 - SwiftUI 基礎控件 Button 必知必會

本期學習 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、常用按鈕樣式

• 添加圖標
• 前景色
• 背景色
• 完美圓角

效果預覽：

關鍵代碼：

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

在公衆號內回覆 “ swift-note ”  即可獲取往期 "Swift筆記" 列表

最後 ， 如果你覺得這篇內容對你挺有啓發、有幫助， 可以幫我：

1. 點個「在看」，讓更多的人也能看到這篇內容。

2. 關注「JSCON簡時空」，第一時間接收原創、精選乾貨文章

本文分享自微信公衆號 - JSCON簡時空（iJSCON）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。