Swift UI 简介
苹果开发者大会 WWDC 2019 在北京时间今天凌晨开幕,对于开发者来说最吸引人的就是新发布的 SwiftUI ,在 苹果公司软件工程高级副总裁Craig Federighi的演示中,我们可以轻松地把一百行的前端代码缩减到十几行。
Swift UI 特点
1、省略了很多逗号,return,中括号等,声明式编程
2、出现了 很多关键词 例如 Some 等
3、终于使用 Flex Box 布局了
4、出现了 PreviewProvider 类似 安卓的xml 提供预览数据
5、支持简单的逻辑控制,比如 if 控制语句
6、与 Swift 已有的语法不冲突
其实熟悉Flutter开发的小伙伴应该对SwiftUI并不陌生,他其实和Flutter的布局有部分的相似。
今天主要讲解用Swift UI 绘制一个最简单的登录界面,首先看一下效果图
下面是实现的代码:
//
// ContentView.swift
// Demo
//
// Created by wql on 2021/9/29.
//
import SwiftUI
struct ContentView: View {
@State private var user_name = "" // 用户名输入框的内容
@State private var user_password = "" // 密码输入框的内容
var body: some View {
VStack(alignment: .center){
Image("ic_login_bg").resizable()
.frame(width: UIScreen.main.bounds.width, height: 265.0).aspectRatio(contentMode: .fit) // 设置头部的背景图
VStack{ // 竖向排版,{ }里的内容自动剧中竖向排版
HStack{ // 横向排版,{ }里的内容自动剧中横向排版
Image("ic_login_name").resizable()
.frame(width: 18, height: 20).aspectRatio(contentMode: .fill).padding(EdgeInsets.init(top: 12, leading: 25, bottom: 5, trailing: 10)) // 设置账号图标
TextField("账号", text: $user_name).padding(EdgeInsets.init(top: 12,leading: 0, bottom: 5, trailing: 10)).font(.system(size: 14)) // 设置账号输入框
}
Divider()
.background(Color.gray) //分割线的默认颜色为灰色,此处设置分割线的默认颜色为紫色
.scaleEffect(CGSize(width: 1, height: 0.5)) //分割线高度放大10倍
.padding(EdgeInsets.init(top: 0, leading: 25, bottom: 0, trailing: 25)) // 下划线
}
VStack{
HStack{
Image("ic_login_password").resizable()
.frame(width: 18, height: 20).aspectRatio(contentMode: .fill).padding(EdgeInsets.init(top: 12, leading: 25, bottom: 5, trailing: 10)) // 设置账号图标
TextField("密码", text: $user_password).padding(EdgeInsets.init(top: 12,leading: 0, bottom: 5, trailing: 10)).font(.system(size: 14)) // 设置密码输入框
}
Divider()
.background(Color.gray) //分割线的默认颜色为灰色,此处设置分割线的默认颜色为紫色
.scaleEffect(CGSize(width: 1, height: 0.5)) //分割线高度放大10倍
.padding(EdgeInsets.init(top: 0, leading: 25, bottom: 0, trailing: 25))
}
// 登录按钮
Button(action: {
print("哈哈哈哈")
}) {
Text("按钮")
}.frame(width: UIScreen.main.bounds.width - 50, height: 48, alignment: .center).padding(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 0)).background(Color.blue).accentColor(.white).cornerRadius(24).offset(x: 0, y: 70)
Spacer()//充满空白区域
}.edgesIgnoringSafeArea(.top)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
.previewDevice("iPhone 12 Pro")
}
}
到此就完成了一个页面的简单绘制,可以看出整个一个UI绘制还是非常简单,当然也可以拖拽,看大家自己的喜好。
Swift UI最低支持的版本是iOS13,如果你的用户需要支持更低的版本,那么还是老老实实的使用Swift 或者 OC吧