SwiftUIにおけるPreferenceの基礎概念

Transcript

1. © 2025 Wantedly, Inc. SwiftUIにおける Preferenceの基礎概念 Mobile勉強会#20 ウォンテッドリー×チームラボ×Sansan May.21 2025 - kota minato
2. © 2025 Wantedly, Inc. 自己紹介
3. © 2025 Wantedly, Inc. 話すこと 01 Preferenceとはなにか ? 02 Binding vs Environment vs Preference 03 Wantedlyでの活用事例
4. © 2025 Wantedly, Inc. 話すこと 01 Preferenceとはなにか ? 02 Binding vs Environment vs Preference 03 Wantedlyでの活用事例
5. © 2025 Wantedly, Inc. Preferenceとはなにか? ずばり、SwiftUIにおいて、子Viewから親Viewへ値を伝達する仕組み 通常データは親Viewから子Viewへ流れるがPreferenceを用いると子Viewから親Viewへの一方通行 のデータの受け渡しが可能になる
6. © 2025 Wantedly, Inc. どういったときにPreferenceを使うのか? レイアウト情報やサイズ情報を親Viewに 伝える必要がある場合に有用 もっと具体的には ? ScrollView内の子Viewの位置を取得し、親Viewで制御し たい場合など
7. © 2025 Wantedly, Inc. 話すこと 01 Preferenceとはなにか ? 02 Binding vs Environment vs Preference 03 Wantedlyでの活用事例
8. © 2025 Wantedly, Inc. Binding vs Environment vs Preference Binding、Environment、Preferenceを比較してみる @Environmentは上位View→下位Viewへの一方向の値注入 (広い範囲で共通の値を共有 ) @Bindingは親View→子Viewへの双方向の値注入 (データの保有者は親 View) Preferenceは子View→親Viewへの一方向の値注入 データの矢印の向きが異なります！
9. © 2025 Wantedly, Inc. 話すこと 01 Preferenceとはなにか ? 02 Binding vs Environment vs Preference 03 Wantedlyでの活用事例
10. © 2025 Wantedly, Inc. Wantedlyでの活用事例 下スクロールを検知でボタンを非表示にしてほしい！
11. © 2025 Wantedly, Inc. Wantedlyでの活用事例 実装方針は子Viewのスクロールを検知して親 Viewでボタン を非表示にする処理を行おう！ でもどうやって子Viewから親Viewに通知しよう☹ 画面構成としては親Viewの中に子Viewが入っている！
12. © 2025 Wantedly, Inc. Wantedlyでの活用事例 Preference
13. © 2025 Wantedly, Inc. どうやって実装するのか PreferencesKeyに準拠したstructを作成 • PreferencesKeyに準拠するために必要なのはdefaultValue とreduce。 • defaultValue = 何も入れなかったときの値 • reduce = 子Viewが入れた値を親Viewが受け取るときの変 換処理を書く 今回はOffSetを常に更新して取得したかったので Valueに対してnextValueを加算していま す。
14. © 2025 Wantedly, Inc. どうやって実装するのか • .preference(key: ScrollOffset.self, value: 値 ) 子Viewから親Viewへ値を流す ※ 画面に影響を与えないようにColor.Clearを使用して値を取得します
15. © 2025 Wantedly, Inc. どうやって実装するのか 親Viewで値を受け取る ボタン非表示アニメーションを追加 (詳細は割愛) • .onPreferenceChange(ScrollOffset.self ) {}
16. © 2025 Wantedly, Inc. Wantedlyでの活用事例 うまくできた🎉
17. © 2025 Wantedly, Inc. まとめ • PreferenceはViewの子から親に値を渡す仕組み • PreferenceKeyを実装することによって子 View側で値を入れ親側で .onPreferenceChengeで受け取 ることができる
18. © 2025 Wantedly, Inc. ご清聴ありがとうございまし た！