#iOS | #Android ファショ通

ModelView を作成することで

「ロジック部分を外出し」

して View の見通しを良くすることができます。

同時に @State も外部クラスに任せますか。

@Observable final class StateHolder {
  var text = ""
}

var stateHolder = StateHolder()

TextField("text", text: Binding(
  get: { stateHolder.text },
  set: { newValue in stateHolder.text = newValue })
)

var stateHolder = StateHolder()

@Bindable var sh = stateHolder
TextField("text", text: $sh.text)

複雑なデータ処理ロジック部分も置いてしまうと、

実質の今どきの ModelView となりますね。

基本、ModelView は View に対して 1:1 なことを忘れないでください。

👉 【SwiftUI】@State と 単方向データフロー 
👉 【SwiftUI】ModelView は 単なる StateHolder なのか ? - ModelView の役割 

プロパティをいじるのに便利ですが。

実行の順序ですよ。

これは、予想通りですが。

Text("hello")
  .onAppear { 
    print("Text onAppear") 
  }
  .onChange(of: true, initial: true) { 
    print("Text onChange") 
  }
  .task {
    print("Text task") 
  }

// Text onAppear
// Text onChange
// Text task

記述の順序にかかわらず task() は最後に実行されます。

Text("hello")
  .task { print("Text task") }
  .onAppear { print("Text onAppear") }
  .onChange(of: true, initial: true) { print("Text onChange") }

// Text onAppear
// Text onChange
// Text task

onAppear() と .onChange(initial: true) は記述順。

Text("hello")
  .task { print("Text task") }
  .onChange(of: true, initial: true) { print("Text onChange") }
  .onAppear { print("Text onAppear") }

// Text onChange
// Text onAppear
// Text task

では、View のネスト。

Group {
  VStack {
    Text("hello")
      .task { print("Text task") }
      .onChange(of: true, initial: true) { print("Text onChange") }
      .onAppear { print("Text onAppear") }
  }
  .task { print(" VStack task") }
  .onChange(of: true, initial: true) { print(" VStack onChange") }
  .onAppear { print(" VStack onAppear") }
}
.task { print("Group task") }
.onChange(of: true, initial: true) { print("Group onChange") }
.onAppear { print("Group onAppear") }

// Text onChange
// Text onAppear
// VStack onChange
// VStack onAppear
// Group onChange
// Group onAppear
// Text task
// VStack task
// Group task

task() は 最上位の View の表示後にまとめて実行されることに驚きです。

■ まとめ

- ネストの深いものから順番に実行される。
- onAppear(), onChange(initial: true) は記述順に実行される。
- task() は最上位 View の表示後にまとめて実行される。

結構、手が止まるんですよね、ここらへん。