【SwiftUI入門】Viewとモディファイア
この記事の目次
Viewとは
Viewとは見た目を作るための部品のことです。
Viewの例としては、文字列を表示するためのTextや
画像を表示するためのImageなどがあります。
モディファイアとは
モディファイアとはViewの見た目や機能を変えるためのものです。
Viewに対して『.〇〇』と記述します。
例えば、初期状態ではImageというViewにimageScaleというモディファイアがついています。
これによりImageの大きさを変えることができます。
また、モディファイアは書き連ねていくことで、複数追加することができます。
初期状態ではImageにはimageScaleの外にforegroundColorというモディファイアが追加されています。
これによりImageの色を指定することができます。
実際に使ってみる
それでは、実際にモディファイアを使ってみましょう。
今回はTextにforefroundColorというモディファイアをつけて文字の色を変えてみよう思います。
まずは、Xcodeを開いてください。
Xcodeを開いたら、『Create a new Xcode project』を押してください。
『iOS』,『App』を押して、『Next』を押しましょう。
するとプロジェクトの詳細を聞かれます。
Product Nameに『ChangeTextColor』と入力して、
『Next』を押しましょう。
すると保存する場所が聞かれるので、
保存したい場所を指定して、『Create』を押しましょう。
するとプロジェクトが作られます。
それでは、文字列の色を変更してみましょう。
Text(“Hello, world!”)の下に
| .foregroundColor(Color.green) |
と記述しましょう。
コードについて説明します。
このコードはText(“Hello, world”)にforegroundColor(.green)というモディファイアを追加するといった内容です。
foregroundColorを追加したViewはforagroundColorの引数に入れた色に変わります。
今回は『.green』を入れたので
文字の色を緑色に変えます。
プレビューを見てみると、文字の色が緑色になっているはずです。
『.green』の部分を変えることで文字色を変えることができます。
試しにコードを変えて文字色を紫に変更してみましょう。
『.green』と記述されている部分を
『.purple』に変更しましょう。
すると文字の色が紫になりますね。
このようにモディファイアを使えば、Viewの見た目や機能を変えることができます。