Edited at

SwiftUIのチュートリアル日記2


この記事は何?

前回からの続きです。


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

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


  1. コードを変更する

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

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


  • ソースエディタ

  • キャンバス、またはインスペクタ


手順1

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


エディタから反映されたコード例

// 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) 修飾子が削除されたことを確認する。