SwiftUIのチュートリアルを試す(Button) - 2

ContentViewに表示してもっと動的にサイコロを使えるようにして行きます。

struct ContentView: View {

    var body: some View {
        
        Text("Hello")
        
        
    }
}

のText()を

        VStack {

            Text("Dice Roller")

                .font(.largeTitle.lowercaseSmallCaps())

        }

        .padding()

にして変更します。そして事前に作ったDiceView()をForEachを使ってこの場合3つ表示させます。

 VStack {
            Text("Dice Roller")
                .font(.largeTitle.lowercaseSmallCaps())
 
            HStack {
                ForEach(1...3, id: \.self) { _ in
                   DiceView()
                }
            }
        }

実行すると

これを好きな数、1から3個のサイコロを自由に追加、削除できるようにします。

まず変数を用意します。即時変更できるように@Stateをつけます。

@State private var numberOfDice: Int = 1

数字の上限の部分を変数に変更します。

ForEach(1...numberOfDice, id: \.self) { _ in
　　　　DiceView()
}

これで準備が出来たので変更するボタンを設置します。

Removeボタン(削除)

numberOfDice -= 1

Add Dice(追加)

 numberOfDice += 1 

このままで実行すると

これを直すためには削除する場合は"1"以下にならないように、ボタンを使えないようにする。

 .disabled(numberOfDice == 1)

Add Dice(追加)では上限を3個にして、それを超える場合はこれもボタンを使えないようにします。

.disabled(numberOfDice == 3)

ここまでの全体です。

struct ContentView: View {
    @State private var numberOfDice: Int = 1

    var body: some View {    
        VStack {         
            Text("Dice Roller")
                .font(.largeTitle.lowercaseSmallCaps())
            HStack {
                ForEach(1...numberOfDice, id: \.self) { _ in        
                    DiceView() 
                }  
            }
            HStack {     
                Button("Remove Dice") {  
                    numberOfDice -= 1
                }
                .disabled(numberOfDice == 1)
        
                Button("Add Dice") { 
                    numberOfDice += 1 
                }
                .disabled(numberOfDice == 3)
            }
             .padding()
        }
        .padding()
    }
}