Swift UI框架初体验

前言：

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

效果图：6

准备工作

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

具体实现

scss 复制代码

//
//  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 代码。

列表显示

scss 复制代码

  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