運用「堆疊」和「形狀」編寫內容

步驟 1

將 VStack 變更為 ZStack (深度堆疊)。

步驟 2

開啟顯示區清單 ，然後捲動到列表底部的膠囊、圓形、橢圓形、矩形和圓角矩形。

步驟 3

為 ZStack 加入形狀，藉此製作頭部。使用 RoundedRectangle 製作方形臉孔，或用 Capsule 製作較圓滑的臉型。

秘訣

圓角矩形須設定邊角半徑。

步驟 1

在膠囊下方加入空白行，然後打開修飾符列表。

步驟 2

搜尋 frame，然後點一下加入程式碼。

步驟 3

填寫大略的高度和寬度數值，即可建立頭部。

步驟 1

在 frame 下方加入空白行，然後打開修飾符列表。

步驟 2

在搜尋列中輸入 foregroundStyle。點一下並加入程式碼。

步驟 3

選取括號內的程式碼並打開色彩列表，即可變更色彩。

步驟 4

點一下任何色彩，把色彩加入程式碼。

秘訣

你也可以選擇建立自訂色彩。選取其中一個程式碼片段，然後按照自己的膚色編輯值。

步驟 1

運用之前學到的方法加入矩形當作脖子，然後利用 frame 修飾符調整大小。

步驟 2

在矩形下方加入空白行，然後在修飾符列表中搜尋 offset。

步驟 3

點一下 offset 並編輯值，將形狀往下移。你可以刪除任何未用到的參數。

步驟 4

把脖子移到頭部下方。

選取矩形和所有新增的修飾符。將程式碼剪下後貼到深度堆疊上方。將色彩變更為和頭部相同的色彩。

步驟 5

運用之前學到的知識加入移動設定，正確調整脖子在畫面內的位置，然後設定色彩。

步驟 1

加入圓形，當作頭髮。使用 frame 調整大小，使形狀大致符合或稍微大於你的頭部。

步驟 2

在圓形下方加入空白行。輸入 .trim，並在程式碼完成功能顯示該項目後按 Return 鍵。

注意，trim 修飾符必須直接連結在形狀下方。

步驟 3

嘗試搭配各種值，調整裁剪起始和結束位置。

步驟 4

調整瀏海或短髮造型的區域。繼續加入任何髮型的剩餘元素。

秘訣

如果某堆疊內含超過十個顯示區，則會顯示「Extra arguments at position…」警告訊息。

若發生這種情況，請按照此處顯示內容為元素分組。

步驟 1

在程式碼中找到製作頭部所用的形狀。在形狀下方加入空白行，然後在修飾符列表中搜尋 shadow。

步驟 2

編輯陰影的半徑。嘗試搭配各種值，看看效果如何。

秘訣

你也可以為陰影加入色彩。