Swift UI框架初体验

前言：

各位同学大家好，有段时间没有给大家更新文章了 ，今天有空学了一下swift ui框架 来开发iOS app 写了一个简单的demo 所以想着分享给大家 那么废话不多说 我们正式开始

效果图：6

image.png
image.png

准备工作

image.png

xcode. 版本如图 高于xcode 11都可以

具体实现

//
//  ContentView.swift
//  myapp
//
//  Created by xuqing on 2021/11/19.
//
import SwiftUI
struct ContentView: View {
    var body: some View {
        NavigationView {
            List(0 ..< 20){ item in
                NavigationLink(destination: Text("details")){
                    Image(systemName: "heart")
                        .resizable()
                        .foregroundColor(.red)
                        .frame(width: 50, height: 50, alignment: .center)
                    VStack {
                        VStack(alignment: .leading, spacing: 0){
                            Text("我是徐老板")
                               .foregroundColor(.blue)
                            Text("外号科韵路扛把子")
                                .foregroundColor(.gray)
                                .font(.subheadline)
                        }
                    }
                }
            }.navigationBarTitle(Text("navigationBar"))
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

我们这边讲我们需要 编写UI部分ContentView 这个方法里面 然后在 ContentView_Previews 里面调用
即可 我们UI可以手动编写也可以想传统iOSxib 拖拽控件也是可以 拖拽后我们代码区域会自动帮我们填充swift 代码 。

列表显示

  List(0 ..< 20){ item in
                NavigationLink(destination: Text("details")){
                    Image(systemName: "heart")
                        .resizable()
                        .foregroundColor(.red)
                        .frame(width: 50, height: 50, alignment: .center)
                    VStack {
                        VStack(alignment: .leading, spacing: 0){
                            Text("我是徐老板")
                               .foregroundColor(.blue)
                            Text("外号科韵路扛把子")
                                .foregroundColor(.gray)
                                .font(.subheadline)
                        }
                    }
                }
            }

我们创建了一个list 控件然后显示20条本地数据 在里面 我们编写了一个横向线性布局 和2一纵向线性布局来展示的我们的image 和text 然后分别文字的颜色和图片宽高个显示位置 。即可完成简单的布局。

最后总结：

优点：swift ui写起来和 flutter koltin的jetpack compose 框架非常的像 这种声明式的UI 来写布局比起传统的 xib或者oc uikt 纯代码布局效率高太多了 基本是所见即所得 对于新手学习iOS app 开发非常的友好。
缺点：Swift ui 开发的ios APP只能运行在系统版本好大于或者等于iOS13 以上的设备上 这点对于国内大批iOS 用户来说显然是不合适的 因为还有很多人用的是旧版的iOS 系统 还有就是swifi ui在写布局方便是可以的 但是很多跟iOS系统底层交互的还是要uikt来实现 所以我们还是要熟悉uikt实现方式和原理才能很好开发完善的iOS app