Swiftをはじめよう！ 6

Swift.org

Adding some polish

よりわかりやすく使い勝手の良いコードにするために少し改善を加えていきます。

アクセル制御をすることによってより安全にわかりやすくなるということです。

Apple は、ローカル ビュー ステートに常にプライベート アクセス制御をマークすることを推奨しています。 これは、大規模なプロジェクトでは、あるビューのローカル状態を別のビューから読み取るコードを誤って作成することができないことを意味し、コードを理解しやすくするのに役立ちます。

変数の前に" private"をつけます。

@State private var selected = "Baseball"

スポーツを表示する丸の色が今は全て青色なので違う色で表示させることでわかりやすくします。変数宣言です。

var colors: [Color] = [.blue, .cyan, .gray, .green, .indigo, .mint, .orange, .pink, .purple, .red]

図の下の丸の色をランダムに変えていく仕組みです。配列で取得できないば

?? .blue

Circle()
    .fill(colors.randomElement() ?? .blue)

ボタンの場長を変えるそうえs２スペースをあけます。"Spacer()"を使って、

VStack {
　　// current Circle/Text code
}

Spacer()

Button("Try again") {
　　// ...
}

アニメーションをつけます。(withAnimation追加)

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

さらにアニメーションのスピードなどをコントロールする命令。

状態の変化を記録するために変数idを作ります。状態が変化するので@Stateをつけて先に宣言している変数selectedの下に配置します。

@State private var id = 1

ボタンに機能の追加します。

Button("Try again") {
    withAnimation(.easeInOut(duration: 1)) {
        selected = activities.randomElement() ?? "Archery"
        id += 1
    }
}
.buttonStyle(.borderedProminent)

withAnimation(.easeInOut(duration: 1))

一秒かけて画像が入った丸がいろんなスポーツに切り替わる時にアニメションにより表示が始まり、終わっていきます。

さらに、

.transition(.slide)
.id(id)

をつけてやると、スライドができるようになります。つける場所は、

VStack {
　　Text("Why not try…")
　　　　VStack {
　　　　　　Circle()
　　　　　　Text("\(selected)!")
　　　　}
　　　　.transition(.slide)
　　　　.id(id)
}

2つ目のVStackのコードのあとにつけます。うまく配置できると、ボタンを押すたびにスライドするようにまります。

変数"id"をつけることにより画像などの情報が管理されスライドするときにその情報を更新していきます。Viewの更新には"id"を忘れずに。

SwiftUIのViewがなぜか更新されないときは `id(_:)` を付与すると解決するかもしれない - Qiita

[SwiftUI] ViewのIdentityと再描画を意識しよう

全体コードです。

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

    @State private var selected = "Baseball"
    @State private var id = 1

    
    var colors: [Color] = [.blue, .cyan, .gray, .green, .indigo, .mint, .orange, .pink, .purple, .red]
    
    var body: some View {
        
        VStack {
            Text("Why not try…")
                .font(.largeTitle.bold())

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

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

            }
            .transition(.slide)
            .id(id)
            
            Button("Try again") {
                withAnimation(.easeInOut(duration: 1)) {
                    selected = activities.randomElement() ?? "Archery"
                    id += 1
                }
            }
            .buttonStyle(.borderedProminent)
        }
    }
    
}