級別：★☆☆☆☆
標簽：「iOS 13」「SwiftUI」「Xcode 11.1」
作者： 647
審校： QiShare團隊

前言：
之前同事WYongW寫了一篇《用Flutter寫一個簡單頁面》翰绊，本篇將和大家一起調(diào)研一下蘋果今年推出的SwiftUI框架漠魏。
接下來，讓我們一起入門一下SwiftUI（嘗嘗鮮）。

一溃肪、SwiftUI是什么啥寇？

1. 定義：

簡單來說荠藤，SwiftUI是蘋果在“WWDC-2019”推出的一款全新的“聲明式UI”框架斩个。
拆開看，Swift + UI脓恕。（由此可以看出Swift越來越重要）

2. 特點：

• “簡潔迅速”的Swift：越來越簡潔的Swift語法膜宋，配上Swift迅速的優(yōu)勢。

• “即視”的UI：降低調(diào)試成本炼幔，一邊寫code秋茫、一邊就可查看UI。

• 跨平臺：一套代碼乃秀，即可完成iOS肛著、iPadOS圆兵、macOS、watchOS的開發(fā)與適配策泣。

• “聲明式”編程：

簡單來說衙傀，對比之前的“指令式”編程抬吟，我們通常需要告訴計算機“怎么做”萨咕？
而“聲明式”編程是讓我們告訴計算機“做什么”？（至于最底層怎么做火本，我們無需關(guān)心危队。）

舉個例子，對于寫UI而言钙畔，

• 指令式編程：就是茫陆，怎么畫？把每個frame擎析、layout等等統(tǒng)統(tǒng)需要計算到位簿盅。
• 聲明式編程：就是，畫什么揍魂？把想要的效果描述出來桨醋，其他都交給框架去做。

3. 開發(fā)環(huán)境：

這么新的技術(shù)肯定需要環(huán)境的支持现斋。SwiftUI所需要的開發(fā)環(huán)境喜最，如下：

• Xcode：Xcode 11.1+。
• MacOS：MacOS 10.15+庄蹋。
• iOS：iOS 13+瞬内。

PS：由于SwiftUI只能應(yīng)用與iOS 13系統(tǒng)以上的設(shè)備。
因此限书，這項技術(shù)不建議用在需要適配低版本（iOS 13 以下）的App上虫蝶。
不過如果是無需適配低版本的新項目，或者學(xué)習(xí)者全可以上手“玩一玩”倦西。
畢竟蘋果的新技術(shù)還是很有意思的嘛~

二秉扑、SwiftUI的基本組件（語法）

這塊知識比較“基礎(chǔ)”且“重要”。只有記住了這些基本組件调限，我們才能用較少的代碼開發(fā)出精美的App舟陆。

下面，我將給大家介紹一些重要的SwiftUI組件：

組件介紹：

基本組件：

• Text：用來顯示文本的組件徘钥，類似UIKit中的UILabel。

Text("Hello, we are QiShare!").foregroundColor(.blue).font(.system(size: 32.0))

• Image：用來展示圖片的組件肢娘，類似UIKit中的UIImageView呈础。

Image.init(systemName: "star.fill").foregroundColor(.yellow)

• Button：用于可點擊的按鈕組件，類似UIKit中的UIButton橱健。

Button(action: { self.showingProfile.toggle() }) {
    Image(systemName: "paperplane.fill")
        .imageScale(.large)
        .accessibility(label: Text("Right"))
        .padding()
}

• List：用來展示列表的組件而钞，類似UIKit中的UITableView。

List(0..<5){_ in
        NavigationLink.init(destination: VStack(alignment:.center){
            Image.init(systemName: "\(item+1).square.fill").foregroundColor(.green)
            Text("詳情界面\(item + 1)").font(.system(size: 16))
    }) {
          //ListRow
       }

• ScrollView：用來支持滑動的組件畴博，類似UIKit中的UIScrollView笨忌。

• Spacer：一個靈活的空間，用來填充空白的組件俱病。

• Divider：一條分割線官疲，用來劃分區(qū)域的組件。

布局組件：

• VStack：將子視圖按“豎直方向”布局亮隙。（Vertical stack）

• HStack：將子視圖按“水平方向”布局途凫。（Horizontal stack）

• ZStack：將子視圖按“兩軸方向均對齊”布局。

功能組件：

• NavigationView：負責(zé)App中導(dǎo)航功能的組件溢吻，類似UIKit中的UINavigationView维费。

• NavigationLink：負責(zé)App頁面跳轉(zhuǎn)的組件，類似于UINavigationView中的push與pop功能促王。

NavigationView {
    List(0..<5){_ in
        NavigationLink.init(destination: VStack(alignment:.center){
            Image.init(systemName: "\(item+1).square.fill").foregroundColor(.green)
            Text("詳情界面\(item + 1)").font(.system(size: 16))
    }) {
          //ListRow
       }
}
.navigationBarTitle("導(dǎo)航\(item)",displayMode: .inline)

• TabView：負責(zé)App中的標簽頁功能的組件犀盟，類似UIKit中的UITabBarController。

TabView {
    Text("The First Tab")
        .tabItem {
            Image(systemName: "1.square.fill")
            Text("First")
        }
    Text("Another Tab")
        .tabItem {
            Image(systemName: "2.square.fill")
            Text("Second")
        }
    Text("The Last Tab")
        .tabItem {
            Image(systemName: "3.square.fill")
            Text("Third")
        }
}
.font(.headline)

三蝇狼、SwiftUI快速上手實踐

下面讓我們快速實現(xiàn)一個有TabView阅畴、NavigationView、List的Demo迅耘。

SF Symbols 是從 iOS 13 和 macOS 10.15 開始內(nèi)置于系統(tǒng)中的字符圖標庫贱枣，它提供了上千種常見的線條圖標监署，而且我們可以任意地為它們設(shè)置尺寸，顏色等屬性纽哥。Apple 甚至準備了專門的app：SF Symbols 來幫助你查看可用的符號：

接下來就讓我們用這些Symbols制作個小Demo钠乏。

• ContentView：

import SwiftUI

struct ContentView: View {
    
    @State var isLeftNav = false
    @State var isRightNav = false
    
    init() {
        //修改導(dǎo)航欄文字顏色
        UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.systemBlue]
        UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.systemBlue]
        UINavigationBar.appearance().tintColor = .systemBlue
    }
    
    var body: some View {
        TabView {
            
            // Tab1:
            NavigationView {
                List(Symbols, id:\.self) {
                    ListRow(symbol: $0)
                }
                .navigationBarTitle(Text("SF Symbols"))
                .navigationBarItems(leading: leftNavButton, trailing: rightNavButton)
            }.tabItem {
                Image.init(systemName: "star.fill")
                Text("Tab1").font(.subheadline)
            }
            
            // Tab2:
            NavigationView {
                Text("This is the second tab.")
            }.tabItem {
                Image.init(systemName: "star.fill")
                Text("Tab2").font(.subheadline)
            }
        }
    }
    
    var leftNavButton: some View {
        Button(action: { self.isLeftNav.toggle() }) {
            Image(systemName: "person.crop.circle")
                .imageScale(.large)
                .accessibility(label: Text("Left"))
                .padding()
        }
        .sheet(isPresented: $isLeftNav) {
            VStack {
                Text("Hello, we are QiShare!").foregroundColor(.blue).font(.system(size: 32.0))

                HStack {
                    Spacer()
                    Spacer()
                    Text("an iOS Team. ").fontWeight(.black).foregroundColor(.purple)
                    Spacer()
                    Text("We are learning SwiftUI.").foregroundColor(.blue)
                    Spacer()
                }
            }
        }
    }
    
    var rightNavButton: some View {
        Button(action: { self.isRightNav.toggle() }) {
            Image(systemName: "paperplane.fill")
                .imageScale(.large)
                .accessibility(label: Text("Right"))
                .padding()
        }
        .sheet(isPresented: $isRightNav, onDismiss: {
            print("dissmiss RrightNav")
        }) {
            ZStack {
                Text("This is the Right Navi Button.")
            }
        }
    }
}

• ListRow：List對應(yīng)的Cell

struct ListRow: View {
    var symbol: String
    var body: some View {
        NavigationLink(destination: ListDetail(symbol: symbol)) {
            
            HStack {
                //圖片
                Image(systemName: symbol)
                    .resizable()
                    .frame(width: 60, height: 60)
                    .foregroundColor(Colors.randomElement())
                //分割
                Divider()
                Spacer()
                //文字
                Text(symbol)
                Spacer()
            }
        }
    }
}

• ListDetail：

import SwiftUI

struct ListDetail: View {
    
    var symbol: String
    
    var body: some View {
        VStack {
            
            Text("Image:").font(.headline)
            
            Spacer()
            
            Image(systemName: symbol)
                .foregroundColor(Colors.randomElement())
                .imageScale(.large)
                .scaleEffect(3)
                .padding(.bottom, 100)
            
            Divider()
            
            Text("Image Name:").font(.headline)
            Spacer()
            Text(symbol)
                .font(.largeTitle)
            Spacer()
        }
        .navigationBarTitle(symbol)
    }
}

源碼：本文Demo

推薦文章：
iOS 控制日志的開關(guān)
iOS App中可拆卸一個framework的兩種方式
自定義WKWebView顯示內(nèi)容（一）
Swift 5.1 (6) - 函數(shù)
Swift 5.1 (5) - 控制流
Xcode11 新建工程中的SceneDelegate
iOS App啟動優(yōu)化（二）—— 使用“Time Profiler”工具監(jiān)控App的啟動耗時
iOS App啟動優(yōu)化（一）—— 了解App的啟動流程
iOS WKWebView的基本使用
Swift 5.1 (4) - 集合類型