Genta Hirauchi

公開日: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は、何も設定されていな状態です。

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

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