引言

為了更好地了解和學(xué)習(xí)SwiftUI，我們快速學(xué)習(xí)SwiftUI的三種基本布局：HStack水平布局容器、VStack垂直布局容器、ZStack層疊布局容器。

在實(shí)際開發(fā)過程中，登錄頁面是移動(dòng)端產(chǎn)品必不可少的頁面，也是很好的練手項(xiàng)目。

接下來，我們將用10分鐘來構(gòu)建一個(gè)登錄頁面布局，以下面UI設(shè)計(jì)稿為例：

頁面分析-元素構(gòu)成

采用自頂向下的設(shè)計(jì)思想拆解UI設(shè)計(jì)稿的元素，可以得到以下的信息：

• 背景圖片：使用Image基本組件，需要拉伸全屏，其他元素在圖片內(nèi)部
• 說明文字：兩段大小不一致的文字垂直布局組成，對(duì)齊方式為左對(duì)齊
• 登錄方式：兩個(gè)填充色和文字顏色不一致的按鈕垂直布局組成，對(duì)齊方式為居中對(duì)齊
• 輔助文字：由文字和文字按鈕橫向布局組成

拆解完頁面元素后，接下來將按照頁面元素及其布局方式進(jìn)行代碼編程。

實(shí)戰(zhàn)編程-背景圖片

在SwiftUI編程項(xiàng)目中有兩種展示圖片的方式，一種是通過網(wǎng)絡(luò)請(qǐng)求獲得的圖片URL再在本地加載圖片，一種是導(dǎo)入準(zhǔn)備好的圖片直接使用。

前者可以根據(jù)請(qǐng)求數(shù)據(jù)的不同更新圖片，后者較常用于基本不怎么需要變化的頁面背景等業(yè)務(wù)場景中。

登錄界面屬于后者，因此我們可以直接在Xcode開發(fā)工具中導(dǎo)入需要的圖片。

點(diǎn)擊視圖工具欄的Assets.xcassets文件，點(diǎn)擊底部“+”圖標(biāo)，選擇Import，如下彈窗所示：

選擇圖片后導(dǎo)入，導(dǎo)入完成后，可以看Assets的預(yù)覽區(qū)看到導(dǎo)入的圖片。

為了方便后續(xù)的使用，這里將圖片重命名為bgImage，如下圖所示：

回到ContentView文件，這是SwiftUI提供的一個(gè)示例視圖頁面，我們使用Image圖片組件引用導(dǎo)入的圖片，示例：

struct ContentView: View {
    var body: some View {
        Image("bgImage")
    }
}

SwiftUI圖片組件使用方式為括號(hào)內(nèi)，使用雙引號(hào)對(duì)對(duì)象進(jìn)行引用，這里Image組件引用的對(duì)象是在Assets資源庫導(dǎo)入的bgImage圖片。

實(shí)時(shí)預(yù)覽后發(fā)現(xiàn)，由于圖片尺寸大于整機(jī)屏幕尺寸，導(dǎo)致圖片超出了可視范圍。這時(shí)需要圖片的常用修飾符對(duì)Image圖片進(jìn)行修飾，示例：

Image("bgImage")
    .resizable()
    .edgesIgnoringSafeArea(.all)

這里使用了2個(gè)修飾符，resizable修飾符可以對(duì)Image圖片進(jìn)行縮放，使圖片縮放到模擬器顯示范圍內(nèi)。

而edgesIgnoringSafeArea修飾符可對(duì)視圖忽略其安全區(qū)域，這時(shí)iPhoneX以上全面屏的特性，在頂部狀態(tài)欄和底部欄的區(qū)域留有安全區(qū)域，edgesIgnoringSafeArea可以忽略安全區(qū)域，讓Image圖片撐開整個(gè)屏幕。

實(shí)戰(zhàn)編程-說明文字

文字部分使用Text組件，和Image組件使用方法類似，在括號(hào)內(nèi)使用雙引號(hào)引用文本信息，示例：

Text("開啟你的意識(shí)世界")

當(dāng)我們使用Text組件時(shí)，預(yù)覽區(qū)域展示了2個(gè)模擬器，這是因?yàn)橹皠?chuàng)建的Image組件和Text組件缺少布局關(guān)系，Xcode開發(fā)工具就將它們當(dāng)作單獨(dú)的視圖分開預(yù)覽。

由上面分析得知，背景圖片和其他元素是層疊關(guān)系，因此需要使用到ZStack容器將多個(gè)元素進(jìn)行層疊布局。

ZStack{
    Image("bgImage")
        .resizable()
        .edgesIgnoringSafeArea(.all)
    Text("開啟你的意識(shí)世界")
}

視圖容器的使用方式是用大括號(hào)將元素包裹在一起，包裹中的元素將符合視圖容器的排列方式。

說明文字有2部分，2段文字排列方式為上下排列，由于文字字?jǐn)?shù)不一，使用左對(duì)齊方式。代碼如下：

VStack(alignment: .leading, spacing: 10){
    Text("開啟你的意識(shí)世界")
    Text("首次登錄自動(dòng)創(chuàng)建新賬號(hào)")
}

在VStack垂直布局容器中，修改視圖的對(duì)齊方式及視圖內(nèi)部元素之間的間距視圖括號(hào)包裹，alignment參數(shù)設(shè)置視圖內(nèi)元素的對(duì)齊方式，這是使用的是leading左對(duì)齊。

spacing參數(shù)設(shè)置視圖內(nèi)所有元素的間距，如果同樣是垂直布局的元素間距不一樣，則需要多個(gè)VStack垂直布局容器進(jìn)行包裹。

和Image圖片組件修飾符使用方法一樣，可以對(duì)Text添加修飾符對(duì)文字對(duì)象進(jìn)行修飾，代碼如下：

VStack(alignment: .leading, spacing: 10){
    Text("開啟你的意識(shí)世界")
        .font(.title)
        .bold()
    Text("首次登錄自動(dòng)創(chuàng)建新賬號(hào)")
        .font(.system(size: 17))
}

font修飾符可以對(duì)Text文字的字號(hào)、字體進(jìn)行修飾，bold修飾符可以設(shè)置文字的字重，另外常用的文字修飾符像foregroundColor修飾符可以設(shè)置文字的填充顏色等。

實(shí)戰(zhàn)編程-登錄方式

登錄方式由2個(gè)登錄按鈕組成，登錄按鈕的布局方式也是垂直布局，并且2個(gè)按鈕采用的是居中對(duì)齊方式。除了考慮登錄方式按鈕本身外，還需要考慮登錄方式和說明文字的布局方式，此部分代碼如下：

VStack(alignment: .leading, spacing: 400) {
    //說明文字
    //登錄方式
    VStack(alignment: .center, spacing: 15) {
        Button(action: {}) {
            Text("手機(jī)號(hào)碼登錄")
                .font(.system(size: 17))
                .bold()
                .frame(minWidth: 0, maxWidth: .infinity)
                .padding()
                .foregroundColor(.white)
                .background(.red)
                .cornerRadius(8)
        }
        Button(action: {}) {
            Text("微信登錄")
                .font(.system(size: 17))
                .bold()
                .frame(minWidth: 0, maxWidth: .infinity)
                .padding()
                .foregroundColor(.black)
                .background(.white)
                .cornerRadius(8)
        }
    }
}.padding()

在說明文字和登錄方式兩塊元素上，這里使用VStack垂直布局容器，并設(shè)置視圖內(nèi)對(duì)齊方式為左對(duì)齊，說明文字和登錄方式視圖的間距為400。

登錄方式視圖分為2個(gè)按鈕：手機(jī)號(hào)碼登錄、微信登錄，按鈕使用到的組件是Button組件，由于Button組件的使用方式如下：

Button(action:{
    //點(diǎn)擊后操作
}) {
    //按鈕樣式
}

Button組件樣式上和其他組件一致，即任何視圖都可以作為按鈕，這里使用的是Text文字視圖作為按鈕的主體樣式，并設(shè)置文字修飾符對(duì)Text視圖進(jìn)行修飾美化。

其中，frame修飾符可以設(shè)置組件的尺寸大小，由于iOS機(jī)型和顯示區(qū)域不一，因此使用minWidth最小寬度和maxWidth最大寬度，最大寬度maxWidth設(shè)置為infinity自適應(yīng)。

padding修飾符設(shè)置文字的邊距，background修飾符將Text文字視圖背景包括撐開邊距的布局填充顏色，cornerRadius修飾符設(shè)置圓角度數(shù)。

這里值得注意的是，修飾符的順序決定了樣式，先賦于視圖的修飾符具有優(yōu)先權(quán)，比如background修飾符在前，padding修飾符在后，則按鈕就會(huì)只有文字背后一點(diǎn)點(diǎn)位置填充了顏色，而無法實(shí)現(xiàn)現(xiàn)在的效果。

實(shí)戰(zhàn)編程-輔助文字

最后是輔助文字部分，分析后可以拆分成4段：登錄即代表同意（文字）、用戶協(xié)議（按鈕）、和（文字）、隱私政策（按鈕），并且這四段內(nèi)容采用水平布局方式。

另外還需要考慮與其他元素的布局關(guān)系，由上至下是登錄方式視圖，輔助文字視圖和登錄方式視圖是垂直布局關(guān)系。此部分代碼如下：

VStack(alignment: .center, spacing: 40) {
    //登錄方式視圖
    //輔助文字視圖
    HStack {
        Text("登錄即表明同意")
            .foregroundColor(.white)
        Button(action: {}) {
            Text("用戶協(xié)議")
        }
        Text("和")
            .foregroundColor(.white)
        Button(action: {}) {
            Text("隱私政策")
        }
    }
}

本章小結(jié)

恭喜你，完成了第一個(gè)SwiftUI頁面！

在本章節(jié)中，我們學(xué)了三種基本的頁面布局方式：HStack水平布局、VStack垂直布局、ZStack層疊布局，并學(xué)習(xí)了基本組件Image圖片組件、Text文本組件、Button組件的使用，當(dāng)然目前我們只完成了頁面樣式部分，功能交互還有待完善，但邁出這一步后，后面的SwiftUI學(xué)習(xí)之路會(huì)好走很多。

希望大家能除了看文章之外，也能沉下來敲敲代碼，當(dāng)一個(gè)又一個(gè)頁面在指尖上飛舞，相信你也會(huì)有信心和興趣深入了解SwiftUI，了解它的簡約之美。

更多關(guān)于SwiftUI 登錄界面布局的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！