Get into the habit of writing together! This is the 8th day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .
Preface: If you never forget, there will be echoes. As long as one thing persists, it will bloom one day, I believe so. Writing is a boring thing, but it is also something that can leave traces in this world. Every word you tap contains full of emotions, infecting everyone who reads it.
Today's job statement: Even if there is nothing to do, occasionally visit others.
In this chapter, you will learn how to use the Button button, a basic control, and understand the various buttons and their usage scenarios.
Due to the different applications of the Button component in different scenarios, this chapter is divided into three parts.
1. Simple text button;
2. Simple picture button;
3. Picture + text button;
first part
First, let's create a new project and name it SwiftUIButton.
Here, we get the basic view.
In SwiftUI, the code to create a button is very simple, code example:
//创建按钮
Button(action: {
// 操作
}) {
// 按钮样式
}
复制代码The content in the first comment position is: what operation does the system perform after the button is clicked;
The content in the second comment position is: the style of the button.
Note that the styling of the button is not about adding modifiers to the button, but what this "button" is.
for example:
Button(action: {
// 操作
print("登录成功")
}) {
// 按钮样式
Text(“微信登录")
}
复制代码This button is a "text button", click the text button "WeChat login", and output "login successful".
That is to say, the essence of the Button button is to turn other things into buttons, and what action the system performs after clicking or operating.
The most commonly used, click on the avatar image Image, the system evokes a pop-up window, asking us whether we want to choose an album or a camera.
Now, let's try to complete the following design draft:
If the code of the button itself is removed, there are two Texts in the design draft.
We write a Text in the style area of the Button, and then add modifiers to the Text.
| modifier | name | describe |
|---|---|---|
| .font() | font | .font(.system(size: 14)), font size 14 |
| .frame() | size | .frame(minWidth: 0, maxWidth: .infinity), the maximum width is adaptive screen width |
| .padding() | margin | Open an "area" outside the button, .padding(), and leave margins up, down, left, and right |
| .foregroundColor() | 字体颜色 | .foregroundColor(.white)，文字颜色为白色 |
| .background() | 背景 | .background(Color(red: 88 / 255, green: 224 / 255, blue: 133 / 255))，设置背景颜色 |
| .cornerRadius() | 圆角 | .cornerRadius(5)，圆角角度为5 |
| .padding() | 边距 | .padding(.horizontal, 20)，横向的方向，左右撑开边距为20，上下不留边距 |
//微信登录
Button(action: {
// 操作
print("登录成功")
}) {
// 按钮样式
Text("微信登录")
.font(.system(size: 14))
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(.white)
.background(Color(red: 88 / 255, green: 224 / 255, blue: 133 / 255))
.cornerRadius(5)
.padding(.horizontal, 20)
}
复制代码UI稿中，有2个按钮，颜色和里面的文字不一样。
我们可以用VStack、代码分组、代码复用的方式完成这块内容。
首先，先用VStack把主视图中的按钮整个包裹住。
再把VStack里的整个Button抽离出来，变成一个子视图。
别忘了，给抽离出来的子视图重命名。
我们尝试命名为buttonView。
接下来，我们看看UI稿。
先看看不同的部分，Text里面的文字，Button的背景颜色。
那么我们可以定义这两个变量，然后把代码块中的常量替换成变量。
//按钮
struct buttonView: View {
//定义变量
var title: String
var bgColor: Color
var body: some View {
Button(action: {
// 操作
print("登录成功")
}) {
// 按钮样式
Text(title)
.font(.system(size: 14))
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(.white)
.background(bgColor)
.cornerRadius(5)
.padding(.horizontal, 20)
}
}
}
复制代码在主视图中我们看到的报错信息。
点击小红点，可以看到需要补充引用的buttonView子视图的变量。
补充变量后，我们给变量赋值。
赋值后，在主视图我们可以看到已经完成的第一个按钮的效果。
struct ContentView: View {
var body: some View {
VStack {
buttonView(title: "微信登录", bgColor: Color(red: 88 / 255, green: 224 / 255, blue: 133 / 255))
}
}
}
复制代码同理，我们再复制引用的buttonView子视图，并更改它的背景颜色。
struct ContentView: View {
var body: some View {
VStack {
buttonView(title: "微信登录", bgColor: Color(red: 88 / 255, green: 224 / 255, blue: 133 / 255))
buttonView(title: "Apple登录", bgColor: Color(red: 51 / 255, green: 51 / 255, blue: 51 / 255))
}
}
}
复制代码对比UI稿，我们发现两个Button之间的距离有点挤。
由于“微信登录”和“Apple登录”的按钮是在一个VStack，那么我们只需要在VStack设置间隔就行了。
这时，我们会引用VStack的修饰符。
struct ContentView: View {
var body: some View {
VStack (alignment: .center, spacing: 15) {
buttonView(title: "微信登录", bgColor: Color(red: 88 / 255, green: 224 / 255, blue: 133 / 255))
buttonView(title: "Apple登录", bgColor: Color(red: 51 / 255, green: 51 / 255, blue: 51 / 255))
}
}
}
复制代码至此，我们就完成了简单按钮的编程。
第二部分
下面，我们完成下图片按钮的编程。
UI稿中，我们可以看到在App登录页面常常用到图标按钮，点击图标唤起第三方登录。
抛开按钮的代码来讲，UI稿中的样式就是图片。
横向分布的3个图片，样式基本一致。
我们先在Assets文件中导入本地的图片。
然后我们新建一个SwiftUI页面。
点击顶部导航栏，选择File，选择New，选择File。
在新建文件类型中，我们选择ios类型，选择创建一个SwiftUI View。
并给这个SwiftUI View命名为SwiftUIIconView，保存就好了。
那么，我们和上面的流程一样。
先写一个图标按钮的样式，再美化样式，再抽离出子视图，再用变量定义。
第一步，创建Button代码，并在样式部分使用Image。
//图标按钮
struct SwiftUIIconView: View {
var body: some View {
Button(action: {
// 操作
}) {
// 按钮样式
Image("weixin")
.resizable()
.frame(minWidth: 0, maxWidth: 32, minHeight: 0, maxHeight: 32)
.padding()
.background(Color(red: 246 / 255, green: 246 / 255, blue: 246 / 255))
.clipShape(Circle())
}
}
}
复制代码还是来解释一下代码的内容。
| 修饰符 | 名称 | 描述 |
|---|---|---|
| .resizable() | 缩放 | 使得图片可以缩放，从而可以改变大小 |
| .frame() | 设置尺寸 | minWidth: 0, maxWidth: 32, minHeight: 0, maxHeight: 3，最小宽高为0，最大宽高均为32 |
| .padding() | 间距 | 撑开外边一部分 |
| .background() | 背景 | .background(Color(red: 246 / 255, green: 246 / 255, blue: 246 / 255))，设置背景颜色 |
| .clipShape() | 切割 | .clipShape(Circle())，将View切割成圆形 |
下一步，由于3个图标按钮是横向排布的。
那么我们需要将图标按钮先行放在一个HStack中。
下一步，将Button视图抽离出来，变成一个子视图。
下一步，给子视图重命名。
这里，我们命名为iconBtnView。
我们就得到了图标按钮的子视图啦！
struct iconBtnView: View {
var body: some View {
Button(action: {
// 操作
}) {
// 按钮样式
Image(“weixin")
.resizable()
.frame(minWidth: 0, maxWidth: 32, minHeight: 0, maxHeight: 32)
.padding()
.background(Color(red: 246 / 255, green: 246 / 255, blue: 246 / 255))
.clipShape(Circle())
}
}
}
复制代码下一步，我们先定义好变量（除了图片不一样，其他都一样，那么变量为image，把复用的部分，用变量代替。
//图标按钮
struct iconBtnView: View {
//定义变量
var image: String
var body: some View {
Button(action: {
// 操作
}) {
// 按钮样式
Image(image)
.resizable()
.frame(minWidth: 0, maxWidth: 32, minHeight: 0, maxHeight: 32)
.padding()
.background(Color(red: 246 / 255, green: 246 / 255, blue: 246 / 255))
.clipShape(Circle())
}
}
}
复制代码下一步，在SwiftUIIconView主视图中，根据系统提示补充好变量，并给变量赋值。
最后，我们调节下间隔距离，就大功告成了！
//主视图
struct SwiftUIIconView: View {
var body: some View {
HStack(spacing: 40) {
iconBtnView(image: "weixin")
iconBtnView(image: "qq")
iconBtnView(image: "weibo")
}
}
}
复制代码第三部分
学会了简单的文字按钮、图片按钮，我们将两者相结合，很简单就可以完成一个文字加图片的按钮。
我们再新建一个SwiftUI View文件，命名为TextImageBtnView，当然你可以随便命名。
这一部分就当作作业吧。
用第一部分和第二部分所学相结合，完成下面的编程吧！
代码先放这里了。
//图片文字按钮
struct TextImageBtnView: View {
var body: some View {
Button(action: {
print("登录成功")
}) {
HStack {
Image(systemName: "applelogo")
.font(.title)
Text("Apple登录")
.fontWeight(.semibold)
.font(.title)
}
.padding()
.frame(minWidth: 0, maxWidth: .infinity)
.foregroundColor(.white)
.background(Color(red: 51 / 255, green: 51 / 255, blue: 51 / 255))
.cornerRadius(40)
.padding(.horizontal, 20)
}
}
}
复制代码如果本专栏对你有帮助，欢迎点赞、评论、关注～