在本章中,你将学会如何使用Button按钮这个基本的控件,并了解各种按钮及其使用场景。
由于Button组件在不同场景下的应用不同,本章节分成3个部分讲解。
1、简单文字按钮;
2、简单图片按钮;
3、图片+文字按钮;
第一部分
在此,我们得到了基础的视图。
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) } } }