Compose学习记录(3)： ViewModel数据驱动更新组件

keeng20082024-11-22 10:47

前面已经学习过在 Composable 函数中保存UI的状态，然后修改状态来更新UI控件的内容。如：

kotlin 复制代码

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    val expand = rememberSaveable { mutableStateOf(false) }
    // ...使用expand控制是否展开
    // 修改expand的值 expand.value = !expand.value
}

业务状态会放在ViewModel中， ViewModel的状态可能是在后台更新的，当它的属性变动时，如何通知界面更新呢。

使用ViewModel, 在gradle中添加:

gradle 复制代码

implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1")

ViewModel中定义会变动的属性：

kotlin 复制代码

class MainPageVModel : ViewModel() {
    private val _acceState = MutableStateFlow(false)
    val acceState: StateFlow<Boolean> = _acceState.asStateFlow()

    private fun onSecondCall(ix: Long) {
        // 查询后台状态，更新到 _acceState中
        val isOpenService = isAccessibilitySettingsOn(AppSession.getContext())
        _acceState.value = isOpenService
    }
}

在UI界面中监听属性，即时更新界面元素
在Activity中创建ViewMode;

kotlin 复制代码

private val viewModel: MainPageVModel by viewModels()

在Compose函数中访问ViewModel

kotlin 复制代码

val viewModel: MainPageVModel = viewModel()

在同一个Activity中创建的组件，它们其实只有一个实例共用。

Compose中监听属性的变动：

kotlin 复制代码

@Composable
fun MainPage(viewModel: MainPageVModel = viewModel(), modifier: Modifier = Modifier) {
    val ctx = LocalContext.current
    val opend by viewModel.acceState.collectAsState()
    Log.i("MainPage", "View rebuilded! opend: ${opend}")
    // ...使用 opend 来修改属性的显示
}

查看它的具体实现
它主要是使用的collectAsState()来绑定和读取待更新的数据，它也是一个 @Composable函数，查看它的调用。
collectAsState()-> produceState() -> remember()
最后还是到了之前使用的remember(),这些都是@Composable函数，猜测它会在内部监听了State<>的变动，然后触发重新构建了界面节点。

对于其它类型的：

对于 LiveData，需要将 LiveData 转换为 State；

对于 Flow，需要将 Flow 转换为 State。

参考：

https://developer.android.google.cn/codelabs/basic-android-kotlin-compose-viewmodel-and-state?hl=zh-cn#5