プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

【SwiftUI】SwiftUIの記法・入門

  • 2020年11月1日
  • 2020年11月2日
  • Swift
  • 159view
  • 1件

SwiftではJavaScriptと同様「;」が必要ない。

テキストの表示

struct ContentView : View {
    var body: some view {
        Text("Hello World")
    }
}

テキストの装飾

各ビューが持つメソッド(モデファイア)を並べて記述していくことでスタイルや文字色などの変更が可能

struct ContentView : View {
    var body: some view {
        Text("Hello World")
            .font(.largeTitle)
            .foregroundColor(Color.red)
    }
}

レイアウト

VStack

先程のビューをラップしてVStackというビューを作ることで、Vertical(垂直方向)に要素を並べることが可能

struct ContentView : View {
    var body: some view {
        VStack {
            Text("Hello World")
                .font(.largeTitle)
                .foregroundColor(Color.red)
            Button(action: {}){
                Text("Button")
            }
        }
    }
}

bodyの型「some」について

Opaque Return Typeと呼ばれており、戻り値の型を抽象的に宣言することができる記法。返すビューがどのような形であっても(TextでもButtonでも)対応できるように、someとしておく。

暗黙のリターン

単一式を返す場合はいつでも省略できる。

プロパティラッパー

プロパティを監視して、ビューを再描画させるような状態管理に関わる構文のこと。プロパティラッパーにはいくつかの属性が用意されているが、以下のようにビューの状態と変数の値を紐づける@Stateというものがある。
Reactに馴染みがあればすんなりはいれそう。

struct ContentView : View {
    @state var labelText = "Hello World"
    var body: some view {
        VStack {
            Text(changeText)
                .font(.largeTitle)
                .foregroundColor(Color.red)
            Button(action: {self.changeText = "Goodbye World"}){
                Text("Button")
            }
        }
    }
}

ファンクションビルダー

メソッドに渡す引数を縦に並べて書くことができる機能

@_functionBuilder
public struct StringBuilder {
    public static func buildBlock(_ a: String, _ b: String) -> String {
        a + b
    }
    public static func buildBlock(_ a: String, _ b: String, _ c: String) -> String {
        a + b + c
    }
}

呼び出し方

@StringBuilder func ab() -> String {
    "あいうえお"
    "かきくけこ"
}
var strA = ab()

@StringBuilder func abc() -> String {
    "あいうえお"
    "かきくけこ"
    "さしすせそ"
}
var strA = abc()