公開日:2020/07/27更新日:2020/08/03
【SwiftUI】公式チュートリアルをやってみよう #2 | TextVeiwをカスタマイズする

SwiftUIは、2019年にAppleが発表した、UIを作成するための新たなフレームワークです。本記事は、公式のチュートリアルを進めてSwiftUIを学ぶシリーズの第2弾です。
第2弾の今回は、InspectorからTextViewをカスタマイズする方法を解説致します。
本記事で進める公式チュートリアルは、Customize the Text Viewです。
本シリーズの記事一覧
目次
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は、何も設定されていな状態です。
文字色が黒に戻りましたね。コードも、文字色を設定するコードが削除されていると思います。
今回のチュートリアルはここまでとなります。ありがとうございました。
関連記事