如何避免Jetpack Compose中Canvas的不必要重组/重绘

当滚动列表时，TextB会因监听firstVisibleItemIndex状态变化而重组，进而导致其所在的Row重新执行内容lambda，使得同一行内的MyCanvas被不必要地调用。更糟的是，MyCanvas内的随机颜色每次调用都会生成新值，触发无意义的重绘——这就是问题的核心。

我们需要从缓存状态避免重复计算和减少不必要重组触发两个层面入手：

1. 缓存随机颜色，固定组件视觉状态 #

所有涉及随机颜色的组件，都用remember缓存颜色值，确保每个组件实例的颜色固定，不会因重组频繁变化：

修改TextA #

@Stable
@Composable
fun TextA(i: Int) {
    // 以索引i为key缓存颜色，确保每个列表项的颜色固定
    val bgColor = remember(i) { randomColor }
    Text(
        modifier = Modifier.size(80.dp, 60.dp)
            .background(color = bgColor),
        text = "Index:$i"
    )
}

修改TextB #

@Stable
@Composable
fun TextB(index: Int, firstVisibleItemIndex: State<Int>) {
    val bgColor = remember(index) { randomColor }
    // 明确依赖index和firstVisibleItemIndex，仅当两者变化时重新计算状态
    val isFirstItem = remember(index, firstVisibleItemIndex) {
        derivedStateOf {
            index == firstVisibleItemIndex.value
        }
    }
    Text(
        modifier = Modifier.size(80.dp, 60.dp)
            .background(color = bgColor),
        text = if (isFirstItem.value) "+" else ""
    )
}

修改MyCanvas #

@Stable
@Composable
fun RowScope.MyCanvas() {
    // 缓存颜色，确保每个MyCanvas实例的颜色固定
    val canvasColor = remember { randomColor }
    Canvas(
        modifier = Modifier.weight(1f).height(60.dp)
            .drawWithCache {
                onDrawBehind {
                    drawRect(canvasColor)
                }
            }
    ){}
}

2. 优化状态依赖，减少冗余计算 #

简化firstVisibleItemIndex的创建逻辑，derivedStateOf本身会自动跟踪依赖，无需额外用remember(state)包裹：

@Composable
fun App() {
    val state = rememberLazyListState()
    val list = remember { (1..100).toList() }

    // 简化状态创建，自动跟踪LazyListState的变化
    val firstVisibleItemIndex = derivedStateOf { state.firstVisibleItemIndex }

    LazyColumn(state = state) {
        items(list.size) {
            Row {
                TextA(it)
                MyCanvas()
                TextB(it, firstVisibleItemIndex)
            }
        }
    }
}

3. 可选：为LazyColumn项添加稳定Key #

如果列表项有唯一标识（而非仅依赖索引），可以为items指定key，进一步提升滚动时的组件稳定性：

items(list.size, key = { it }) {
    Row {
        TextA(it)
        MyCanvas()
        TextB(it, firstVisibleItemIndex)
    }
}

• 缓存颜色后，即使父组件重组，子组件因输入参数未变化、颜色状态固定，Compose会直接跳过重组逻辑，避免无意义的重绘。
• 优化状态依赖后，TextB仅在自身索引或firstVisibleItemIndex变化时才会重组，不会触发整行组件的无差别更新。

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