アンドロイドJetpack

モデル- View - ViewModel(MVVM)は、ビューが特定のモデルプラットフォームに依存しないように、ビジネスロジックまたはバックエンドロジック(モデル)の開発からGUIのビューの分離を容易にするソフトウェアアーキテクチャパターンです.MVVMのViewModelは、オブジェクトが簡単に管理されて、提示されるような方法でモデルからデータオブジェクトを公開するのに責任があります.この点において、ViewModelはビューより多くのモデルである.そして、ビューの表示論理の全てでない場合、大部分を扱う.ViewModelは、Mediatorパターンを実装し、ビューによってサポートされているユースケースのセットの周りのバックエンドロジックへのアクセスを整理することができます.
私は、これらの3つの層を示している小さなサンプルと一緒にJetpack Composeで互いに関連するサンプルを入れました.プロパティ/メソッド名以外には、オブジェクトのどれも他のものについて何も知りません.各層は完全に他の独立して構築することができます.

サンプルモデル

import java.util.*

data class User(
    var id: UUID,
    var name: String
)

サンプルビューモデル
これは、ビューと対話するために必要なものをすべて含むべきです.たった今、それは2人のメンバーを含みます:ユーザーとaddUser機能.ビューモデルでユーザーのコレクションの状態を維持するために、mutablestatelistOfを使用していることに注意してください.

import androidx.compose.runtime.*
import androidx.lifecycle.ViewModel

class UserViewModel : ViewModel() {
    private val _users = mutableStateListOf<User>()

    val users: List<User>
        get() = _users

    fun addUser(user: User) {
        _users.add(user)
    }
}

サンプルビュー
そして今、ビュー.これらはデータの表示方法を定義するDataTemplateです.ViewModelは構成変更を生き抜くので、あなたはあなたの構成コードをホストする活動または断片ライフサイクルに対処することなく、UIに関連した状態とイベントをカプセル化することができます.

@Composable
fun UserView() {
    val vm by remember { mutableStateOf(UserViewModel()) }
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Users") },
                actions = {
                    IconButton(onClick = {
                        vm.addUser(User(UUID.randomUUID(), "User"))
                    }) {
                        Icon(Icons.Filled.Add, null)
                    }
                })
        },
        content = {
            Column(modifier = Modifier.padding(16.dp)) {
                LazyColumn(modifier = Modifier.fillMaxHeight()) {
                    items(vm.users) {
                        Column {
                            Text(it.name)
                            Text("${it.id}")
                        }

                    }
                }
            }
        }
    )
}

さらに、次のようにグローバルな状態を維持するために、UIモデルツリーをさらにアップグレードすることができます.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val vm = UserViewModel()
        setContent {
            MaterialTheme {
                UserView(vm)
            }
        }
    }
}

@Composable
fun UserView(vm: UserViewModel) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Users") },
                actions = {
                    IconButton(onClick = {
                        vm.addUser(User(UUID.randomUUID(), "User"))
                    }) {
                        Icon(Icons.Filled.Add, null)
                    }
                })
        },
        content = {
            Column(modifier = Modifier.padding(16.dp)) {
                LazyColumn(modifier = Modifier.fillMaxHeight()) {
                    items(vm.users) {
                        Column {
                            Text(it.name)
                            Text("${it.id}")
                        }

                    }
                }
            }
        }
    )
}