[SwiftUI] ボタンで実行する

構造体のプロパティを更新するために利用する@Stateの理解が大事

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
struct ContentView: View {
    var body: some View {
        Button(action: {
            let num = Int.random(in: 0...100)
            print(num)
        }){
            Text("Random Button")
                .font(.largeTitle)
                .frame(width: 280, height: 60, alignment: .center)
                .foregroundColor(Color.white)
                .background(Color.pink)
                .cornerRadius(15, antialiased: true)
             
        }
    }
}

初期値をセットする
L スコープ内にあるようにbodyの外に定義する
　　L selfはimmutableなので、変更可能な変数にするために、宣言のvar numの前に@Stateを付ける　※SwiftUIを使用しない場合はmutatingをつける

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@State var num:Int = 0
 
var body: some View {
    VStack {
        Button(action: {
            num = Int.random(in: 0...100)
            print(num)
        }){
            Text("Random Button")
                .font(.largeTitle)
                .frame(width: 280, height: 60, alignment: .center)
                .foregroundColor(Color.white)
                .background(Color.pink)
                .cornerRadius(15, antialiased: true)
             
        }
        Text("\(num)")
            .font(.largeTitle)
            .padding()
    }
}

ボタンの簡易的な書式

1
2
3
4
5
6
7
8
9
10
11
12
13
VStack {
    Button("Tap"){
        msg = "ありがとう"
    }
    .font(.headline)
    .foregroundColor(.white)
    .background(
        Capsule()
            .foregroundColor(.green)
            .frame(width:80, height:30)
    )
    Text(msg).padding()
}

ボタン名を引数labelで指定する書式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@State var num:Int = 0
 
var body: some View {
    HStack {
        Text("\(num)")
            .font(.system(size: 50))
            .padding(.trailing)
        Button(action: { num += 1}, label: {
            Text("Tap").font(.largeTitle)
        })
        .frame(width: 200, height: 80, alignment: .center)
        .border(Color.gray, width: 1)
    }
}

乱数とシャッフル

1
2
3
4
5
6
7
8
9
10
11
12
for _ in 1 ... 5 {
    let num = Int.random(in: 1 ... 10)
    print(num)
}
for _ in 1 ... 5 {
    let num = Double.random(in: 0 ..< 1)
    print(num)
}
for _ in 1 ... 5 {
    let num = Bool.random()
    print(num)
}

配列などのコレクションからランダムに選択
L item! としてオプショナルをアンラップする必要がある

1
2
3
4
5
6
7
8
9
10
let colors = ["green", "red", "blue", "pink", "orange"]
for _ in 1 ... 5 {
    let item = colors.randomElement()
    print(item!)
}
let letters = "ABCDEFGHIJKLMN"
for _ in 1 ... 5 {
    let item = letters.randomElement()
    print(item!)
}

ジャンケン

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let janken = ["グー", "チョキ", "パー"]
@State var te = ""
 
var body: some View {
    VStack {
        Button("ジャンケン"){
            te = janken.randomElement()!
        }
        .foregroundColor(.white)
        .background(
            Capsule()
                .foregroundColor(.blue)
                .frame(width: 120, height: 40)
        )
        Text(te)
            .font(.largeTitle)
            .padding()
    }
}

@Stateは状態を変更するって意味ね。言われてみれば簡単だな。