實戰教程·元宇宙來了，準備好你的電子名片了嗎？（一）

語言: CN / TW / HK
時間 2023-02-15 15:15:10

theme: smartblue

需求背景

自從在技術論壇開始寫作後，會遇到來自不同領域不同平臺的朋友加為好友。後來人數多了以後，對於相同社群的朋友為了方便管理就建立了微信群進行管理。由於在不同平臺的內容更新頻次不同，會被經常問起在哪些平臺進行更新，但通常會因為一時間平臺很多也不知道該如何回答。

有時候在想是不是能有一個工具能夠像個人簡歷一樣，彙集個人的所有公開的資訊，其他人只需要通過一個連結就可以檢視我所有共享的內容？

在網上查詢了一圈後，還真發現了一款叫做Linktree的工具，它通過在建立一個有效的連結的方式，將個人的一個個身份彙集在一起。使用者可以將這個連結分享給其他人，其他人就可以通過訪問URL來查詢他人共享的所有社交媒體資料和內容。

這是不是就是所謂的元宇宙世界的電子名片？

秉著研究的興趣，結合自己所學的內容，也想著是否能使用SwiftUI實現一個電子名片？說幹就幹。

專案分析

做一款電子名片的MVP產品，功能點分析如下：

我們將專案命名為Linkworld，它有兩個頁面，一個“個人主頁”，承載使用者建立的所有身份卡片。第二個是“新建身份頁”，使用者建立個人主頁中的身份卡片。

Linkworld唯有一個核心的功能，即點選卡片後在應用內開啟web網頁，跳轉到身份卡片對應的主頁。

在分析完最小的MVP產品的核心功能後，我們來使用程式設計實現這款App。

專案準備：建立新的SwiftUI專案

首先開啟Xcode，建立一個新的SwiftUI專案，命名為Linkworld，如下圖所示：

程式設計方式：搭建單獨的構件

建立專案後，先來分析個人主頁所需要呈現的內容，我們設想每一個社交媒體都是一個身份卡片，就像醫生或者服務員胸口的名片。

Swift程式語言的一大特性是歸類的思想，即將具有相同的特性的內容抽離出來，製作一個個構件，然後在主要檢視中呼叫。一張張身份卡片對於我們來說就是一個構件，我們只需要建立一個標準構件，然後賦予不同的內容就可以完成主頁的搭建。

在ContentView中，我們建立一個新的結構體作為標準構件，如下程式碼所示：

``` // MARK: 身份卡片構件

struct CardView: View { var body: some View { Text("Hello, world!") } } ```

為了便於展示，我們在ContentView檔案中建立了一個新的結構體CardView，當然我們也可以直接建立一個新的SwiftUI檔案命名為CardView。一般在程式設計過程中，為了專案結構的清晰，通常會另起一個SwiftUI頁面，這裡為了演示內容，就在ContentView直接建立。

變數宣告：變數名稱和變數型別

建立完CardView結構體後，我們來分析下身份卡片需要呈現的內容，如下圖所示：

借鑑一些常規技術社群所呈現的主要內容，我們可以得到單張身份卡片應該有如上圖的資訊：平臺圖示、平臺稱號、平臺名稱、跳轉連結。

示例：稀土掘金Icon，移動端簽約作者，稀土掘金技術社群，https://juejin.cn/user/3897092103223517

因此對於CardView檢視，需要宣告對應的引數，如下程式碼所示：

var platformIcon: String var title: String var platformName: String var indexURL: String

上述程式碼中，我們聲明瞭4個身份卡片所需要的引數：platformIcon平臺圖示、title平臺稱號、platformName平臺名稱、indexURL首頁地址。

這裡需要明確的內容是，使用var宣告的變數需要確定引數的型別，引數型別需要根據使用的元件使用的型別。Image圖片元件、Text文字元件使用的引數值都是String型別，因此我們宣告的4個必要的變數也都是String型別。

介面設計：控制元件的三種佈局容器

緊接著，我們來看看單張身份卡片的設計結構，如下圖所示：

由上圖所示，單張身份卡片需要展示的內容的佈局結構，平臺稱號和平臺名稱為垂直排列，資訊和平臺平臺圖示為橫向排列。

程式設計方式我們可以先搭建佈局容器，再搭建控制元件內容，也可以先搭建控制元件內容，再在控制元件內容外層搭建容器，在SwiftUI實際程式設計中均可使用兩種方式。

首先是平臺圖示，如下程式碼所示：

// 平臺圖示 Image(platformIcon) .resizable() .aspectRatio(contentMode: .fit) .frame(maxWidth: 48, maxHeight: 48)

上述程式碼中，我們使用Image圖片控制元件搭建平臺圖示展示的內容，使用的控制元件內容為宣告的引數變數platformIcon，為了調整平臺圖示以達到最佳的展示效果，這裡使用resizable可調整尺寸修飾符、aspectRatio保持寬高比修飾符、frame設定尺寸修飾符，將平臺圖示的Image圖片控制元件調整為一個48*48的圖片。

然後是文字部分，由於平臺圖示圖片和文字資訊（平臺稱號、平臺名稱）為橫向排布方式，因此需要在它們的最外層增加一個HStack橫向佈局容器，告知系統這些控制元件是橫向排布，如下程式碼所示：

``` HStack(spacing: 15) { // 平臺圖示 Image(platformIcon) .resizable() .aspectRatio(contentMode: .fit) .frame(maxWidth: 48, maxHeight: 48)

Spacer()

} ```

上述程式碼中，我們使用HStack橫向佈局容器包裹Image圖片控制元件，在HStack橫向佈局容器中，我們還使用Spacer控制元件，Spacer控制元件可以填充空白區域，如此便可以將Image圖片控制元件“擠”到另一邊。

文字資訊（平臺稱號、平臺名稱）部分，使用兩個不同字號大小的Text控制元件，而這兩個Text控制元件為縱向排布方式，我們需要使用到VStack縱向佈局容器，如下程式碼所示：

``` VStack(alignment: .leading, spacing: 5) { // 平臺稱號 Text(title) .font(.system(size: 18)) .fontWeight(.bold)

// 平臺名稱
Text(platformName)
    .font(.system(size: 14))

} ```

上述程式碼中，VStack縱向佈局容器使用對齊方式設定為leading文字左對齊，內容控制元件之間的spacing間距為5。文字資訊部分，使用font字型修飾符設定平臺稱號的字號為18，文字字重加粗，平臺名稱的字號為14。

最後，由於我們需要身份卡片呈現卡片效果，因此在整個檢視最外層進行修飾，將整個檢視內容“美化”成卡片，如下程式碼所示：

``` HStack(spacing: 15) { // 平臺圖示 Image(platformIcon) .resizable() .aspectRatio(contentMode: .fit) .frame(maxWidth: 48, maxHeight: 48)

VStack(alignment: .leading, spacing: 5) {
            // 平臺稱號
            Text(title)
                .font(.system(size: 18))
                .fontWeight(.bold)

            // 平臺名稱
            Text(platformName)
                .font(.system(size: 14))
        }

Spacer()

} .padding() .frame(maxHeight: 80) .background(.white) .cornerRadius(8) .padding(.horizontal) ```

以上，單張身份卡片的構件就完成了。

卡片預覽：使用構件搭建檢視

完成單張身份卡片的構件後，我們在ContentView檢視中展示卡片看看效果。首先我們先在Assets匯入一堆圖片素材作為平臺圖示的內容，如下圖所示：

然後回到ContentView檔案中，刪除示例程式碼，呼叫CardView身份卡片結構體建立列表，如下程式碼所示：

CardView(platformIcon: "icon_juejin", title: "移動端簽約作者", platformName: "稀土掘金技術社群", indexURL: "https://juejin.cn/user/3897092103223517")

上述程式碼中，我們在Body中呼叫CardView構件，並給宣告的引數賦值。

由於身份卡片背景顏色為white白色，因此在白色背景顏色看不到卡片效果，我們可以填充一個帶有顏色的背景，以便於突出白色卡片，如下程式碼所示：

``` ZStack { Color(red: 246 / 255, green: 247 / 255, blue: 255 / 255) .edgesIgnoringSafeArea(.all)

CardView(platformIcon: "icon_juejin", title: "移動端簽約作者", platformName: "稀土掘金技術社群", indexURL: "https://juejin.cn/user/3897092103223517")

} ```

上述程式碼中，使用ZStack堆疊檢視容器將CardView和Color顏色進行堆疊疊加，實現顏色疊加效果。Color顏色部分，使用edgesIgnoringSafeArea忽略安全邊界修飾符修飾，將顏色填充整個頁面。

這裡值得注意的是，堆疊檢視中的控制元件的先後順序決定了堆疊的層級，Color顏色在前，CardVIew檢視在後，便實現了Color顏色作為背景顏色。

我們建立多幾個卡片看看效果，如下圖所示：

專案小結

至此，電子名片的基礎卡片內容就已完成基礎的部分了。

在本章中，我們學習瞭如何使用佈局容器建立介面樣式，包括HStack橫向佈局容器、VStack縱向佈局容器、ZStack堆疊佈局容器，並實現這些容器進行控制元件之間的佈局，達到整理頁面元素的效果。以及還學習了一個新的控制元件Spacer填充空間控制元件，常用於配合佈局容器填充空白的空間。

而本章的重點是瞭解如何使用“構件”這一程式設計方式，這一程式設計方式在實際開發中經常會使用，可以有效地減少和規範程式碼。

下一章，我們繼續來學習如何建立資料模型來進一步完善這個專案，請保持期待吧～

版權宣告

本文為稀土掘金技術社群首發簽約文章，14天內禁止轉載，14天后未獲授權禁止轉載，侵權必究！

「其他文章」
「」
「」