Android Jetpack Compose usando ViewModel

1. Por qué ViewModel es indispensable

Hemos aprendido que RememberSavable puede guardar el estado cuando se gira la pantalla y el sistema recicla la actividad actual. Resulta que ViewModel hace este trabajo, entonces, ¿por qué no se usa RememberSavable para reemplazar ViewModel? Por ejemplo, en el ejemplo de contador que usamos en el artículo anterior, puede usar RememberSavable para guardar el estado o puede usar viewModel para guardar el estado. Sin embargo, esto es solo una demostración. En un proyecto real, la lógica de negocios no se puede simplemente sumar. La suma, la resta y la resta son a menudo mucho más complicadas. Si todo el código se coloca en un Stateful Composable, las responsabilidades de la interfaz de usuario no estarán claras. Después de todo, la principal responsabilidad de nuestro Composable es mostrar el Interfaz de usuario.

Por lo tanto, bajo una lógica empresarial compleja, podemos mencionar el estado con estado en ViewModel para su administración, de modo que Stateful Composable se convierta en Stateless Composable. Al pasar parámetros a diferentes ViewModels, se puede reemplazar la lógica empresarial específica, lo que aumenta en gran medida la reutilización y la capacidad de prueba.

2 Uso de ViewModel en la interfaz de usuario de Compose

Tomando prestado el ejemplo de contador anterior, aquí utilizamos la combinación de Compose UI y ViewModel para implementar un ejemplo de contador. El código es el siguiente:

class ComposeCounterAct : ComponentActivity() {
    
    
    override fun onCreate(savedInstanceState: Bundle?) {
    
    
        super.onCreate(savedInstanceState)
        setContent {
    
    
            MyComposeTheme {
    
    
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
    
    
                    TestCounter()
                }
            }
        }
    }

    @Composable
    fun TestCounter(){
    
    
        val viewModel:ComposeCounterViewModel = viewModel()
        CounterComponent(viewModel.counter.value,viewModel::increment,viewModel::decrement)
    }

    @Composable
    fun CounterComponent(
        counter: Int, // 重组时传入当前需要显示的计数
        onIncrement: () -> Unit,// 回调点击加号的事件
        onDecrement: () -> Unit // 回调单击减号的事件
    ) {
    
    
        Column(modifier = Modifier.padding(16.dp)) {
    
    
            Text(
                "$counter",
                Modifier.fillMaxWidth(),
                textAlign = TextAlign.Center
            )

            Row {
    
    
                Button(
                    onClick = {
    
     onDecrement() },
                    modifier = Modifier.weight(1f)
                ) {
    
    
                    Text("-")
                }

                Spacer(Modifier.width(16.dp))
                Button(
                    onClick = {
    
     onIncrement() },
                    modifier = Modifier.weight(1f)
                ) {
    
    
                    Text("+")
                }
            }
        }
    }
}

class ComposeCounterViewModel:ViewModel(){
    
    
    private val _counter = mutableStateOf(0)
    val counter: State<Int> = _counter

    fun increment(){
    
    
        _counter.value = _counter.value + 1
    }

    fun decrement(){
    
    
      if(_counter.value>0){
    
    
          _counter.value = _counter.value -1
      }
    }
}

Como se muestra en el código anterior, el uso de es básicamente el mismo Compose UIque el ViewModelde la vista tradicional. En Compose, viewModel()el método es un Composablemétodo. Su función es Composablecrear ViewModel,TestCounterun tipo de ViewModel a través del método viewModel() ComposeCounterViewModel. Este ViewModel contiene el contador. .

注意：在Composable中使用viewModel()方法需要添加依赖： implementation('androidx.lifecycle:lifecycle-viewmodel-compose:2.6.2') ，否则会提示方法找不到。

El método viewModel() aquí obtendrá la instancia de ViewModel del ViewModelStore más reciente. Este ViewModelStore puede ser una actividad o un fragmento. Si la instancia de ViewModel no existe, cree una nueva y guárdela en ViewModelStore. Mientras ViewModelStore no se destruya, la instancia de ViewModel que contiene siempre sobrevivirá. Por ejemplo, el ViewModel creado por Composable en una Actividad a través del método viewModel() lo mantiene la Actividad actual. ViewModel siempre existirá antes de que se destruya la Actividad, y cada llamada a viewModel() devolverá una instancia, por lo que no necesitamos recordar el caché.

注意： 调用viewModel()方法的Composable无法进行预览，若需要进行预览，可以从持有ViewModel的Composable中将需要预览的部分提取成StateLess组件，如文中的CounterComponent组件。