解决LazyColumn中Text组件因onTextLayout引发的重组问题

问题背景 #

在LazyColumn中滚动时出现大量组件重组，已设置item key并将Text的onTextLayout逻辑提取为独立函数，但问题仍存在，推测是shouldShowMoreTitle状态更新导致连锁反应。

核心原因分析 #

1. 共享状态引发全局重组：原本的shouldShowMoreTitle是父组件的共享State，每个NewsItem更新该状态都会触发父组件及所有子Item重组。
2. 不稳定的函数引用：传递给NewsItem的titleTextLayoutResult每次重组都会生成新的函数引用，导致NewsItem不必要的重组。
3. 状态作用域错误：控制标题展开/收起的showMoreTitleClicked应该是每个Item独立的状态，而非共享状态。

解决方案 #

1. 将状态下沉到NewsItem内部，实现独立管理 #

把shouldShowMoreTitle和showMoreTitleClicked移到NewsItem组件内部，用remember保存，确保每个Item的状态变化仅影响自身，不会触发全局重组：

@Composable
fun NewsItem(
    modifier: Modifier = Modifier,
    articleModel: ArticleModel,
    onNewsLinkClicked: (newsLink: String) -> Unit,
    newsItemEvent: (NewsItemEvent) -> Unit,
    newsItemState: NewsItemState,
    titleTextLayoutResult: (hasVisualOverflow: Boolean, lineCount: Int) -> Boolean
) {
    // 每个Item独立维护状态
    var shouldShowMoreTitle by remember { mutableStateOf(false) }
    var showMoreTitleClicked by remember { mutableStateOf(false) }

    Text(
        modifier = Modifier
            .fillMaxWidth()
            .animateContentSize(),
        color = MaterialTheme.colorScheme.onSurface,
        style = MaterialTheme.typography.titleMedium,
        text = articleModel.title,
        maxLines = if (showMoreTitleClicked) Int.MAX_VALUE else 1,
        overflow = TextOverflow.Ellipsis,
        onTextLayout = { textLayoutResult ->
            // 仅更新当前Item的状态
            shouldShowMoreTitle = titleTextLayoutResult(textLayoutResult.hasVisualOverflow, textLayoutResult.lineCount)
        }
    )

    // 按需显示展开/收起按钮
    if (shouldShowMoreTitle) {
        TextButton(onClick = { showMoreTitleClicked = !showMoreTitleClicked }) {
            Text(text = if (showMoreTitleClicked) "收起" else "展开")
        }
    }
}

2. 确保函数引用稳定 #

将getTextLayoutResult定义为顶层函数或伴生对象函数，避免每次重组生成新的引用：

// 顶层函数，引用稳定
private fun getTextLayoutResult(hasVisualOverflow: Boolean, lineCount: Int): Boolean {
    return hasVisualOverflow || lineCount > 1
}

// LazyColumn中传递稳定的函数引用
LazyColumn(
    modifier = Modifier.fillMaxWidth(),
    contentPadding = PaddingValues(start = 8.dp, end = 8.dp, top = 8.dp),
    verticalArrangement = Arrangement.spacedBy(6.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    items(
        key = { articleModel -> articleModel.id },
        items = newsPagingData.itemSnapshotList.items
    ) { articleModel ->
        NewsItem(
            articleModel = articleModel,
            onNewsLinkClicked = onNewsLinkedClicked,
            newsItemEvent = newsItemEvent,
            newsItemState = newsItemState,
            titleTextLayoutResult = ::getTextLayoutResult
        )
    }
}

3. 保证数据类的稳定性 #

确保ArticleModel是data class，Compose会自动识别其稳定性，避免因数据传递导致的不必要重组：

data class ArticleModel(
    val id: String,
    val title: String,
    // 其他业务字段
)

关键优化点总结 #

• 每个Item的状态独立管理，避免共享状态触发全局重组。
• 传递给子组件的函数、数据需保持稳定，减少无意义的重组触发。
• 利用Compose的状态作用域特性，将状态放在最接近使用的组件层级。

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