はじめに
前回からの続きで、SwiftUIのチュートリアル入門になります。
元記事サイト
![](https://tatsunori-morita.com/wp-content/uploads/cocoon-resources/blog-card-cache/8c8f6e4facf0020077138aac5f26c7f0.jpg)
Step1
まずはインスペクターを使ってText viewを変更していきます。
プレビュー画面でHello SwiftUI
と表示されているText viewを、Command
ボタンを押しながらクリックします。するとポップバーが表示されるので、その中のShow SwiftUI Inspector
を選択します。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-1.png)
Step2
次にプロパティ一覧が表示されるので、その中のText
欄の文字をTurtle Rock
に変更し、ポップバー外をクリックすると、Text viewへ変更が反映されます。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-2.png)
ちなみにText viewをクリックして、画面右側に表示されるインスペクターバーにも、
ポップバーと同じものが表示れています。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-3-1024x696.png)
Spte3
Font
のドロップダウンをクリックしてTitle
を選択します。
(ちなみにSwiftUIのviweを変更するためのメソッドをModifierというようです。)
実際のフォントサイズはユーザ端末の設定で変わるようになっています。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-4.png)
Step4
次はコードを直接編集していきます。.padding()
を foregroundColor(.green)
に変更します。
するとプレビューに表示されている文字が緑色に変更されました。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-5.png)
Step5
今度はコード上のText("Turtle Rock")
のText
部分をCommand
を押しながらクリックします。
するとポップバーが表示されるので、Show SwiftUI Inspector
を選択し、Color
のドロップダウンからInherited
を選択。コード上の.foregroundColor(.green)
が削除されてText viewの文字が黒色に戻ります。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-6.png)
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-7.png)
Step6
ちゃんと.foregroundColor(.green)
が消えましたね。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-8.png)
まとめ
UIKitからいろいろと変更されており、慣れるまで時間がかかりそうですね。
覚えることがたくさんありそうなので、じっくり進めていこうかと思います。
コメント