前節で簡単にSwiftUIの画面作りに触れました。今節では作成したオブジェクトに触れたときの動作、つまり オブジェクトのインタラクション を扱っていきます。今回は Button です。その名の通り押せるボタンを作れます。

  • SFSwiftUI01-4.swiftpm を開く (サンプルコード)

  • 押して反応するButtonオブジェクトをつくる

    • 1つめのブロックに押した時の処理を書く
      • print( “押しました” ) を追加
        • print( 値 ) : デバッグコンソールに値を出力
    • 2つめのlabelブロックにボタンの見た目を書く
      • 今回は見た目にTextをつかう

コード

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Button { 
                print( "押しました" )
            } 
            label: {
                Text( "ボタン" )
            }
        }
    }
}

結果

swiftui_1_4_1_1.png

printの出力とシミュレータ実行

printは処理が行われているかを確認するのにとても便利ですがXcodeのプレビューでは動作しません(Swift Playgroundsでは動作します)。そこでMacではiOS シミュレータでの実行をお勧めします。

  • シミュレータや実機での実行

    • 画面左上の▷ボタンを押すことで実行可能
    • 実行先は右上の画像の場所なので確認すること

  • シミュレータや実機での実行停止

    • 実行中の時▷ボタンの側に□ボタンが表示される
    • □ボタンを押す. しばらくすると停止する

(Xcode) シミュレータの選択と実行

swiftui_1_4_1_2.png

(Xcode) 別ウィンドウでシミュレータが立ち上がっている様子

swiftui_1_4_1_3.png