前言：
各位同學(xué)大家好逃呼，有段時間沒有給大家更新文章了 揪胃，今天有空學(xué)了一下swift ui框架 來開發(fā)iOS app 寫了一個簡單的demo 所以想著分享給大家 那么廢話不多說 我們正式開始
效果圖：6
準(zhǔn)備工作
xcode. 版本如圖 高于xcode 11都可以
具體實現(xiàn)
//
// 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 里面調(diào)用
即可 我們UI可以手動編寫也可以想傳統(tǒng)iOSxib 拖拽控件也是可以 拖拽后我們代碼區(qū)域會自動幫我們填充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)
}
}
}
}
我們創(chuàng)建了一個list 控件然后顯示20條本地數(shù)據(jù) 在里面 我們編寫了一個橫向線性布局 和2一縱向線性布局來展示的我們的image 和text 然后分別文字的顏色和圖片寬高個顯示位置 和泌。即可完成簡單的布局。
最后總結(jié)：
優(yōu)點：swift ui寫起來和 flutter koltin的jetpack compose 框架非常的像 這種聲明式的UI 來寫布局比起傳統(tǒng)的 xib或者oc uikt 純代碼布局效率高太多了 基本是所見即所得 對于新手學(xué)習(xí)iOS app 開發(fā)非常的友好。
缺點：Swift ui 開發(fā)的ios APP只能運行在系統(tǒng)版本好大于或者等于iOS13 以上的設(shè)備上 這點對于國內(nèi)大批iOS 用戶來說顯然是不合適的 因為還有很多人用的是舊版的iOS 系統(tǒng) 還有就是swifi ui在寫布局方便是可以的 但是很多跟iOS系統(tǒng)底層交互的還是要uikt來實現(xiàn) 所以我們還是要熟悉uikt實現(xiàn)方式和原理才能很好開發(fā)完善的iOS app
