【筆記】使用 ViewModel 的小範例

    implementation "androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1"
    implementation "androidx.compose.runtime:runtime-livedata:1.3.3"

class AppViewModel: ViewModel() {
    private val _count = MutableLiveData<Int>(0)

    val count: LiveData<Int>
        get() = _count

    fun addCount(){
        _count.value = _count.value?.plus(1)
    }

    private val _name = MutableLiveData<String>()

    val name: LiveData<String>
        get() = _name

    fun updateName(name: String){
        _name.value = name
    }
}

(by) viewModels() 是一個 exctnsion function，它可以傳回 ComponentActivity 的 ViewModel ，以下利用它來建立此程式的 viewModel。若是在 @Composable function 內，也可以透過 (=) viewModel() 取得或新創 ViewModel 。

class MainActivity : ComponentActivity() {
    private val appViewModel: AppViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyAppTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    MyApp(appViewModel = appViewModel)
                }
            }
        }
    }
}

@Composable
fun MyApp(appViewModel: AppViewModel){
    val count = appViewModel.count.observeAsState()
    val counter = remember { mutableStateOf(0) }

    val name = appViewModel.name.observeAsState()
    val name2 = remember { mutableStateOf("") }

    Column(modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "${count.value}")
        Text(text = counter.value.toString())
        Spacer(modifier = Modifier.height(10.dp))
        Button(onClick = {
            appViewModel.addCount()
            counter.value++
        }) {
            Text(text = "點我增加數字")
        }

        Divider(modifier = Modifier.height(5.dp))
        name.value?.let { Text(text = it) }
        Text(text = name2.value)

        TextField(value = name2.value,
            onValueChange = {
                name2.value = it
                appViewModel.updateName(it)
            }
        )
    }
}