你点击的是按钮,我提供的是服务
本文您将能学到
8种酷炫效果
- 最简单的文本按钮
- 自定义文本按钮
- 颜色背景按钮
- 边框按钮
- 使用图标的按钮
- 图片按钮
- 带形状的图片按钮
- 漂浮的按钮
3种高级用法
- Button Style protocol的高级使用
- Button styles and environment的高级使用
- PrimitiveButtonStyle protocol的高级使用
最终效果
按钮是 程序与用户的纽带,程序通过用户点击不同的按钮来提供相应的服务。因此,按钮的使用是程序开发基础。本文将给通过介绍按钮使用的4种不同境界,来带领大家了解并掌握按钮的使用。
8种酷炫效果
Button 是一个pull-in视图,按钮既可以是简单文本、一张照片图像或者是更负责的视图组合。接下来让我们一起来看看格式各样的按钮吧!
1、最简单的文本按钮
Button(action:{
print("最简单文本按钮")
}){
Text("最简单文本按钮")
}.padding()
2、自定义文本按钮
Button(action:{
print("自定义文本按钮")
}){
Text("自定义文本按钮")
.font(.largeTitle)
.foregroundColor(.orange)
}.padding()
3、 颜色背景按钮
Button(action:{
print("颜色背景的按钮")
}){
Text("颜色背景的按钮")
.padding()
.foregroundColor(.white)
.background(Color.purple)
.cornerRadius(8)
}.padding()
4、 边框按钮
Button(action:{
print("边框的按钮")
}){
Text("边框的按钮")
.padding()
.border(Color.orange)
.cornerRadius(10)
}.padding()
Button(action:{
print("边框的按钮2")
}){
Text("边框的按钮2")
.padding()
.background(RoundedRectangle(cornerRadius: 10)
.stroke(Color.green,lineWidth: 2)
)
}.padding()
5、使用图标的按钮