Swiftをはじめよう! 4
丸の中に画像が入りました。次に文字を追加してみましょう。文字は
Text("Archery!")
を入れます。 Circle()の下に入れてみると、
var body: some View {
Circle()
Text("Archery!")
}
これで実行しても文字が表示されることはありません(モディファイアは外しています)。このように2つの部品をうまく表示させるために
が用意されています。早速使って実行してみます。
VStack {
Circle()
.fill(.blue)
.padding()
.overlay(
Image(systemName: "figure.archery")
.font(.system(size: 144))
.foregroundColor(.white)
)
Text("Archery!")
.font(.title)
}
これで実行するとうまく表示されました。イラスト入りの丸の下に文字が表示されています。さらにもう一つ"VStack"をつけて文字を追加します。
VStack {
Text("Why not try…")
.font(.largeTitle.bold())
VStack {
Circle()
.fill(.blue)
.padding()
.overlay(
Image(systemName: "figure.archery")
.font(.system(size: 144))
.foregroundColor(.white)
)
Text("Archery!")
.font(.title)
}
}
表示は
となりました。さらに機能をつけていきます。
Bringing it to life
"Archery"だけではなく他のスポーツも表示、提案できる形にしていきます。チュートリアルにある以下のスポーツをランダムに選んで提案できるようにしていきます。
"Baseball", "Basketball", "Bowling", "Boxing", "Cricket", "Curling", "Fencing", "Golf", "Hiking", "Lacrosse", "Rugby", "Squash"
スポーツを選択で切るような仕組みを作っていきます。まずはたくさんあるスポーツをひとまとめに管理するため、"配列"を作って"変数"に代入します。
var activities = ["Archery", "Baseball", "Basketball", "Bowling", "Boxing", "Cricket", "Curling", "Fencing", "Golf", "Hiking", "Lacrosse", "Rugby", "Squash"]
"var"は変数を示す目印で、"activities"はこの変数の名前です。名前をつけていろんな操作をしていきます。
そして選んだものを入れておく変数を作っておきま。
var selected = "Archery"
今の段階では"Archery"を入れておきます。
次にこの変数を使えるような仕組みを作っていきます。
表示する文字には
"\(selected)!"に中身を変更します。文字の中に変数を入れる場合には
とします。画像も変えたいので画像を表示するコードも変更します。
"selected.lowercased()"とすると選んだものを小文字に変換して表示することが出来ます。例えばBaseballを選んだ場合
となるので、
という解釈になります。これで変数を使って文字の変更ができるしくみが出来ました。
この記事が気に入ったらサポートをしてみませんか?