iOS Swift UI 绘制第一个UI界面

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吧