LazyRow中如何实现Modifier.weight(1f)的等效布局效果？

一、优先方案：修复普通Row的列表更新异常 #

你遇到的删除卡片时视觉错位问题，核心是Compose默认基于组件位置重组，未识别item的唯一性。只需给每个卡片绑定唯一key，让Compose根据item的标识（如route）跟踪组件，就能同时保留Modifier.weight(1f)的等宽特性和正确的更新逻辑：

val cAreas = remember { mutableStateListOf<CArea>() }
Row(
    modifier = Modifier.fillMaxSize().padding(16.dp),
    horizontalArrangement = Arrangement.spacedBy(16.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    cAreas.forEach { cArea ->
        // 绑定唯一key，确保重组时精准识别目标item
        key(cArea.route) {
            CAreaFragment().Fragment(
                cArea = cArea,
                closeCArea = { removeCArea(cArea) }
            ).modifier = Modifier.weight(1f)
        }
    }
    WorkAreaActionBarFragment(
        newCArea = { showFilePicker = true }
    ).Fragment()
}

二、LazyRow实现等宽卡片的替代方案 #

若必须保留LazyRow（如需要懒加载大量item），可通过手动计算卡片宽度模拟weight效果：

实现逻辑 #

通过BoxWithConstraints获取父容器总宽度，减去左右padding、卡片间距和固定ActionBar的宽度，将剩余空间平均分配给每个卡片：

val cAreas = remember { mutableStateListOf<CArea>() }
val actionBarWidth = remember { mutableStateOf(0.dp) }

BoxWithConstraints(modifier = Modifier.fillMaxSize().padding(16.dp)) {
    val totalSpacing = 16.dp * maxOf(0, cAreas.size - 1)
    // 计算单张卡片宽度：总可用宽度扣除间距、ActionBar宽度后均分
    val cardWidth = if (cAreas.isNotEmpty()) {
        (maxWidth - totalSpacing - actionBarWidth.value) / cAreas.size
    } else {
        0.dp
    }

    LazyRow(
        modifier = Modifier.fillMaxSize(),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        items(cAreas, key = { it.route }) { cArea ->
            CAreaFragment().Fragment(
                cArea = cArea,
                closeCArea = { removeCArea(cArea) }
            ).modifier = Modifier.width(cardWidth)
        }
        item {
            // 实时测量ActionBar的实际宽度，避免硬编码适配问题
            val actionBarModifier = Modifier.onGloballyPositioned {
                actionBarWidth.value = it.size.width.toDp()
            }
            WorkAreaActionBarFragment(
                newCArea = { showFilePicker = true }
            ).Fragment().modifier = actionBarModifier
        }
    }
}

注意点 #

• 卡片数量变化时，cardWidth会自动重新计算，维持等宽效果
• 若卡片内容有最小宽度限制，可修改为Modifier.width(max(cardWidth, minWidth))
• 需确保CArea的route属性全局唯一，否则key机制会失效

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