Swift UI のチュートリアルをする - Part 2: TextのカスタマイズとVStack, HStack

前回の記事

前回の記事をまだ見てない人はそちらから

www.utakata.work

TextVewのカスタマイズ

コードを変更するとCanvasの方も変わるし、Canvasの方で変えるとコードも変わるということらしい。

だが私はmacOSのバージョンが古くてCanvasが使えないので、それはスキップしてコードを直接いじる。そしてビルドボタンを押す。

 struct ContentView: View {
     var body: some View {
-        Text("Hello, World!")
+        Text("Change the World!")
+            .font(.title)
+            .foregroundColor(.green)
     }
 }

これでも問題なく色は変わった。

Stack を使って View を組み合わせる

View をまとめることができるらしい。Vertical Stack と Horizontal Stack があり、水平に並べたり、垂直に並べたりできる。

VStack で Vertical に並べる

        VStack {
            Text("Turtle Rock")
                .font(.title)
            Text("Joshua Tree National Park")
                .font(.subheadline)
        }

VStackのalignmentを指定する

VStackの中身はデフォルトだとセンタリングされているが、左寄せと右寄せもできる。leadingが右寄せで、trailingは左寄せ。

このチュートリアルでは leading にしてみる。右寄せになる。

HStack で Horizontal に並べる

VStack の中身を更に HStack で分ける

        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Text("California")
                    .font(.subheadline)
            }
        }

Spacerを入れる

Specerを入れると横幅マックスまで広がる

        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Spacer()
                Text("California")
                    .font(.subheadline)
            }
        }

.padding()

このチュートリアルでは、一番外がわの VStack に padding をつけることで、左右に空白をもたせている。多分上下にもpaddingがついているのだろうが、見えないのでわからない。

        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Spacer()
                Text("California")
                    .font(.subheadline)
            }
        }.padding()

次回

次回は Section 4 Create a Custom Image View から。