Jetpack Compose key的演示

904 阅读2分钟

「这是我参与2022首次更文挑战的第22天,活动详情查看:2022首次更文挑战

list

返回给定元素的新只读列表。返回的是一个可序列化的列表

用conpost演示

两个文本

首先写两个文本视图来演示,一个变表示键,一个表示值

@Composable
private fun BeanPreview(bean: Bean) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
    ) {
        Text(text =  bean.key, modifier = Modifier.weight(1f))
        Text(
            text = bean.value,
            modifier = Modifier.weight(1f)
        )
    }
}

实体类

data class Bean(
    val key: String,
    val value: String
)

定义一个list并插入数据

private val beans = listOf(
    Bean("key1", "value1"),
    Bean("key2", "value2"),
    Bean("key3", "value3"),
)

接着就是遍历显示啦

@Composable
private fun ListExample() {
    for (bean in beans) {
        key(bean.key) { BeanPreview(bean = bean) }
    }
}

用compose实现list有没有感觉原生的Listview简单多了 8f35af0c0f24339425f25459a8441cf.jpg

map

mapOf返回具有指定内容的新只读映射,以对列表的形式给出,其中第一个值是键,第二个值是值。 如果多个对具有相同的键,则生成的映射将包含这些对中最后一个的值。 映射的条目按指定的顺序进行迭代的哦。

to得到了一个包含A,B数据的Pair对象 那么我们用到的to到底是个什么东西呢?to其实并不是一个关键字,而是依赖于kotlin提供的一个高级语法糖特性infix函数实现的一种语法结构

private val relationships = mapOf(
    Bean("child_1", "hi") to Bean("parent_1", "你好"),
    Bean("child_2", "hi") to Bean("parent_2", "你好"),
    Bean("child_3", "hi") to Bean("parent_3", "你好"),
)

key是一个可组合的实用程序,用于在组合中对执行块进行分组或设置密钥。这有时是控制流内部正确性所必需的,这可能会导致在组合期间多次执行给定的可组合调用。

Compose中值的状态的改变会使调用的组合发生重组,但是有时候重组会发生在我们并不想重组的地方。常见的比如列表,如果其中一个item数据发生改变导致整个列表重新刷新,这样不符合完美主义者的风格,因此这时候就需要使用key来解决这个问题刷新问题

键的值不需要是全局唯一的,只需要在组合时的键调用中是唯一的。
遍历

普通的唯一键

@Composable
private fun UniqueKeyExample() {
    for ((child, parent) in relationships) {
        key(parent.key) {
            BeanPreview(child)
            BeanPreview(parent)
        }
    }
}

复杂对象的唯一键

key(parent.key to child.key)遍历可以得到更正确的唯一键

@Composable
fun CorrectUniqueKeyExample() {
    for ((child, parent) in relationships) {
        key(parent.key to child.key) {
            BeanPreview(child)
            BeanPreview(parent)
        }
    }
}

ce6adf6724283d70877e63b9b8173e8.jpg