Swift UI框架初体验

前语：

各位同学咱们好，有段时刻没有给咱们更新文章了 ，今天有空学了一下swift ui结构 来开发iOS app 写了一个简略的demo 所以想着共享给咱们 那么废话不多说 咱们正式开始

效果图：6

准备工作

具体完成

//
//  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