SwiftUI极简教程08: Button按钮的使用

一起养成写作习气！这是我参加「日新计划 4 月更文应战」的第8天，点击检查活动概况。

前语：念念不忘，必有回响。一件作业只要坚持下来，终有一天会开出花来，我是如此相信着。写作是一件单调的作业，但也是能在这个世上留下痕迹的作业，敲击的每一个字都蕴含着饱满的心情，感染着阅读它的每一个人。

今天职言：即便没有要办的作业，也要偶尔去拜访他人。

在本章中，你将学会怎么运用Button按钮这个根本的控件，并了解各种按钮及其运用场景。

由于Button组件在不同场景下的应用不同，本章节分红3个部分解说。

1、简略文字按钮；

2、简略图片按钮；

3、图片+文字按钮；

第一部分

首要，我们先创建一个新项目，命名为SwiftUIButton。

在此，我们得到了根底的视图。

SwiftUI中，创建按钮的代码很简略，代码示例：

//创建按钮
Button(action: {
 // 操作
}) {
 // 按钮样式
}

在第一个注释方位的内容是：点击了按钮后，系统实行什么操作；

在第二个注释方位的内容是：按钮的样式。

请注意，按钮的样式不是给按钮加修饰符，而是这个“按钮”是什么。

举个比方：

Button(action: {
 // 操作
 print("登录成功")
}) {
 // 按钮样式
 Text(“微信登录")
 }

这个按钮是“文字按钮”，点击文字按钮“微信登录”，输出“登录成功”。

也就是说，Button按钮的本质是把其他东西变成按钮，点击或许操作后，系统实行什么动作。

最常用的，点击头像图片Image，系统引发弹窗，问询我们是要选择相册仍是相机。

下面，我们试试结束下面的规划稿：

假设除开按钮本身的代码，规划稿里就是两个Text。

我们在Button的样式区域写一个Text，然后再给Text补偿修饰符修饰。

修饰符	称号	描绘
.font()	字体	.font(.system(size: 14))，字号14
.frame()	尺度	.frame(minWidth: 0, maxWidth: .infinity)，最大宽度为自适应屏幕宽度
.padding()	边距	在按钮外面撑开一块“面积”，.padding()，上下左右都留边距
.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)
}
}
}

假设本专栏对你有协助，欢迎点赞、谈论、注重～