Jetpack Compose LazyColumn单项状态更新未触发重组问题

调试应用时发现，执行单项添加/移除操作时，UIState中的数据（尤其是isAdded字段）会正常更新，但对应的AddableItem组件并不会触发重组。
执行排序操作、输入搜索词（该操作不发起API请求，仅修改TextField绑定的字符串）时UI可正常重组，说明UI本身可以响应UIState的变更。
原本认为只要字段引用发生变更框架就会触发重组，但实际未生效，需要确认问题成因和解决方法。

补充现象：另一个结构几乎一致的页面也存在同类问题：页面包含「全部添加」按钮，当所有项均为已添加状态时按钮会变为「全部移除」，按钮状态存储在对应页面UIState中。执行全量添加/全量移除操作时UI可正常重组，但单个项的添加/移除操作同样不触发重组。特殊情况：当所有项均为已添加状态时移除单个项，按钮状态可正常变更，但后续继续添加项时按钮就会停止响应状态变化。

ViewModel 实现 #

@HiltViewModel 
class AddableItemScreenViewModel@Inject constructor(
    val getAddableItemsUseCase: GetItems,
    val getItemsFromRoomUseCase: GetRoomItems,
    val updateItemCase: UpdateItem,
    savedStateHandle: SavedStateHandle) : ViewModel() {

    private val _uiState = mutableStateOf(UIState())
    val uiState: State<UIState> = _uiState

    private val _title = mutableStateOf("")
    val title: State<String> = _title

    private var getItemsJob: Job? = null

    init {
        savedStateHandle.get<String>(NavigationConstants.TITLE)?.let { title ->
            _title.value = title
        }
        savedStateHandle.get<Int>(NavigationConstants.ID)?.let { id ->
            getItems(id = id.toString())
        }
    }

    fun onEvent(event: ItemEvent) {
        when(event) {
            is ItemEvent.UpdateEvent -> {
                val modelToUpdate = UpdateModel(
                    id = event.source.id,
                    isAdded = event.source.isAdded,
                    name = event.source.name,
                    index = event.source.index
                )
                updateUseCase(modelToUpdate).launchIn(viewModelScope)
            }
            is ItemEvent.QueryChangeEvent -> {
                _uiState.value = _uiState.value.copy(
                    searchQuery = event.newQuery
                )
            }
            is ItemEvent.SortEvent -> {
                val curSortType = _uiState.value.sortType
                _uiState.value = _uiState.value.copy(
                    sortType = if(curSortType == SortType.AS_IT_IS)
                        SortType.ALPHA_NUMERIC
                    else
                        SortType.AS_IT_IS
                )
            }
        }
    }

    private fun getItems(id: String) {
        getItemsJob?.cancel()
        getItemsJob = getItemsUseCase(id)
            .combine(
                getItemsFromRoomUseCase()
            ){ itemsApiResult, roomData ->
                when (itemsApiResult) {
                    is Resource.Success -> {
                        val data = itemsApiResult.data.toMutableList()
// 匹配API返回结果和Room本地数据：如果项已存在Room中则标记为已添加，否则标记为未添加。保证API仅调用一次，所有状态变更都来自Room数据
                        for(i in data.indices) {
                            val source = data[i]
                            val itemInRoomData = roomData.find { it.id == source.id }
                            data[i] = data[i].copy(
                                isAdded = itemInRoomData != null
                            )
                        }
                        _uiState.value = _uiState.value.copy(
                            data = data,
                            isLoading = false,
                            error = "",
                        )
                    }
                    is Resource.Error -> {
                        _uiState.value = UIState(
                            data = emptyList(),
                            isLoading = false,
                            error = itemsApiResult.message,
                        )
                    }
                    is Resource.Loading -> {
                        _uiState.value = UIState(
                            data = emptyList(),
                            isLoading = true,
                            error = "",
                        )
                    }
                }
            }.launchIn(viewModelScope)
    }
}

Composable 页面实现 #

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun AddableItemsScreen(
    itemsViewModel: AddableItemScreenViewModel = hiltViewModel()
) {
    val state = itemsViewModel.uiState.value
    val controller = LocalNavigationManager.current
    val focusManager = LocalFocusManager.current
    val keyboardController = LocalSoftwareKeyboardController.current

    val mainScrollState = rememberLazyListState()
    val focusRequester = remember { FocusRequester() }

    // 页面主体UI
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colors.BackgroundColor)
            .clickable(
                indication = null,
                interactionSource = remember { MutableInteractionSource() }
            ) {
                focusManager.clearFocus()
            },
    ) {
        LazyColumn(
            modifier = Modifier
                .fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
            state = mainScrollState,
        ) {
            item {
                WhiteSpacer(
                    whiteSpacePx = 200,
                    direction = SpacerDirections.VERTICAL
                )
            }
            if (state.isLoading) {
                item {
                    ProgressIndicator()
                }
            }
            if (state.error.isNotEmpty() && state.error.isNotBlank()) {
                item {
                    ErrorText()
                }
            }
            if (state.data.isNotEmpty()) {
                val data = if (state.sortType == SortType.ALPHA_NUMERIC)
                    state.data.sortedBy { it.name }
                else
                    state.data
                data.forEach { source ->
                    if((state.searchQuery.isEmpty() && state.searchQuery.isBlank()) ||
                        (source.name != null && source.name.contains(state.searchQuery, ignoreCase =  true))) {
                        item {
                            AddableItem(
                                modifier = Modifier
                                    .padding(
                                        vertical = dimManager.heightPxToDp(20)
                                    ),
                                text = source.name ?: "",
                                isAdded = source.isAdded ?: false,
                                onItemPressed = {
                                    controller.navigate(
                                        Screens.ItemPreviewScreen.route +
                                                "?title=${source.name}" +
                                                "&id=${source.categoryId}" +
                                                "&isAdded=${source.isAdded}"
                                    )
                                },
                                onAddPressed = {
                                    itemsViewModel.onEvent(ItemEvent.UpdateEvent(source))
                                }
                            )
                        }
                    }
                }
            }
        }
        Column(
            modifier = Modifier
                .align(Alignment.TopStart)
                .background(
                    MaterialTheme.colors.BackgroundColor
                ),
        ) {
            ItemsScreenAppBar(
                title = itemsViewModel.title.value,
                onSortPressed = {
                    itemsViewModel.onEvent(ItemEvent.SortEvent)
                }
            ) {
                controller.popBackStack()
            }
            SearchBar(
                query = state.searchQuery,
                focusRequester = focusRequester,
                placeholder = itemsViewModel.title.value,
                onDeletePressed = {
                    itemsViewModel.onEvent(ItemEvent.QueryChangeEvent(""))
                },
                onValueChanged = {
                    itemsViewModel.onEvent(ItemEvent.QueryChangeEvent(it))
                },
                onSearch = {
                    keyboardController!!.hide()
                }
            )
            WhiteSpacer(
                whiteSpacePx = 4,
                direction = SpacerDirections.VERTICAL
            )
        }
    }
}

状态类定义 #

data class UIState(
    val data: List<ItemModel> = emptyList(),
    val isLoading: Boolean = false,
    val error: String = "",
    val searchQuery: String = "",
    val sortType: SortType = SortType.AS_IT_IS,
)

@Parcelize
data class ItemModel (
    val id: Int? = null,
    var isAdded: Boolean? = null,
    val name: String? = null,
    val index: Int? = null,

    @SerializedName("someSerializedNameForApi")
    var id: Int? = null
): Parcelable

核心问题有三个：

• ItemModel 定义了var修饰的可变属性，Compose 会将包含可变字段的data class判定为不稳定类型。即使替换外层UIState和列表的引用，Compose无法信任不稳定类的属性值比对结果，会跳过对应项的重组。
• LazyColumn渲染列表时使用forEach + item的写法，没有给每个列表项指定唯一稳定key，Compose无法精准追踪列表内单个项的状态变化，仅当列表结构发生明显变更（比如排序改变项顺序、全量替换列表数据）时才会重组所有项。
• ItemModel 中重复定义了两个同名id属性，存在编译冲突，也会干扰状态的正常equals比对。

• 首先修改ItemModel，所有属性改为val不可变类型，删除重复定义的同名id属性，保证类符合Compose稳定类型的要求：

@Parcelize
data class ItemModel (
    val id: Int? = null,
    val isAdded: Boolean? = null,
    val name: String? = null,
    val index: Int? = null,
    @SerializedName("someSerializedNameForApi")
    val categoryId: Int? = null
): Parcelable

• 渲染LazyColumn列表时，使用items扩展函数替代forEach + item的写法，并为每个列表项指定基于唯一id的稳定key，让Compose可以精准追踪单个项的状态变化：

// 替换原有data.forEach遍历渲染的逻辑
val displayData = if (state.sortType == SortType.ALPHA_NUMERIC)
    state.data.sortedBy { it.name }
else
    state.data
items(
    items = displayData,
    key = { it.id ?: it.hashCode() } // 用项的唯一id作为稳定key
) { source ->
    if((state.searchQuery.isEmpty() && state.searchQuery.isBlank()) ||
        (source.name != null && source.name.contains(state.searchQuery, ignoreCase =  true))) {
        AddableItem(
            modifier = Modifier
                .padding(
                    vertical = dimManager.heightPxToDp(20)
                ),
            text = source.name ?: "",
            isAdded = source.isAdded ?: false,
            onItemPressed = {
                controller.navigate(
                    Screens.ItemPreviewScreen.route +
                            "?title=${source.name}" +
                            "&id=${source.categoryId}" +
                            "&isAdded=${source.isAdded}"
                )
            },
            onAddPressed = {
                itemsViewModel.onEvent(ItemEvent.UpdateEvent(source))
            }
        )
    }
}

• 所有更新ItemModel的操作都必须通过copy方法生成新实例，禁止直接修改类的可变字段值，全程遵循单向数据流的状态不可变原则。

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