【SwiftUI】公式チュートリアルをやってみよう #2 | TextVeiwをカスタマイズする

TextVeiwをカスタマイズする

Inspectorの表示

まずは、TextViewをカスタマイズするためのInspectorの表示方法について紹介致します。プレビュー画面のTextViewにカーソルを合わせ、Commandキーを押した状態で左クリックします。

編集内容を選択するポップオーバーが表示されますので、Show SwiftUI Inspector…を選択します。

すると、以下のようなInspectorポップオーバーが表示されると思います。

Inspectorから、テキストやフォント、文字色などを変更することができます。

テキスト、フォント、色の変更

ではまずは、テキストを変更してみましょう。Inspectorに表示されているTextを、「ありがとう」に変更してみます。Textの入力をEnterで確定させると、プレビュー表示が変更され、コードの内容も自動で書き変わると思います。

続いて、フォントや文字色も変更してみましょう。

FontをTitleに、ColorをGreenに変更してみました。コードに、font(.title)と、foregroundColor(Color.green)が追加されていると思います。

コードエディタからの修正

最後に、コードエディタからInspectorを表示し、修正を行ってみたいと思います。

Text()にカーソルを合わせ、Commandキーを押した状態で左クリックします。すると、ポップオーバーが表示されますので、Show SwiftUI Inspector…を選択します。

Inspectorが表示されましたら、ColorをInheritedに変更します。Inheritedは、何も設定されていな状態です。

文字色が黒に戻りましたね。コードも、文字色を設定するコードが削除されていると思います。

今回のチュートリアルはここまでとなります。ありがとうございました。