聊聊 Jetpack Compose 的 “状态订阅自动刷新” -- mutableStateListOf
Jekpack Compose “状态订阅&自动刷新” 系列：
【 聊聊 Jetpack Compose 的 “状态订阅&自动刷新” - - MutableState/mutableStateOf 】
【 聊聊 Jetpack Compose 的 “状态订阅&自动刷新” - - remember 和重组作用域 】
【 聊聊 Jetpack Compose 的 “状态订阅&自动刷新” - - 有状态、无状态、状态提升？】
【 聊聊 Jetpack Compose 的 “状态订阅&自动刷新” - - mutableStateListOf 】
【 聊聊 Jetpack Compose 的 “状态订阅&自动刷新” - - 你真的了解重组吗？】
讲任何一个新的主题或者知识点，习惯性的从 Demo 开始，比如：
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
var name by mutableStateOf("Hi, Compose")
setContent {
Text(name)
}
}
}
这段代码已经熟的不能再熟了，如果我们用 by mutableStateOf 初始化一个变量，那 name 就会变成一个被 Compose 自动订阅的变量。
我们前面所有的例子，都是用 by mutableStateOf 包了一个 String，如果换成别的类型，行不行？肯定可以，不用想。
fun <T> mutableStateOf(
value: T, // 泛型参数
policy: SnapshotMutationPolicy<T> = structuralEqualityPolicy()
): MutableState<T> = createSnapshotMutableState(value, policy)
比如 Int 类型：
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
var num by mutableStateOf(1)
setContent {
Text(
text = "当前数值：$num",
Modifier.clickable {
num++
}
)
}
}
}
代码不做解释了，直接看效果：
比如：List 类型
// num 类型：MutableList<Int>
// mutableStateOf 类型：MutableState<MutableList<Int>>
var nums by mutableStateOf(mutableListOf(1, 2, 3))
我们在代码里面用起来：
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
var nums by mutableStateOf(mutableListOf(1, 2, 3))
setContent {
Column {
for (num in nums) {
Text("第 $num 块文字")
}
}
}
}
}
运行：
现在我们稍微改下代码：
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
var nums by mutableStateOf(mutableListOf(1, 2, 3))
setContent {
Column {
Button(onClick = {
nums.add(nums.last() + 1)
}) {
Text("List 加 1")
}
for (num in nums) {
Text("第 $num 块文字")
}
}
}
}
}
代码很简单：我们添加了一个 Button，每次点击后，nums 会添加一个值，比最有一个值大 1。
运行：
？？？没生效啊！为什么？
我们先来考虑一个问题，mutableStateOf 原理是什么？前面的问题我们说过，可以回忆一下：
mutableStateOf 之所以可以对变量进行订阅和刷新，主要是因为内部的 get() 和 set() 方法加了钩子，或者说它的 set() 方法是赋值！是改变了变量的指向，它是直接把对象可替换了，但在我们这个代码里面 nums 仅仅是改变了它内部的状态：
对这块如果有点懵，可以看【 聊聊 Jetpack Compose 的 “状态订阅&自动刷新” - - MutableState/mutableStateOf 】 这篇文章。
所以，它不会出发 setValue() 的调用，所以不会出发自动刷新的操作。
为了验证是不是因为没有重组，我们可以验证下：
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
var nums by mutableStateOf(mutableListOf(1, 2, 3))
var refresh by mutableStateOf("强制刷新")
setContent {
Column {
Text(refresh, Modifier.clickable { refresh = "刷新完成"})
Button(onClick = {
nums.add(nums.last() + 1)
}) {
Text("List 加 1")
}
for (num in nums) {
Text("第 $num 块文字")
}
}
}
}
}
我们添加了一个 Text() 组件，改变 refresh 的值，那么理论上它就会带着整个重组作用域内的组件全部刷新，包括 List。
运行：
成功刷新 List！
现在我们就很清楚了，mutableStateOf 没法对 List 类型的对象没法实现类似 String、Int 的自动订阅及刷新，那有没有解决办法？
上面我们说过了，问题的根本原因是 List 只是内部的变化，而不是它自己本身对象的变化，那我们直接在内部操作完后直接把 List 重新给换了不就行了，试试：
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
var nums by mutableStateOf(mutableListOf(1, 2, 3))
setContent {
Column {
Button(onClick = {
// nums 重新赋值
nums = nums.toMutableList().apply {
add(nums.last() + 1)
}
}) {
Text("List 加 1")
}
for (num in nums) {
Text("第 $num 块文字")
}
}
}
}
}
运行：
但这样写就会显得很奇怪，我是明白原理了，我这样也是可以实现正常的刷新，但不太对劲：既然对于 String、Int 这些类型，Compose 提供了 mutableStateOf，难道对于 List 这种这么常用的类型，就没有一个 mutable*** 的函数给我们用？
有，它就是 mutableStateListOf！它可以观测到内部 List 的数据变化！
我们可以像下面这样申明：
var nums by mutableStateListOf(mutableListOf(1, 2, 3)) // 有红线标注，写法错误
// mutableStateListOf 是内部元素被观测，而不是它本身被观测，所以我们要把 `by` 换成 `=`
var nums = mutableStateListOf(mutableListOf(1, 2, 3))
// `var` 也可以换成 `val`
val nums = mutableStateListOf(mutableListOf(1, 2, 3))
// mutableStateListOf 本身就代表一个可观测的 List，所以 mutableListOf 也可以去除
val nums = mutableStateListOf(1, 2, 3) // 这就是最终的写法
这个时候我们就可以优化下代码了：
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val nums = mutableStateListOf(1, 2, 3)
setContent {
Column {
Button(onClick = {
nums.add(nums.last() + 1)
}) {
Text("List 加 1")
}
for (num in nums) {
Text("第 $num 块文字")
}
}
}
}
}
运行：
提到 List，我们就会想到 Map，同样 Map 也提供了一个 mutableStateMapOf！它也可以观测到内部 Map 的数据变化！
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val maps = mutableStateMapOf(1 to "One", 2 to "Two")
setContent {
Column {
Button(onClick = {
maps[3] = "Three"
}) {
Text("Maps 加 1")
}
for ((key, value) in maps) {
Text("$key 对应 value: $value")
}
}
}
}
}
运行：
