本期學習 SwiftUI 基礎控件 Button 的使用,內容基本涵蓋了 Button 高頻的使用場景;通過本節課你將收穫:
-
常規創建 button 的 兩種 方式 -
給按鈕設置 圖標、設置 圓角;更改 前景色 、 背景色 -
給按鈕設置 漸變背景色、 陰影 效果 -
複用按鈕樣式,給按鈕添加 動效 -
簡單 交互 實現
視頻版長度 14 分鐘(內涵 5 小節)
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;
})
...
}
點個「在看」,讓更多的人也能看到這篇內容。
關注「JSCON簡時空」,第一時間接收原創、精選乾貨文章
本文分享自微信公衆號 - JSCON簡時空(iJSCON)。
如有侵權,請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。