SwiftUI直通車系列（1）—— 視圖的佈局與組織

1、引言

SwiftUI提供了一種更快、更高效也更簡單的頁面開發方式。咱們知道相對於Objective-C，Swift語言自己就更加高效簡潔，SwiftUI採用告終構化的佈局方式，使得應用的界面開發更加直觀快速。本系列博客，基於Apple官方的SwiftUI Tutorials爲參考，配合代碼示例介紹了SwiftUI的基礎應用和特性，幫助你們快速入門SwiftUI開發，爲工做中的開發效率賦能。swift

2、SwiftUI初體驗

作爲Apple相關產品的開發者，影響界面開發效率的一大問題是每次代碼的修改要查看效果都須要從新編譯運行。每每，調試驗證的時間要遠遠大於編碼時間，嚴重影響了開發效率。固然，這也是大多數編譯型語言所共有的痛點。使用SwiftUI配合Xcode的預覽功能，能夠作到代碼的實時修改實時預覽效果，界面的開發效率很是高。框架

首先，咱們能夠建立一個模板工程體驗下SwiftUI的基礎功能。使用Xcode新建一個App項目，在選擇語言時，選擇Swift，並使用SwiftUI建立界面入口，以下圖所示。ide

建立出的工程中包含3個swift文件，其中AppDelegate.swift文件是應用的入口文件，其在任何模板項目中幾乎都是同樣的，沒有什麼特別支持。SceneDelegate.swift文件是iOS 13後新引入的，用來進行多場景的管理，咱們也無需關注。ContentView.swift文件是最終的界面定義文件，其中使用SwiftUI定義了界面的顯示內容，ContentView.swift文件中的代碼以下：佈局

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

如上代碼所示，ContentView是定義的一個視圖結構體，其描述的就是界面的渲染信息，其中Text會在頁面上渲染出一個文本標籤，顯示「Hello Swift!」，ContentView_Previews定義了當前界面的預覽視圖，你能夠嘗試對Text中的文本進行修改，修改後預覽頁面就會實時的展現出當前的界面模樣，以下圖所示。字體

能夠經過爲Text組件設置屬性來實時的改變界面，例如文本的顏色，字體，是否加下劃線等等，以下：ui

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            .foregroundColor(Color.red)
            .underline()
            .font(Font.system(size: 25))
    }
}

此時頁面效果以下圖所示：編碼

經過代碼能夠修改UI元素的屬性，除此以外，咱們還能夠設置容器的對齊方式和元素間距等，以下：spa

struct ContentView: View {
    var body: some View {
        VStack (alignment: .leading, spacing: 10) {
            Text("Hello, SwiftUI!啊啊啊")
                .foregroundColor(Color.red)
                .underline()
                .font(Font.system(size: 25))
            Text("Hello, SwiftUI!")
            .foregroundColor(Color.red)
            .underline()
            .font(Font.system(size: 25))
        }
    }
}

其中alignment設置內部組件的對其方式，spacing設置組件間距離，對於水平棧，spacing設置的是列間距，對於垂直棧，spacing設置的是行間距。默認，組件會自動計算其作佔據的位置，SwiftUI中也提供了一種特殊的佔位元素，其能夠將剩餘的空間充滿，例如在兩個垂直佈局的元素中間加入一個佔位元素，則其會進行兩端佈局，以下：3d

struct ContentView: View {
    var body: some View {
        VStack (alignment: .leading, spacing: 10) {
            Text("Hello, SwiftUI!啊啊啊")
                .foregroundColor(Color.red)
                .underline()
                .font(Font.system(size: 25))
            Spacer()
            Text("Hello, SwiftUI!")
            .foregroundColor(Color.red)
            .underline()
            .font(Font.system(size: 25))
        }
    }
}

效果以下圖所示：調試

能夠發現，SwiftUI在佈局上，不少思路都和CSS佈局很像，對於組件元素，咱們也能夠爲其追加內間距Padding，例如：

struct ContentView: View {
    var body: some View {
        VStack (alignment: .leading, spacing: 10) {
            Text("Hello, SwiftUI!啊啊啊")
                .foregroundColor(Color.red)
                .underline()
                .font(Font.system(size: 25))
            Spacer()
            Text("Hello, SwiftUI!")
            .foregroundColor(Color.red)
            .underline()
            .font(Font.system(size: 25))
        }
        .padding(EdgeInsets(top: 30, leading: 0, bottom: 30, trailing: 0))
    }
}

3、使用圖片組件

在SwiftUI中，能夠方便的佈局圖片元素，並設置圖片的圓角，陰影，邊框等。使用以下代碼便可在界面中間佈局出一個圖片元素：

struct ContentImage:View {
    var body: some View {
        Image("demo")
    }
}

其中「demo」爲工程中一個資源圖片的名字。預覽效果以下：

圖片元素也有不少屬性能夠設置，如clipShape設置元素的形狀，shadow設置元素的陰影，示例代碼以下：

struct ContentImage:View {
    var body: some View {
        Image("demo")
        .clipShape(Circle())
        .shadow(radius: 30)
    }
}

效果以下圖所示：

4、在SwiftUI中使用UIKit組件

上面咱們使用的文本與圖片元素，都是SwiftUI框架中定義的基礎組件。在實際開發中的更多時候，你須要結合UIKit來自定義一個SwiftUI組件，這自己也很是方便。例如咱們要使用UIKit中的UILabel組件，示例以下：

struct Label:UIViewRepresentable {
    func makeUIView(context: Context) -> UILabel {
        UILabel(frame: .zero)
     }
    
    func updateUIView(_ uiView: UILabel, context: Context) {
        uiView.text = "Hello"
    }
}

UIViewRepresentable協議用來將UIKit中的組件定義爲一個SwiftUI元素，其中有兩個方法是必需要實現的，makeUIView用來返回一個指定的UIKit組件，updateUIView當組件更新時會被調用。

有了這些基礎知識，咱們已經可使用SwiftUI來實現簡單的頁面構建了，你能夠嘗試用其作些簡單的頁面組合，只須要把握住，在SwiftUI中，不管簡單仍是複雜的界面都是經過水平和和垂直棧的組合，加上組件的位置偏移所佈局出來的。

專一技術，熱愛生活，交流技術，也作朋友。

——琿少 QQ羣：805263726