如何实现可维持顺序的Compose MutableStateMap？类似LinkedHashMap

Compose的SnapshotStateMap基于HashMap实现，默认是无序的，但UI场景中经常需要像LinkedHashMap那样维持插入或访问顺序。这里提供两种可行方案：

一、自定义基于LinkedHashMap的SnapshotState实现（推荐） #

直接实现一个继承自SnapshotMutableMap的有序版本，内部用LinkedHashMap存储，完全兼容Compose的快照机制，无需额外维护状态，修改时自动触发UI重组。

实现代码 #

import androidx.compose.runtime.*
import androidx.compose.runtime.snapshots.SnapshotMutableMap
import java.util.*

@Stable
class SnapshotStateLinkedHashMap<K, V> private constructor(
    private val map: LinkedHashMap<K, V>
) : SnapshotMutableMap<K, V>, MutableMap<K, V> by map {

    // 提供多种构造方法，匹配LinkedHashMap的参数
    constructor() : this(LinkedHashMap())
    constructor(initialCapacity: Int) : this(LinkedHashMap(initialCapacity))
    constructor(initialCapacity: Int, loadFactor: Float) : this(LinkedHashMap(initialCapacity, loadFactor))
    constructor(initialCapacity: Int, loadFactor: Float, accessOrder: Boolean) : this(LinkedHashMap(initialCapacity, loadFactor, accessOrder))
    constructor(original: Map<out K, V>) : this(LinkedHashMap(original))

    override fun put(key: K, value: V): V? {
        return map.put(key, value).also { oldValue ->
            if (oldValue != value) {
                Snapshot.current?.recordWrite(this)
            }
        }
    }

    override fun remove(key: K): V? {
        return map.remove(key).also { removedValue ->
            if (removedValue != null) {
                Snapshot.current?.recordWrite(this)
            }
        }
    }

    override fun putAll(from: Map<out K, V>) {
        val hasChanges = from.any { (key, value) -> map[key] != value } || from.keys.any { !map.containsKey(it) }
        map.putAll(from)
        if (hasChanges) {
            Snapshot.current?.recordWrite(this)
        }
    }

    override fun clear() {
        if (map.isNotEmpty()) {
            map.clear()
            Snapshot.current?.recordWrite(this)
        }
    }

    override fun getValue(key: K): V = map.getValue(key)
    override fun setValue(key: K, value: V) = put(key, value)
}

// 提供便捷的创建函数，和mutableStateMapOf用法一致
fun <K, V> mutableStateLinkedMapOf(): SnapshotStateLinkedHashMap<K, V> = SnapshotStateLinkedHashMap()
fun <K, V> mutableStateLinkedMapOf(vararg pairs: Pair<K, V>): SnapshotStateLinkedHashMap<K, V> =
    SnapshotStateLinkedHashMap(pairs.toMap())
fun <K, V> mutableStateLinkedMapOf(accessOrder: Boolean = false): SnapshotStateLinkedHashMap<K, V> =
    SnapshotStateLinkedHashMap(LinkedHashMap(accessOrder = accessOrder))

使用方式 #

和mutableStateMapOf完全一样，遍历的时候会自动遵循LinkedHashMap的顺序：

val orderedMap = remember { mutableStateLinkedMapOf("a" to "1", "b" to "2") }

LazyColumn {
    items(orderedMap.entries.toList()) { entry ->
        Text("${entry.key}: ${entry.value}")
    }
}

二、SnapshotStateList + SnapshotStateMap组合（备选） #

如果不想自定义类，可以用一个SnapshotStateList存储键的顺序，搭配SnapshotStateMap存储值。但需要手动维护两者的同步，避免出现不一致。

示例代码 #

val keyOrder = remember { mutableStateListOf<String>() }
val valueMap = remember { mutableStateMapOf<String, String>() }

// 添加元素时同步更新列表和Map
fun addEntry(key: String, value: String) {
    if (!valueMap.containsKey(key)) {
        keyOrder.add(key)
    }
    valueMap[key] = value
}

// 删除元素时同步移除
fun removeEntry(key: String) {
    keyOrder.remove(key)
    valueMap.remove(key)
}

// UI遍历键列表，从Map中取值
LazyColumn {
    items(keyOrder) { key ->
        Text("${key}: ${valueMap[key]}")
    }
}

这种方案的缺点是需要手动处理所有增删改操作的同步，容易遗漏导致UI显示异常，仅适合简单场景。

内容的提问来源于stack exchange，提问作者quealegriamasalegre