前言
在本章节中，我们将学会如何使用Button按钮这个基本控件
由于Button组件在不同场景下应用不同，我们分成3个部分
创建按钮
swiftUI中创建按钮代码很简单，代码如下：
1
2
3
4
5
| Button { // 操作
} label: { // 按钮样式
}
|
- 第一个注释：点击了按钮后，系统执行什么操作
- 第二个注释：按钮的样式，这个按钮是什么
举个例子：
1
2
3
4
5
6
7
8
9
10
11
| struct ContentView: View {
var body: some View {
Button { // 操作
print("登录成功")
} label: { // 按钮样式
Text("微信登录")
}
}
}
|
Text常用方法
- .frame：尺寸，
.infinity 自适应屏幕宽高
- .padding：边距，在按钮外面撑开一块面积，上下左右都留边距
效果图如下
思路：创建 Button 按钮，并将其 提取 成子视图，插入到 垂直分布中
简单文字按钮
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| // 按钮视图
struct ButtonView: View {
// 定义变量
var title:String?
var bgColor:Color?
var body: some View {
Button { // 操作
print("\(title!)成功")
} label: { // 按钮样式
Text(title!)
.frame(minWidth: 0,maxWidth: .infinity,minHeight: 0,maxHeight: 40)
.background(bgColor)
.font(.system(size: 14))
.foregroundColor(.white)
.cornerRadius(5)
.padding(.horizontal,50) // 水平居中，左右边距50
}
}
}
|
简单图片按钮
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| // 图片按钮
struct ImgButton: View {
var body: some View {
Button {
print("登录成功")
} label: {
Image("wechat")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(minWidth: 0,maxWidth: 50,minHeight: 0,maxHeight: 50)
}
}
}
|
图片+文字按钮
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| // 图片文字按钮
struct ImgTextButton: View {
var body: some View {
Button {
print("登录成功")
} label: {
HStack {
Image(systemName: "applelogo")
.font(.title)
Text("Apple登录")
.fontWeight(.semibold)
.font(.title)
}
.frame(minWidth: 0,maxWidth: .infinity,minHeight: 0,maxHeight: 70)
.background(Color(red: 51/255, green: 51/255, blue: 51/255))
.foregroundColor(.white)
.cornerRadius(40)
.padding(.horizontal,20)
}
}
}
|
最后呈现的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| struct ContentView: View {
var body: some View {
VStack {
// 微信登录
ButtonView(title: "微信登录",bgColor: .green)
// Apple登录
ButtonView(title: "Apple登录",bgColor: .black)
// 图片按钮
ImgButton()
// 图片+文字按钮
ImgTextButton()
}
}
}
|
