Swiftをはじめよう！ 5

Swift.org

続きをやっていきます。

次は今作った"select"に入る文字を、ボタンを押すことでいろんなスポーツの名前を定義している配列からランダムに取り出す仕組みを作ります。

ボタンは

Button("Try again") {
    // ここにボタンを押したら行う動作を書きます。
}

で"Try again"と文字が書かれたボタンが表示され、このボタンを押した時にはコメントの場所に書かれた動作を実行します。そして

.buttonStyle(.borderedProminent)

このモディファイアで青バックの白文字表示になります。

ここで全体の構造を見ておきます。

VStack {
　　// "Why not try…" text　　　・・・　　文字
　　// Inner VStack with icon and activity name　・・・　画像と文字
　　// New button code　・・・　ボタン
}

VStackを使って3つの部品を縦に並べています。2つ目の部品に当たる画像はさらにVStackを使って丸の中に画像を入れたものの下に文字を追加していきます。

それではランダムに変数"selected"に配列からら選んで代入するようにコードを追加していきます。

selected = activities.randomElement()

となり、配列activitiesからランダムに要素を取り出すコードとなりますが、これを実行した場合にはとエラーとなります。

配列がからの状態についても実装が必要で、"??"を使って空の場合について定義しておきます。

selected = activities.randomElement() ?? "Archery"

もし空なら"Archery"を入れるという命令となります。

これでもエラーとなります。変数が変わったことをこのプロジェクトでは検知出来ずに値の取得ができないとエラーを起こします。

SwiftUIではこれの解決方法として、リアルタイムに変更する変数には

@state

をつけることで対応できます。

@State var selected = "Baseball"

property wrapperという仕組みを使ったものになります。

参考

SwiftUIと宣言的UI

これでボタンを押してランダムに表示が変わるようになりました。

全体のコードは

struct ContentView: View {
    
    var activities = ["Archery", "Baseball", "Basketball", "Bowling", "Boxing", "Cricket", "Curling", "Fencing", "Golf", "Hiking", "Lacrosse", "Rugby", "Squash"]

    @State var selected = "Baseball"
    
    var body: some View {
        
        VStack {
            Text("Why not try…")
                .font(.largeTitle.bold())

            VStack {
                Circle()
                    .fill(.blue)
                    .padding()
                    .overlay(
                        Image(systemName: "figure.\(selected.lowercased())")
                            .font(.system(size: 144))
                            .foregroundColor(.white)
                    )

                Text("\(selected)!")
                    .font(.title)

            }
            
            Button("Try again") {
                selected = activities.randomElement() ?? "Archery"
            }
            .buttonStyle(.borderedProminent)

        }

    }
}

#Preview {
    ContentView()
}

これで

参考サイトと同じようにボタンを押せばいろんなスポーツの画像、文字に変わるようになりました。