11月25日(火)3、4コマ目

今日、やったこと

SwiftUIでGUI作成

今日のホワイトボード

SwiftでGUIアプリケーションを作成するには

フレームワークが2種類用意されている。

図　GUIのために用意されているフレームワーク

今回はSwiftUIで作成。

ContentView.swiftについて

画面作成はContentView.swiftにて行う。

なんとなくやっていることはわかると思うが、よくよく見ると、謎が多い。

ContentView構造体をよみとく①

VIewプロトコルを準拠。

bodyの型はViewプロトコルを準拠した何か(some)。

bodyはコンピューテッドプロパティ。

図　ContentView構造体とbodyプロパティ

ContentView構造体をよみとく②　bodyプロパティ

bodyプロパティはいろいろと省略されている。

bodyプロパティはgetterのみ。

よって、

• set { }は省略
• get{ }も省略

さらに、getterの処理は値を返すだけなので、returnも省略。

VStack構造体のインスタンスを生成し、padding()関数の戻り値を返す。

図　bodyプロパティが返す値

ContentView構造体をよみとく③　VStack構造体のインスタンス生成

bodyプロパティのgetterにて、VStack構造体のインスタンスを生成している。

が、よく見ると今まで見てきたインスタンス生成と異なる。

VStack構造体のイニシャライザは引数が３つある。

第1、第2引数はデフォルト値あり -> 設定不要

第3引数はクロージャー式

イニシャライザの最後の引数がクロージャーなら、クロージャー式は( )内でなく、( )の外で指定できる（トレーリングクロージャー）。

図　VStackのイニシャライザ

ContentView構造体をよみとく④　VStack構造体イニシャライザのcontent引数

イニシャライザのcontent引数には、{ }内の処理が渡される。

{ }内では、

• Image構造体のインスタンス生成
• Text構造体のインスタンス生成

が行われている。が、書き方としてはおかしいような気がする。

引数contentには、@ViewBuilderが付与されいている。

@ViewBuilderはViewBuilder構造体が実体。

ViewBuilder構造体には、引数が1個から10個のbuildBlock()関数がextensionにて追加されている。

今回は引数2個のbuildBlock()関数が実行される。

Image構造体とText構造体のインスタンスはこのbuildBlock()関数の引数として渡される。

VStackは

タテに要素(部品)を並べる。

ヨコに並べるには、HStackを使う。

図　VStack、HStack

サンプルアプリケーションを作る

下図のように、１つのテキスト、3つのボタンの画面を作る。

図　作成する画面

①テキスト、ボタンを配置

以下でテキストとボタンが配置される。

②テキスト、ボタンの設定

幅や高さ等を設定。

③ボタンクリック時の処理追加

表示される値を管理するためのindicateプロパティを追加。

ボタンクリック時に、indicateプロパティを変更させる。

④見た目と処理を分割

ボタンクリック時の処理内容が多い場合、Button構造体のイニシャライザの引数で指定すると可読性が落ちる。

そこで、見た目はContentView構造体、処理記述用に新たにController構造体を追加する。

Controller.swift

処理担当

Controller.swift

処理担当

次回は

集中講義でiOSで動くアプリケーション作成。