SwiftUIのModifier自作のしくみを図解

modifierの自作は処理が入り組んでいるが図解しているものが見当たらなかったので作成。

自作のmodifier

フォアグラウンドの色をランダムに設定する。

struct RandomForegroundModifier: ViewModifier {
    
    let colors: [Color] = [.red, .orange, .yellow, .green, .mint, .teal, .cyan, .blue, .indigo, .purple, .pink, .brown, .gray]
    
    func body(content: Content) -> some View {
        content
            .foregroundColor(colors.randomElement())
    }
}

これを呼び出すのは

Text("Swift")
    .modifier(RandomForegroundModifier())

図解

では図解する。

1と2

Textインスタンス(赤)に対してmodifier(緑)を実行。modifier(緑)はViewのメソッド。色設定の処理を書いたstructのインスタンス(青)を引数で渡す。

3

引数で渡した青のbodyが呼ばれる。その引数のcontentは実質Textインスタンス(赤)。

4

bodyの結果が返される

5と6

それが巡り巡ってはじめのところの結果のViewになる。4から6にかけて小変更があるかもしれないがこの記事の目的よりそこは無視する。

おわりに

図ではmodifier()の中にRandomForegroundModifierを書いたが、実際は別の場所で書かれている。