LazyColumn中IntrinsicSize未更新引发布局异常问题求助

问题背景 #

在Jetpack Compose中构建带LazyColumn的布局，列表项为包含两列的Row：

• 两列均支持点击，触摸目标需覆盖整行高度
• 要求两列高度与较高列保持一致，因此给Row设置了IntrinsicSize.Min
• 初始显示正常，但上下滚动后出现高度异常（文本截断或高度过大），替换为Column+垂直滚动则显示正常

复现代码 #

import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color.Companion.Gray
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

// 滚动后显示异常
@Preview
@Composable
private fun MyLazyList() {
    LazyColumn {
        items(count = 100) {
            MyItem(it * 4)
        }
    }
}

// 显示正常但非懒加载
@Preview
@Composable
private fun MyList() {
    Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
        repeat(100) {
            MyItem(it * 4)
        }
    }
}

@Composable
private fun MyItem(id: Int) {
    val title = getTitle(id)
    Row(
        Modifier
            .height(IntrinsicSize.Min)
            .border(1.dp, Gray)
    ) {
        Column(
            Modifier
                .weight(1.0f)
                .clickable { }) {
            Text(title)
        }
        Column(
            Modifier
                .width(48.dp)
                .fillMaxHeight()
                .clickable { },
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = id.toString())
        }
    }
}

// 标题长度随id递增用于测试
fun getTitle(id: Int): String = (0..id).toList().joinToString { it.toString() }

效果对比 #

• 正常显示：
  
• 异常显示：
  

原因分析 #

LazyColumn采用项复用机制，IntrinsicSize.Min的高度计算依赖子组件的测量结果。当项被滚动出视野后复用，可能会保留之前的测量缓存，导致新内容的高度计算错误。

解决方案 #

方案1：移除IntrinsicSize.Min，利用Row默认自适应高度 #

Row默认会根据最高子项的高度自适应，移除height(IntrinsicSize.Min)后，右侧Column的fillMaxHeight()会自动匹配Row的高度，同时保持触摸目标覆盖整行：

@Composable
private fun MyItem(id: Int) {
    val title = getTitle(id)
    Row(
        modifier = Modifier
            .border(1.dp, Gray)
    ) {
        Column(
            modifier = Modifier
                .weight(1f)
                .clickable { }
        ) {
            Text(title)
        }
        Column(
            modifier = Modifier
                .width(48.dp)
                .fillMaxHeight()
                .clickable { },
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = id.toString())
        }
    }
}

方案2：添加唯一Key强制重新测量 #

给LazyColumn的每个项设置唯一key，确保复用项时触发重新测量，避免缓存干扰：

@Preview
@Composable
private fun MyLazyList() {
    LazyColumn {
        items(count = 100, key = { it }) { // 绑定唯一key
            MyItem(it * 4)
        }
    }
}

或在MyItem内部添加key：

@Composable
private fun MyItem(id: Int) {
    key(id) { // 以id作为唯一标识
        val title = getTitle(id)
        // 原有Row代码
    }
}

方案3：配合wrapContentHeight()强制自适应 #

在Row的height(IntrinsicSize.Min)后添加wrapContentHeight()，强制高度跟随内容刷新：

Row(
    Modifier
        .height(IntrinsicSize.Min)
        .wrapContentHeight()
        .border(1.dp, Gray)
) {
    // 原有子组件代码
}

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