Jetpack Compose无状态组件示例代码和解释 - 传奇开心果 - 沸点 - 掘金

程序员

#每天一个知识点#
Jetpack Compose无状态组件示例代码和解释

Jetpack Compose无状态组件不自带任何状态，状态由外部传入、事件回调向外抛出，UI只负责根据入参渲染，是可复用、易测试的纯UI单元，CMP跨平台组件优先推荐这种写法。

```kotlin
@Composable
fun CounterView(count: Int, onAddClick: () -> Unit) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text(text = "计数：$count", fontSize = 22.sp)
Button(onClick = onAddClick) { Text("点我+1") }
}
}
```

该组件内部没有remember、mutableStateOf，自身不保存数据。count作为只读入参，UI完全随传入值变化；点击动作不处理计数逻辑，仅回调onAddClick交给上层。上层可以是remember本地状态，也可以是ViewModel的StateFlow，组件本身和状态来源解耦。
无状态组件特点：输入相同参数，渲染结果一定相同，符合纯函数思想；方便预览、单元测试，多页面复用不会互相干扰。它只承担视图展示职责，状态和业务交由父层托管，和有状态组件搭配使用：上层做状态持有，下层大量封装无状态UI控件，这是Compose标准分层范式。相比内部带remember的有状态组件，无状态组件可控性更强，跨端维护成本更低。

展开

赞过