聊聊 Jetpack Compose 的 “状态订阅&自动刷新” -- mutableStateListOf

Jekpack Compose "状态订阅&自动刷新" 系列:

【 聊聊 Jetpack Compose 的 "状态订阅&自动刷新" - - MutableState/mutableStateOf 】

【 聊聊 Jetpack Compose 的 "状态订阅&自动刷新" - - remember 和重组作用域 】

【 聊聊 Jetpack Compose 的 "状态订阅&自动刷新" - - 有状态、无状态、状态提升?】

【 聊聊 Jetpack Compose 的 "状态订阅&自动刷新" - - mutableStateListOf 】


讲任何一个新的主题或者知识点,习惯性的从 Demo 开始,比如:

kotlin 复制代码
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,如果换成别的类型,行不行?肯定可以,不用想。

kotlin 复制代码
fun <T> mutableStateOf(
    value: T,  // 泛型参数
    policy: SnapshotMutationPolicy<T> = structuralEqualityPolicy()
): MutableState<T> = createSnapshotMutableState(value, policy)

比如 Int 类型:

kotlin 复制代码
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        var num by mutableStateOf(1)

        setContent {
            Text(
                text = "当前数值:$num",
                Modifier.clickable {
                    num++
                }
            )
        }
    }
}

代码不做解释了,直接看效果:

比如:List 类型

kotlin 复制代码
// num 类型:MutableList<Int>
// mutableStateOf 类型:MutableState<MutableList<Int>>
var nums by mutableStateOf(mutableListOf(1, 2, 3))

我们在代码里面用起来:

kotlin 复制代码
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 块文字")
                }
            }
        }
    }
}

运行:

现在我们稍微改下代码:

kotlin 复制代码
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() 的调用,所以不会出发自动刷新的操作。

为了验证是不是因为没有重组,我们可以验证下:

kotlin 复制代码
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 重新给换了不就行了,试试:

kotlin 复制代码
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 的数据变化!

我们可以像下面这样申明:

kotlin 复制代码
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)  // 这就是最终的写法

这个时候我们就可以优化下代码了:

kotlin 复制代码
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 的数据变化!

kotlin 复制代码
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")
                }
            }
        }
    }
}

运行:

相关推荐
x02414 天前
Android Room(SQLite) too many SQL variables异常
sqlite·安卓·android jetpack·1024程序员节
alexhilton17 天前
深入理解观察者模式
android·kotlin·android jetpack
Wgllss17 天前
花式高阶:插件化之Dex文件的高阶用法,极少人知道的秘密
android·性能优化·android jetpack
上官阳阳20 天前
使用Compose创造有趣的动画:使用Compose共享元素
android·android jetpack
沐言人生24 天前
Android10 Framework—Init进程-15.属性变化控制Service
android·android studio·android jetpack
IAM四十二1 个月前
Android Jetpack Core
android·android studio·android jetpack
王能1 个月前
Kotlin真·全平台——Kotlin Compose Multiplatform Mobile(kotlin跨平台方案、KMP、KMM)
android·ios·kotlin·web·android jetpack·kmp·kmm
alexhilton1 个月前
让Activity更加优雅地跳转
android·kotlin·android jetpack
沐言人生1 个月前
Android10 Framework—Init进程-11.客户端操作属性
android·android studio·android jetpack
沐言人生1 个月前
Android10 Framework—Init进程-9.服务端属性值初始化
android·android studio·android jetpack