スタックと図形を使って構成する

手順1

VStack（縦方向スタック）をZStack（奥へスタック）に変更します。

手順2

ビューのリストを開き、一番下までスクロールして、カプセル、円形、楕円、長方形のフレーム、角丸四角形の図形を見つけます。

手順3

ZStackに図形を追加します。これが頭のパーツになります。四角い顔には角丸四角形を、丸い顔にはカプセルを使うとよいでしょう。

ヒント

角丸四角形では角の半径（Corner Radius）を指定する必要があります。

手順1

図形のコードの下に空白の行を追加してから、修飾子のリストを開きます。

手順2

「frame」または「フレーム」を検索し、タップしてコードに追加します。

手順3

高さと幅のおおよその値を入力して、頭のパーツを作成します。

手順1

frameの下に空白の行を追加してから、修飾子のリストを開きます。

手順2

検索バーに「foregroundStyle」または「前景のスタイル」と入力し、タップしてコードに追加します。

手順3

色を変更するには、丸かっこ内のコードを選択し、色のリストを開きます。

手順4

好きな色をタップしてコードに追加します。

ヒント

オプションでオリジナルの色を作ることもできます。右のコードスニペットのいずれかを選び、自分の肌のトーンに合うように値を編集します。コードスニペットとは、コードの一部を再利用可能な形で抜き出した、短いコードのまとまりのことです。

手順1

これまでに学んだ知識を活用して、首のパーツにあたる長方形を追加し、frame修飾子を使ってサイズを調整します。

手順2

長方形のコードの下に空白の行を追加してから、修飾子のリストで「offset」または「オフセット」を検索します。

手順3

「オフセット」（offset）をタップし、値を編集して図形を下に移動させます。オプションで、使用しないパラメータがある場合は削除してもかまいません。

手順4

首のパーツを頭のパーツの背後に移動させます。

長方形と、長方形に追加した修飾子をすべて選択します。選択したコードをカットして、Zstackの先頭にペーストします。それから、頭のパーツに合わせて首のパーツの色を変更します。

手順5

これまでに学んだ知識を活用して、シャツのパーツを追加し、画面上に正しく配置して色をつけます。

手順1

円形を追加します。これを使って髪型を作ります。frameを使って、追加した円形の幅を頭と同じくらいか、少し大きめに設定します。

手順2

円形のコードの下に空白の行を追加します。.trim（切り取り）と入力し、コード補完に項目が表示されたらキーボードのreturnキーをタップします。

trim修飾子は必ず図形のコードのすぐ下に書く必要があります。

手順3

様々な値を試してみて、切り取りの始点と終点を決めます。

手順4

前髪やショートヘアになるパーツの位置を調整します。さらに残りのパーツを追加して、自分の髪型を完成させます。

ヒント

1つのスタック内にビューが11個以上ある場合、「Extra arguments at position…」（…の位置にある引数が多すぎます）という警告メッセージが表示されます。

その場合は、こちらの画像のようにいくつかの要素をグループ化します。

手順1

コード内で頭の図形にあたる記述を見つけます。図形のコードの下に空白の行を追加してから、修飾子のリストで「shadow」または「シャドウ」を検索します。

手順2

シャドウの半径を編集します。様々な値を入れてみて、見え方がどのように変わるか確認します。

ヒント

オプションで、シャドウに色をつけることもできます。