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

語言: 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，移動端簽約作者，稀土掘金技術社區，http://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: "http://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: "http://juejin.cn/user/3897092103223517")

} ```

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

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

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

項目小結

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

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

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

下一章，我們繼續來學習如何創建數據模型來進一步完善這個項目，請保持期待吧～

版權聲明

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

「其他文章」
「」
「」