Button
oldbirds 12/5/2021 swiftiosswiftui
# Button
文档：https://developer.apple.com/documentation/swiftui/button (opens new window)
环境：Xcode 12.5.1，Swift5.4
# 概览
在触发时执行操作的控件。
Button(
action: {
// 点击事件
},
label: { Text("Click Me") }
)
如果按钮的标签只有 Text，则可以通过下面这种简单的方式进行初始化：
Button("Click Me") {
// 点击事件
}
您可以像这样给按钮添加属性：
Button(action: {
}, label: {
Image(systemName: "clock")
Text("Click Me")
Text("Subtitle")
})
.foregroundColor(Color.white)
.padding()
.background(Color.blue)
.cornerRadius(5)
为了更好的运用 Button，下面我们将一起来实现一些常见的效果：
- 如何创建一个简单的按钮并处理用户的选择？
- 如何自定义按钮的背景、填充和字体？
- 如何给按钮添加边框？
- 如何创建同时包含图像和文本的按钮？
- 如何创建具有渐变背景和阴影的按钮？
- 如何创建圆角按钮且添加外圆角边框？
# 如何创建一个简单的按钮并处理用户的选择？
使用 SwiftUI 创建按钮非常容易。基本上，您可以使用下面的代码片段来创建一个按钮：
struct CasePage: View {
@State var change = false;
var body: some View {
VStack {
Text(change ? "欢迎关注 OldBirds 公众号": "OldBirds")
.font(.title)
Button("welcome") {
self.change.toggle()
}.padding()
}
}
}
# 如何自定义按钮的背景、填充和字体？
Button(action: {
self.change.toggle()
}, label: {
Text("Hello World")
.padding()
.background(Color.purple)
.foregroundColor(.white)
.font(.title)
}).padding()
特别强调：modifier 的顺序非常重要，假设我们把 padding 移动，不在 background 的前面，效果是不一样的。
Button(action: {
self.change.toggle()
}, label: {
Text("Hello World")
.background(Color.purple)
.foregroundColor(.white)
.font(.title)
.padding()
}).padding()
# 如何给按钮添加边框？
Button(action: {
self.change.toggle()
}, label: {
Text("Hello World")
.padding()
.background(Color.purple)
.foregroundColor(.white)
.font(.title)
.border(Color.red, width: 5)
})
# 如何创建同时包含图像和文本的按钮？
Button(action: {
self.change.toggle()
}, label: {
HStack(content: {
Image(systemName: "trash")
Text("Hello World")
.foregroundColor(.black)
.font(.title)
})
.padding()
.background(Color.purple)
.border(Color.red, width: 5)
})
# 如何创建具有渐变背景和阴影的按钮？
Button(action: {
self.change.toggle()
}, label: {
HStack(content: {
Image(systemName: "trash")
.font(.title)
Text("Hello World")
.font(.title)
})
.padding()
.foregroundColor(.white)
.background(LinearGradient(gradient: Gradient(colors: [Color.green, Color.blue]), startPoint: .leading, endPoint: .trailing))
.cornerRadius(40)
})
# 如何创建圆角按钮且添加外圆角边框？
Button(action: {
self.change.toggle()
}, label: {
HStack(content: {
Image(systemName: "trash")
.font(.title)
Text("Hello World")
.font(.title)
})
.padding()
.foregroundColor(.white)
.background(LinearGradient(gradient: Gradient(colors: [Color.green, Color.blue]), startPoint: .leading, endPoint: .trailing))
// .border(Color.red, width: 5) // 不行
.cornerRadius(40)
.overlay(RoundedRectangle(cornerRadius: 40).stroke(Color.red, lineWidth: 5))
})
