함께 쓰는 습관을 들이세요! "너겟 데일리 뉴플랜 · 4월 업데이트 챌린지" 참여 8일차입니다. 클릭하시면 이벤트 내용을 보실 수 있습니다 .
머리말: 잊지 않으면 메아리가 있을 것입니다. 한 가지가 지속되면 언젠가는 피어날 거라 믿습니다. 글쓰기는 지루하지만 이 세상에 흔적을 남길 수 있는 일이기도 하고, 두드리는 단어 하나하나에 감동이 담겨 읽는 모든 사람을 감염시킨다.
오늘의 직무설명 : 할 일이 없어도 가끔 방문한다.
이 장에서는 기본 컨트롤인 버튼 버튼을 사용하는 방법을 배우고 다양한 버튼과 사용 시나리오를 이해합니다.
다양한 시나리오에서 Button 구성 요소의 다른 응용 프로그램으로 인해 이 장은 세 부분으로 나뉩니다.
1. 간단한 텍스트 버튼;
2. 간단한 사진 버튼;
3. 그림 + 텍스트 버튼;
첫 번째 부분
먼저 새 프로젝트를 만들고 이름을 SwiftUIButton으로 지정하겠습니다.
여기에서 기본 보기를 얻습니다.
SwiftUI에서 버튼을 생성하는 코드는 매우 간단합니다. 코드 예:
//创建按钮
Button(action: {
// 操作
}) {
// 按钮样式
}
复制代码첫 번째 주석 위치의 내용은 다음과 같습니다. 버튼을 클릭한 후 시스템은 어떤 작업을 수행합니까?
두 번째 주석 위치의 내용은 버튼의 스타일입니다.
버튼의 스타일은 버튼에 수정자를 추가하는 것이 아니라 이 "버튼"이 무엇인지에 관한 것입니다.
예를 들어:
Button(action: {
// 操作
print("登录成功")
}) {
// 按钮样式
Text(“微信登录")
}
复制代码이 버튼은 "텍스트 버튼"이고 "WeChat 로그인" 텍스트 버튼을 클릭하면 "로그인 성공"이 출력됩니다.
즉, 버튼 버튼의 본질은 다른 것을 버튼으로 만들고, 클릭하거나 조작한 후 시스템이 어떤 동작을 하는 것입니다.
가장 일반적으로 사용되는 아바타 이미지 이미지를 클릭하면 시스템에서 앨범 또는 카메라를 선택할 것인지 묻는 팝업 창을 표시합니다.
이제 다음 디자인 초안을 완성해 보겠습니다.
버튼 자체의 코드가 제거되면 디자인 초안에 두 개의 텍스트가 있습니다.
Button의 스타일 영역에 Text를 작성한 다음 Text에 modifier를 추가합니다.
| 수정자 | 이름 | 설명하다 |
|---|---|---|
| .폰트() | 폰트 | .font(.system(크기: 14)), 글꼴 크기 14 |
| .액자() | 크기 | .frame(minWidth: 0, maxWidth: .infinity), 최대 너비는 적응형 화면 너비입니다. |
| .심() | 여유 | 버튼 외부의 "영역" .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)
}
}
}
复制代码如果本专栏对你有帮助，欢迎点赞、评论、关注～