Jetpack Compose Material3 の ListItem で設定画面を秒でつくる

実際、秒、ってことないけども。

まあまあ簡単で見た目も綺麗にできます。

Jetpack Compose Material3 の ListItem を使います。


@Composable
fun ListItem(
    headlineContent: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    overlineContent: (@Composable () -> Unit)? = null,
    supportingContent: (@Composable () -> Unit)? = null,
    leadingContent: (@Composable () -> Unit)? = null,
    trailingContent: (@Composable () -> Unit)? = null,
    colors: ListItemColors = ListItemDefaults.colors(),
    tonalElevation: Dp = ListItemDefaults.Elevation,
    shadowElevation: Dp = ListItemDefaults.Elevation
): Unit


👉 androidx.compose.material3  |  Android Developers

Card を利用して、設定項目をグループ分けします。

👉 Card  |  Jetpack Compose  |  Android Developers

以下のようなレイアウト構成。


SettingScreen
  LazyColumn
    Card - Group
      ListItem - Clickable
      ListItem - Switch
      ListItem - Checkbox
    Card
      ListItem - Clickable
      ListItem - Switch
      ListItem - Checkbox
    ...

こう書けました。

こんな感じです。

Material3 って、今では結構使えるんですね!

Android のアーキテクチャで何が Google に「強く推奨」されているか図で理解する

👉 Recommendations for Android architecture  |  Android Developers

分かりやすいドキュメントなのでさらに分かりやすくなるように図にしてみます。

 

🤔 Layered Architecture


UI Layer
  |
Coroutine
  |
DataL Layer
  |
Repository

👉 Layered architecture - Recommendations for Android architecture  |  Android Developers

 

🤔 UI Layer


UI Layer
  UDF
  AAC ViewModel
  Lifecycle
  User Event

👉 UI layer - Recommendations for Android architecture  |  Android Developers

 

🤔 ViewModel


ViewModel
  Depencencies
  Coroutine Flow
  State Holder

👉 ViewModel - Recommendations for Android architecture  |  Android Developers

 

🤔 Lifecycle


Lifecycle
  LifecycleObserver

👉 Lifecycle - Recommendations for Android architecture  |  Android Developers


 

🤔 Handle dependencies


Constructor Injection
Container

👉 Handle dependencies - Recommendations for Android architecture  |  Android Developers

 

🤔 Test


ViewModel
Data Entity (Repository + DataSource)
FakeData
StateFlow

👉 Test - Recommendations for Android architecture  |  Android Developers

 

🤔 まとめ

しれっと、公式リファレンスも分かりやすく更新されていて驚きました。

👉 【Android】アーキテクチャーとして Google が推奨していること #Kotlin - Qiita

【SwiftUI + SwiftData】MVVMパターンを考えたときに

SwiftUI ベースに MVVM のパターンを考えたとき。

Apple と Orange の子 View があるとして、こういう感じで認識していましたけども MVVM。

1つの View に対して、1つの ViewModel でライフサイクルは同期している。

その View の子の View に対しては親の ViewModel を渡したり、差し込んでいく。

著名な公開されているコードを見てると、こういう形が多いように見えるし、そのほうが書きやすいように思える。

世の中そんな流れですかね。

どうなんですかね。

ModelContext てそんな子に向けてのツールですよね。

どこかなんかいい参考記事ないですかね。

まあ、ざっくりの話なんですけども。