この記事は何？

前回からの続きです。

セクション2: テキストビューをカスタムする

2つの方法で、ビューの見え方をカスタマイズする

1. コードを変更する
2. インスペクタを使用して利用可能なものを見つけてコードを書く

どの開発ツールを使用しても、コードは常に更新される。

• ソースエディタ
• キャンバス、またはインスペクタ

手順1

インスペクターを使ってテキストビューを変更してみる

// １つ目の構造体（コンテンツとレイアウト）
struct ContentView: View {
    var body: some View {
        Text("Turtle Rock")  // 文字が変更
        .font(.title)        // 太さや大きさがタイトルのスタイルに
        .color(.green)       // 色が緑に
    }
}

プレビュー上にある挨拶メッセージを、コマンドキーを押しながらクリックする。
すると、構造化されたエディタがポップオーバーするので、Inspect を選択する。
このポップオーバーには、ユーザーが選択したビューごとに異なるカスタム可能なアトリビュートが表示される。

手順2

インスペクタから、テキストを「Turtle Rock」に変更する。
"Turtle Rock" は、アプリに最初に表示されるランドマーク名です。

手順3

フォント修飾子を .Title に変更する。
システムフォントがテキストに適用され、ユーザーの好みの設定に最適化される。

手順4

SwiftUIビューをカスタマイズするには、修飾子 メソッドを呼び出す。
コードを編集して、.color（.green） 修飾子を追加する。
修飾子はビューやその他のプロパティを変更するためにビューをラップする。
各修飾子は新しいビューを返す。
一般的に、複数のモディファイアを縦に積み上げて、チェーン化する。

コードこそがビューの実態。
インスペクタ上のカスタマイズと一致するように、Xcodeがコードを更新する。

手順5

コードエディタの Text declaration をCommandキーを押しながらクリックする。
インスペクタが開くので、ポップオーバーから Inspect を選択する。
_ Color_ ポップアップメニューをクリックする。
Inherited を選択して、テキストの色をもう一度黒に戻す。

手順6

Xcodeがコードを自動更新して、color（.green） 修飾子が削除されたことを確認する。