Compose可编辑列表拖拽功能的ViewModel状态实现方案咨询

问题根源 #

拖拽时每次位置变动都触发数据库更新，再通过Flow把数据推回UI，频繁的状态刷新直接导致UI卡顿；但如果在ViewModel里单独维护一份列表，又会出现ViewModel本地数据和仓库数据库数据不一致的问题。正确的思路应该是：先让UI立即响应拖拽操作，再异步同步到数据库，同时解决双数据源的一致性问题。

具体解决步骤 #

1. 拆分状态：本地临时状态+持久化数据库状态 #

在ViewModel里加个MutableStateFlow专门存拖拽时的本地临时列表，和原来的数据库Flow合并展示——有临时列表就用临时的，没有就用数据库的，这样既保证拖拽时UI即时更新，平时又和数据库保持同步。

// ViewModel里新增本地临时状态
private val _localCategoryItems = MutableStateFlow<List<CategoryState>>(emptyList())
private val localCategoryItems: StateFlow<List<CategoryState>> = _localCategoryItems

// 重构原来的uiState，合并两个数据源
val uiState: StateFlow<CategoriesUiState> =
    combine(subsPreferences, categoryRepository.getEditableCategoriesStream(), _key, localCategoryItems) { subsPrefs, dbCategories, key, localItems ->
        val isFeatureEnabled = subsPrefs.enableCategoriesFeature
        if (dbCategories.isEmpty()) {
            CategoriesUiState.Empty(isFeatureEnabled = isFeatureEnabled)
        } else {
            // 优先用本地临时列表（如果存在且长度和数据库一致），否则用数据库数据
            val displayItems = if (localItems.isNotEmpty() && localItems.size == dbCategories.size) {
                localItems
            } else {
                dbCategories.map { CategoryState.fromCategory(it) }.toImmutableList()
            }
            CategoriesUiState.Categories(
                categoryItems = displayItems,
                isFeatureEnabled = isFeatureEnabled
            )
        }
    }.stateIn(
        scope = viewModelScope,
        started = SharingStarted.WhileSubscribed(5_000),
        initialValue = CategoriesUiState.Loading
    )

2. 拖拽操作：先更UI，再同步数据库 #

拖拽位置变化时，先在内存里交换列表项，更新本地临时状态让UI立刻动起来，然后再异步调用仓库去改数据库。如果数据库操作失败，还能把本地状态回滚回去，避免UI和数据库不一致。

override fun onPositionChanged(categoryIndexFrom: Int, categoryIndexTo: Int) {
    val currentState = uiState.value
    if (currentState is CategoriesUiState.Categories) {
        // 第一步：内存里交换项，即时更新UI
        val updatedItems = currentState.categoryItems.toMutableList().apply {
            add(categoryIndexTo, removeAt(categoryIndexFrom))
        }.toImmutableList()
        _localCategoryItems.value = updatedItems

        // 第二步：异步同步数据库
        viewModelScope.launch {
            try {
                val fromItem = currentState.categoryItems[categoryIndexFrom]
                val toItem = currentState.categoryItems[categoryIndexTo]
                categoryRepository.swapCategories(
                    categoryOrderFrom = fromItem.order_,
                    categoryOrderTo = toItem.order_
                )
            } catch (e: IndexOutOfBoundsException) {
                // 操作失败就回滚本地状态
                _localCategoryItems.value = currentState.categoryItems
            }
        }
    }
}

拖拽结束后，清空本地临时状态，确保后续UI完全和数据库同步：

override fun onDragCompleted() {
    // 清空本地临时列表，让UI重新对齐数据库状态
    _localCategoryItems.value = emptyList()
}

3. 进阶优化：批量同步数据库（可选） #

如果拖拽时位置变动特别频繁，每次都调用数据库会有大量IO操作，拖慢性能。可以改成拖拽开始时记录初始列表，结束后一次性算清楚所有项的order_变化，再批量更新数据库：

// ViewModel里新增变量存拖拽初始状态
private var initialDragItems: List<CategoryState>? = null

override fun onDragStarted() {
    val currentState = uiState.value
    if (currentState is CategoriesUiState.Categories) {
        initialDragItems = currentState.categoryItems
    }
}

override fun onDragCompleted() {
    val initialItems = initialDragItems ?: return
    val finalItems = _localCategoryItems.value.takeIf { it.isNotEmpty() } ?: return

    // 计算每个项需要更新的order_（假设order_是从1开始的连续整数）
    val orderUpdates = mutableListOf<Pair<Long, Int>>()
    finalItems.forEachIndexed { index, item ->
        val originalOrder = initialItems.find { it.id == item.id }?.order_ ?: item.order_
        if (originalOrder != index + 1) {
            orderUpdates.add(item.id to (index + 1))
        }
    }

    // 批量更新数据库
    viewModelScope.launch {
        try {
            categoryRepository.updateCategoriesOrder(orderUpdates)
        } catch (e: Exception) {
            // 失败就回滚本地状态
            _localCategoryItems.value = initialItems
        } finally {
            initialDragItems = null
            _localCategoryItems.value = emptyList()
        }
    }
}

// 拖拽过程中只更新本地状态，不用碰数据库
override fun onPositionChanged(categoryIndexFrom: Int, categoryIndexTo: Int) {
    val currentState = uiState.value
    if (currentState is CategoriesUiState.Categories) {
        val updatedItems = currentState.categoryItems.toMutableList().apply {
            add(categoryIndexTo, removeAt(categoryIndexFrom))
        }.toImmutableList()
        _localCategoryItems.value = updatedItems
    }
}

核心逻辑总结 #

• 用本地临时状态兜底拖拽即时反馈，数据库状态保证数据持久化一致性，两者结合解决卡顿和双数据源问题
• 拖拽过程只更内存，异步同步数据库，异常时回滚本地状态
• 批量同步能进一步减少数据库操作，提升拖拽流畅度

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