聊聊 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")
                }
            }
        }
    }
}

运行:

相关推荐
一航jason7 天前
Android Jetpack Compose 现有Java老项目集成使用compose开发
android·java·android jetpack
帅次8 天前
Android CoordinatorLayout:打造高效交互界面的利器
android·gradle·android studio·rxjava·android jetpack·androidx·appcompat
IAM四十二11 天前
Jetpack Compose State 你用对了吗?
android·android jetpack·composer
Wgllss12 天前
那些大厂架构师是怎样封装网络请求的?
android·架构·android jetpack
x0241 个月前
Android Room(SQLite) too many SQL variables异常
sqlite·安卓·android jetpack·1024程序员节
alexhilton1 个月前
深入理解观察者模式
android·kotlin·android jetpack
Wgllss1 个月前
花式高阶:插件化之Dex文件的高阶用法,极少人知道的秘密
android·性能优化·android jetpack
上官阳阳1 个月前
使用Compose创造有趣的动画:使用Compose共享元素
android·android jetpack
沐言人生1 个月前
Android10 Framework—Init进程-15.属性变化控制Service
android·android studio·android jetpack
IAM四十二1 个月前
Android Jetpack Core
android·android studio·android jetpack