Jetpack Compose中LazyColumn单修改触发全列表重组问题求助

问题背景 #

我用Compose实现了一个带列表项的LazyColumn，每个项都指定了唯一id作为key，项模型也加了@Stable注解，采用UiModel模式在ViewModel里管理数据。但修改某一项的数量时，整个列表的所有项都会触发重组。使用的是compose-bom:2023.08.00（对应Compose 1.5.0）。

相关代码 #

ViewModel代码 #

class MainViewModel: ViewModel() {

    private val _cartUiState = MutableLiveData<CartUiState>()
    val cartUiState: LiveData<CartUiState> = _cartUiState

    init {
        _cartUiState.value = CartUiState(
            items = listOf(
                CartItem(1, "coffee", 0),
                CartItem(2, "tea", 0),
                CartItem(3, "espresso", 0)
            )
        )
    }

    fun incrementCartItemCount(itemId: Int) {
        _cartUiState.value = _cartUiState.value?.copy(
            items = _cartUiState.value?.items?.map {
                if (it.id == itemId) {
                    it.copy(quantity = it.quantity + 1)
                } else {
                    it
                }
            } ?: emptyList()
        )
    }
}

Activity与Composable代码 #

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val viewModel: MainViewModel = viewModel()
             val cartUiState by viewModel.cartUiState.observeAsState()

            PlaygroundTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    StatelessCart(
                        cartUiState = cartUiState ?: CartUiState(emptyList()),
                        onDecrement = { id -> viewModel.decrementCartItemCount(id) },
                        onIncrement = { id -> viewModel.incrementCartItemCount(id) }
                    )
                }
            }
        }
    }
}

@Composable
fun StatelessCart(
    cartUiState: CartUiState,
    onDecrement: (id: Int) -> Unit,
    onIncrement: (id: Int) -> Unit
) {
    Column {
        LazyColumn {
            items(
                items = cartUiState.items,
                key = { item -> item.id }
            ) { item ->
                CartItem(
                    name = item.name,
                    quantity = item.quantity,
                    onDecrement = { onDecrement(item.id) },
                    onIncrement = { onIncrement(item.id) }
                )
            }
        }
    }
}

数据模型代码 #

@Stable
data class CartUiState(
    val items: List<CartItem>
)

@Stable
data class CartItem(
    val id: Int,
    val name: String,
    val quantity: Int
)

问题原因 #

核心问题有两个：

1. 集合引用变化：每次更新项时，用map生成了全新的List实例。Compose对List这类引用类型的稳定检查是看引用是否变化，一旦引用改变，就会判定整个集合更新，触发LazyColumn的lambda重新执行，导致所有项重组。
2. 匿名函数重复实例化：在CartItem Composable中传递的onDecrement和onIncrement是每次重组都会生成的新匿名函数（{ onDecrement(item.id) }），Compose会认为这些参数发生变化，进而触发组件重组。

修复方案 #

方案1：使用不可变集合稳定引用 #

改用kotlinx.collections.immutable提供的不可变集合，集合中单个元素变化时，集合引用不会改变，Compose能精准识别仅单个元素更新：

1. 添加依赖：

   implementation "org.jetbrains.kotlinx:kotlinx-collections-immutable:0.3.5"
   

2. 修改数据模型：

   @Stable
   data class CartUiState(
       val items: ImmutableList<CartItem>
   )
   

3. 更新ViewModel中的初始化和更新逻辑：

   // 初始化
   _cartUiState.value = CartUiState(
       items = listOf(
           CartItem(1, "coffee", 0),
           CartItem(2, "tea", 0),
           CartItem(3, "espresso", 0)
       ).toImmutableList()
   )
   
   // 更新方法
   fun incrementCartItemCount(itemId: Int) {
       _cartUiState.value = _cartUiState.value?.copy(
           items = _cartUiState.value?.items?.map {
               if (it.id == itemId) {
                   it.copy(quantity = it.quantity + 1)
               } else {
                   it
               }
           }?.toImmutableList() ?: immutableListOf()
       )
   }
   

方案2：优化Composable参数传递 #

避免传递每次重组都生成的匿名函数，同时让Composable参数更稳定：

1. 修改StatelessCart中的项渲染逻辑：

   @Composable
   fun StatelessCart(
       cartUiState: CartUiState,
       onDecrement: (Int) -> Unit,
       onIncrement: (Int) -> Unit
   ) {
       Column {
           LazyColumn {
               items(
                   items = cartUiState.items,
                   key = { item -> item.id }
               ) { item ->
                   CartItem(
                       item = item,
                       onDecrement = onDecrement,
                       onIncrement = onIncrement
                   )
               }
           }
       }
   }
   

2. 调整CartItem Composable的参数：

   @Composable
   fun CartItem(
       item: CartItem,
       onDecrement: (Int) -> Unit,
       onIncrement: (Int) -> Unit
   ) {
       Row(
           modifier = Modifier.padding(8.dp),
           verticalAlignment = Alignment.CenterVertically,
           horizontalArrangement = Arrangement.SpaceBetween
       ) {
           Text(text = item.name)
           Row(verticalAlignment = Alignment.CenterVertically) {
               Button(onClick = { onDecrement(item.id) }) {
                   Text("-")
               }
               Text(
                   text = item.quantity.toString(),
                   modifier = Modifier.padding(horizontal = 8.dp)
               )
               Button(onClick = { onIncrement(item.id) }) {
                   Text("+")
               }
           }
       }
   }
   

   这样传递的onDecrement和onIncrement是来自父组件的稳定引用，不会每次重组都生成新实例，结合@Stable的CartItem，Compose只会重新组合发生变化的项。

额外优化：改用StateFlow替代LiveData #

Compose对StateFlow的状态收集更友好，也更符合现代Compose最佳实践：

1. 修改ViewModel：

   class MainViewModel: ViewModel() {
   
       private val _cartUiState = MutableStateFlow(CartUiState(
           items = listOf(
               CartItem(1, "coffee", 0),
               CartItem(2, "tea", 0),
               CartItem(3, "espresso", 0)
           ).toImmutableList()
       ))
       val cartUiState = _cartUiState.asStateFlow()
   
       fun incrementCartItemCount(itemId: Int) {
           _cartUiState.value = _cartUiState.value.copy(
               items = _cartUiState.value.items.map {
                   if (it.id == itemId) {
                       it.copy(quantity = it.quantity + 1)
                   } else {
                       it
                   }
               }.toImmutableList()
           )
       }
   }
   

2. 在Activity中收集状态：

   val cartUiState by viewModel.cartUiState.collectAsStateWithLifecycle()
   

内容的提问来源于stack exchange，提问作者Claudio Galvão