导航至含LazyColumn的页面时抛出IllegalStateException异常求助

从设置页面导航至包含3行LazyColumn的语言选择页面时，抛出异常：

IllegalStateException: Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed

相关代码如下：

外层Composable代码 #

val listState = rememberLazyListState()
var selectedIndex by remember{ mutableIntStateOf(-1) }

Card(
    modifier = Modifier
        .fillMaxWidth(),
    shape = RoundedCornerShape(15.dp),
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.customColorsPalette.cardContainer
    ),
    elevation = CardDefaults.cardElevation(8.dp)
) {
    LazyColumn(state = listState) {
        items(items = list) { language ->
            LanguageRowItem(
                onClick = {
                    selectedIndex = if (selectedIndex != language.id)
                        language.id else -1
                    tag = language.tag
                    onClickRefreshActivityEnglish()
                },
                title = language.title,
                chosen = language.id == selectedIndex
            )
        }
    }
}

LanguageRowItem 代码 #

@Composable
fun LanguageRowItem(
    onClick: ()-> Unit, title: String, chosen: Boolean
) {
    Card(
        modifier = Modifier.fillMaxWidth(),
        shape = RectangleShape,
        colors = CardDefaults.cardColors(
            containerColor = Color.Transparent
        ),
        onClick = { onClick() }
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(15.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                modifier = Modifier,
                text = title,
                style = TextStyle(
                    color =
                    if (chosen) MaterialTheme.colorScheme.primary
                    else MaterialTheme.customColorsPalette.blackToWhite,
                    fontWeight = FontWeight.SemiBold,
                    fontSize = 18.sp
                )
            )
        }
    }
}

这个异常的本质是LazyColumn的父布局（外层Card）没有给它提供有限的垂直高度约束，导致LazyColumn拿到了无限大的最大高度限制，而滚动组件不允许这种情况。

可以通过以下几种方式修复：

• 给外层Card添加垂直高度约束：
  如果Card所在的父布局是全屏的，直接给Card加上fillMaxHeight()，让它占满可用垂直空间：

  Card(
      modifier = Modifier
          .fillMaxWidth()
          .fillMaxHeight(), // 新增这行
      shape = RoundedCornerShape(15.dp),
      // 其他属性保持不变
  )
  

• 如果Card嵌套在垂直布局（如Column）中：
  给Card设置weight(1f)，让它占据布局中剩余的垂直空间：

  Column(Modifier.fillMaxSize()) {
      // 页面其他组件（比如标题栏等）
      Card(
          modifier = Modifier
              .fillMaxWidth()
              .weight(1f), // 新增这行
          // 其他属性保持不变
      ) {
          LazyColumn(...) { ... }
      }
  }
  

• 固定高度（仅特殊场景使用）：
  直接给LazyColumn设置固定高度，比如Modifier.height(200.dp)，但这种方式无法适配不同屏幕尺寸，灵活性差。

核心原则：必须让LazyColumn的父容器提供一个明确的、有限的垂直高度范围，它才能正常工作。

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