¡Acostúmbrate a escribir juntos! Este es el octavo día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento .
Prefacio: Si nunca olvidas, habrá ecos. Mientras una cosa persista, florecerá algún día, creo que sí. Escribir es una cosa aburrida, pero también es algo que puede dejar huellas en este mundo, cada palabra que toques está llena de emociones, contagiando a todo el que la lee.
Declaración de trabajo de hoy: incluso si no hay nada que hacer, de vez en cuando visita a otros.
En este capítulo, aprenderá a usar el botón Botón, un control básico, y comprenderá los diversos botones y sus escenarios de uso.
Debido a las diferentes aplicaciones del componente Botón en diferentes escenarios, este capítulo se divide en tres partes.
1. Botón de texto simple;
2. Botón de imagen simple;
3. Imagen + botón de texto;
primera parte
Primero, creemos un nuevo proyecto y asígnele el nombre SwiftUIButton.
Aquí tenemos la vista básica.
En SwiftUI, el código para crear un botón es muy simple, ejemplo de código:
//创建按钮
Button(action: {
// 操作
}) {
// 按钮样式
}
复制代码El contenido en la primera posición de comentario es: qué operación realiza el sistema después de hacer clic en el botón;
El contenido en la segunda posición del comentario es: el estilo del botón.
Tenga en cuenta que el estilo del botón no se trata de agregar modificadores al botón, sino de lo que es este "botón".
por ejemplo:
Button(action: {
// 操作
print("登录成功")
}) {
// 按钮样式
Text(“微信登录")
}
复制代码Este botón es un "botón de texto", haga clic en el botón de texto "Inicio de sesión de WeChat" y genere "inicio de sesión exitoso".
Es decir, la esencia del botón Botón es convertir otras cosas en botones, y qué acción realiza el sistema después de hacer clic u operar.
La más utilizada, hacer clic en la imagen del avatar Imagen, el sistema evoca una ventana emergente, preguntándonos si queremos elegir un álbum o una cámara.
Ahora, intentemos completar el siguiente borrador de diseño:
Si se elimina el código del botón en sí, hay dos Textos en el borrador del diseño.
Escribimos un Texto en el área de estilo del Botón, y luego agregamos modificadores al Texto.
| modificador | nombre | describir |
|---|---|---|
| .fuente() | fuente | .font(.system(tamaño: 14)), tamaño de fuente 14 |
| .marco() | Talla | .frame(minWidth: 0, maxWidth: .infinity), el ancho máximo es ancho de pantalla adaptativo |
| .relleno() | margen | Abra un "área" fuera del botón, .padding(), y deje márgenes arriba, abajo, izquierda y derecha |
| .color de primer plano() | 字体颜色 | .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)
}
}
}
复制代码如果本专栏对你有帮助，欢迎点赞、评论、关注～