前回の記事
前回の記事をまだ見てない人はそちらから
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 から。