用SwiftUI寫一個簡單頁面

時間 2019-11-21

標籤 swiftui 一個簡單頁面简体版

原文原文鏈接

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

前言：以前同事WYongW寫了一篇《用Flutter寫一個簡單頁面》，本篇將和你們一塊兒調研一下蘋果今年推出的SwiftUI框架。接下來，讓咱們一塊兒入門一下SwiftUI（嚐嚐鮮）。git

1、SwiftUI是什麼？

1. 定義：

簡單來講，SwiftUI是蘋果在 「WWDC-2019」 推出的一款全新的 「聲明式UI」 框架。拆開看，Swift + UI。（由此能夠看出Swift愈來愈重要）github

2. 特色：

「簡潔迅速」的Swift：愈來愈簡潔的Swift語法，配上Swift迅速的優點。編程
「即視」的UI：下降調試成本，一邊寫code、一邊就可查看UI。swift
跨平臺：一套代碼，便可完成iOS、iPadOS、macOS、watchOS的開發與適配。微信

「聲明式」編程：

簡單來講，對比以前的**「指令式」編程**，咱們一般須要告訴計算機**「怎麼作」？而「聲明式」編程是讓咱們告訴計算機「作什麼」**？（至於最底層怎麼作，咱們無需關心。）app

舉個例子，對於寫UI而言，框架

指令式編程：就是，**怎麼畫？**把每一個frame、layout等等通通須要計算到位。
聲明式編程：就是，**畫什麼？**把想要的效果描述出來，其餘都交給框架去作。

3. 開發環境：

這麼新的技術確定須要環境的支持。SwiftUI所須要的開發環境，以下：dom

Xcode：Xcode 11.1+。
MacOS：MacOS 10.15+。
iOS：iOS 13+。

PS：因爲SwiftUI只能應用與iOS 13系統以上的設備。所以，這項技術不建議用在須要適配低版本（iOS 13 如下）的App上。不過若是是無需適配低版本的新項目，或者學習者全能夠上手「玩一玩」。畢竟蘋果的新技術仍是頗有意思的嘛~ide

2、SwiftUI的基本組件（語法）

這塊知識比較「基礎」且「重要」。只有記住了這些基本組件，咱們才能用較少的代碼開發出精美的App。

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

組件介紹：

名稱	含義
Text	用來顯示文本的組件，相似UIKit中的`UILabel`。
Image	用來展現圖片的組件，相似UIKit中的`UIImageView`。
Button	用於可點擊的按鈕組件，相似UIKit中的`UIButton`。
List	用來展現列表的組件，相似UIKit中的`UITableView`。
ScrollView	用來支持滑動的組件，相似UIKit中的`UIScrollView`。
Spacer	一個靈活的空間，用來填充空白的組件。
Divider	一條分割線，用來劃分區域的組件。
VStack	將子視圖按「豎直方向」排列布局。（`Vertical stack`）
HStack	將子視圖按「水平方向」排列布局。（`Horizontal stack`）
ZStack	將子視圖按「兩軸方向均對齊」佈局（居中，有重疊效果）

基本組件：

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：一條分割線，用來劃分區域的組件。

佈局組件：

VStack：將子視圖按**「豎直方向」**佈局。（Vertical stack）
HStack：將子視圖按**「水平方向」**佈局。（Horizontal stack）
ZStack：將子視圖按**「兩軸方向均對齊」**佈局。

功能組件：

NavigationView：負責App中導航功能的組件，相似UIKit中的UINavigationView。
NavigationLink：負責App頁面跳轉的組件，相似於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("導航\(item)",displayMode: .inline)
複製代碼

TabView：負責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)
複製代碼

3、SwiftUI快速上手實踐

下面讓咱們快速實現一個有TabView、NavigationView、List的Demo。

SF Symbols 是從 iOS 13 和 macOS 10.15 開始內置於系統中的字符圖標庫，它提供了上千種常見的線條圖標，並且咱們能夠任意地爲它們設置尺寸，顏色等屬性。Apple 甚至準備了專門的app：SF Symbols 來幫助你查看可用的符號：

接下來就讓咱們用這些Symbols製做個小Demo。

ContentView：

import SwiftUI

struct ContentView: View {
    
    @State var isLeftNav = false
    @State var isRightNav = false
    
    init() {
        //修改導航欄文字顏色
        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對應的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

小編微信：可加並拉入《QiShare技術交流羣》。

關注咱們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公衆號)

推薦文章：
iOS 控制日誌的開關
 iOS App中可拆卸一個framework的兩種方式
 自定義WKWebView顯示內容（一）
Swift 5.1 (6) - 函數
 Swift 5.1 (5) - 控制流
 Xcode11 新建工程中的SceneDelegate
iOS App啓動優化（二）—— 使用「Time Profiler」工具監控App的啓動耗時
 iOS App啓動優化（一）—— 瞭解App的啓動流程
 奇舞週刊

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。