實戰教程·元宇宙來了,準備好你的電子名片了嗎?(一)

語言: CN / TW / HK

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天后未獲授權禁止轉載,侵權必究!

「其他文章」