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

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

在本章中,你将学会如何使用Button按钮这个基本的控件,并了解各种按钮及其使用场景。


由于Button组件在不同场景下的应用不同,本章节分成3个部分讲解。


1、简单文字按钮;

2、简单图片按钮;

3、图片+文字按钮;


第一部分


image.png

在此,我们得到了基础的视图。

image.png

SwiftUI中,创建按钮的代码很简单,代码示例:


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


在第一个注释位置的内容是:点击了按钮后,系统执行什么操作;

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

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

举个例子:


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


image.png

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

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

最常用的,点击头像图片Image,系统唤起弹窗,询问我们是要选择相册还是相机。

下面,我们试试完成下面的设计稿:

image.png

如果除开按钮本身的代码,设计稿里就是两个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)
}
复制代码


image.png

UI稿中,有2个按钮,颜色和里面的文字不一样。

我们可以用VStack、代码分组、代码复用的方式完成这块内容。

image.png

首先,先用VStack把主视图中的按钮整个包裹住。

image.png

再把VStack里的整个Button抽离出来,变成一个子视图。

image.png


别忘了,给抽离出来的子视图重命名。

我们尝试命名为buttonView。

image.png

image.png

接下来,我们看看UI稿。

先看看不同的部分,Text里面的文字,Button的背景颜色。

那么我们可以定义这两个变量,然后把代码块中的常量替换成变量。

image.png

//按钮
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)
        }
    }
}

image.png

在主视图中我们看到的报错信息。

点击小红点,可以看到需要补充引用的buttonView子视图的变量。

补充变量后,我们给变量赋值。

image.png

赋值后,在主视图我们可以看到已经完成的第一个按钮的效果。

struct ContentView: View {
    var body: some View {
        VStack {
            buttonView(title: "微信登录", bgColor: Color(red: 88 / 255, green: 224 / 255, blue: 133 / 255))
        }
    }
}

image.png

同理,我们再复制引用的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))
        }
    }
}


image.png

对比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))
        }
    }
}

image.png

至此,我们就完成了简单按钮的编程。

第二部分


下面,我们完成下图片按钮的编程。

UI稿中,我们可以看到在App登录页面常常用到图标按钮,点击图标唤起第三方登录。

image.png

抛开按钮的代码来讲,UI稿中的样式就是图片。

横向分布的3个图片,样式基本一致。

我们先在Assets文件中导入本地的图片。

image.png

然后我们新建一个SwiftUI页面。

点击顶部导航栏,选择File,选择New,选择File。

image.png

在新建文件类型中,我们选择ios类型,选择创建一个SwiftUI View。

并给这个SwiftUI View命名为SwiftUIIconView,保存就好了。

image.png

那么,我们和上面的流程一样。

先写一个图标按钮的样式,再美化样式,再抽离出子视图,再用变量定义。

第一步,创建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())
        }
    }
}

image.png

还是来解释一下代码的内容。


修饰符 名称 描述
.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中。

image.png

下一步,将Button视图抽离出来,变成一个子视图。

image.png

下一步,给子视图重命名。

这里,我们命名为iconBtnView。

image.png


我们就得到了图标按钮的子视图啦!

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.png

下一步,我们先定义好变量(除了图片不一样,其他都一样,那么变量为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())
        }
    }
}

image.png

下一步,在SwiftUIIconView主视图中,根据系统提示补充好变量,并给变量赋值。

image.png

最后,我们调节下间隔距离,就大功告成了!


//主视图
struct SwiftUIIconView: View {
    var body: some View {
        HStack(spacing: 40) {
            iconBtnView(image: "weixin")
            iconBtnView(image: "qq")
            iconBtnView(image: "weibo")
        }
    }
}


image.png

第三部分


学会了简单的文字按钮、图片按钮,我们将两者相结合,很简单就可以完成一个文字加图片的按钮。

我们再新建一个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)
        }
    }
}


image.png


相关文章
|
3月前
【Qt 学习笔记】Qt常用控件 | 按钮类控件 | Radio Button的使用及说明
【Qt 学习笔记】Qt常用控件 | 按钮类控件 | Radio Button的使用及说明
533 1
|
6月前
|
Shell Python
Tkinter:功能按钮Button
Tkinter:功能按钮Button
|
6月前
|
Python
tkinter之Button按钮
tkinter之Button按钮
49 1
|
Python
【tkinter学习笔记 - 3】:Radiobutton单选按钮、Checkbutton复选按钮
【tkinter学习笔记 - 3】:Radiobutton单选按钮、Checkbutton复选按钮
193 0
【tkinter学习笔记 - 3】:Radiobutton单选按钮、Checkbutton复选按钮
SwiftUI极简教程28:TextEditor多行文本框的使用
SwiftUI极简教程28:TextEditor多行文本框的使用
1181 0
SwiftUI极简教程28:TextEditor多行文本框的使用
|
存储
SwiftUI极简教程40:构建SearchBar搜索栏和TabView底部导航
在本章中,你将学会构建Search搜索进行列表搜索和TabView底部导航。 在上一章节中,我们完成了一个简单的ColourAtla色卡App,接下来我们继续完善App的相关内容。
756 0
SwiftUI极简教程40:构建SearchBar搜索栏和TabView底部导航
html+css实战37-按钮button
html+css实战37-按钮button
102 0
html+css实战37-按钮button
SwiftUI极简教程23:创建一个简单的SearchBar搜索栏
SwiftUI极简教程23:创建一个简单的SearchBar搜索栏
670 0
SwiftUI极简教程23:创建一个简单的SearchBar搜索栏