如何在Row中创建等大无间隙的方形Composable组件？

问题分析 #

你的代码存在两个核心问题：

1. 尺寸计算偏差：ColorTile仅使用aspectRatio(1f)但未明确填充父容器空间，导致Row中子项的高度约束不统一，前两个瓷砖的高度计算出现偏差。
2. 视觉间隙（白线）：Surface默认带有elevation阴影效果，阴影边缘可能被误认为瓷砖间的白线；同时布局约束不明确导致的子项尺寸小数像素，也会触发渲染间隙。

修复方案 #

修改代码如下，通过明确布局约束、移除不必要嵌套和默认阴影解决问题：

修改后的ColorTile组件

@ExperimentalMaterialApi
@Composable
fun ColorTile(
    name: String,
    color: String,
    modifier: Modifier = Modifier // 新增modifier参数，方便父组件传递约束
) {
    Surface(
        modifier = modifier
            .fillMaxSize() // 强制填充父容器分配的所有空间
            .aspectRatio(1f), // 保证瓷砖为正方形
        color = Color(color.toColorInt()),
        onClick = {},
        elevation = 0.dp // 移除默认阴影，消除视觉间隙
    ) {
        // 如需显示名称，可在此添加Text组件，例如：
        // Text(text = name, color = Color.White)
    }
}

修改后的ColorTilesRow组件

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ColorTilesRow(name: String, colors: List<String>) {
    Row(
        modifier = Modifier
            .fillMaxWidth() // 让Row占满可用宽度
            .height(IntrinsicSize.Min) // 强制Row高度由最高子项决定，统一所有瓷砖高度
    ) {
        colors.forEach { color ->
            ColorTile(
                name = name,
                color = color,
                modifier = Modifier.weight(1f) // 让每个瓷砖均分Row的宽度
            )
        }
    }
}

关键修改说明 #

• fillMaxSize() + aspectRatio(1f)：确保瓷砖完全填充父组件分配的空间，同时强制保持正方形比例，避免尺寸计算偏差。
• elevation = 0.dp：移除Surface默认的阴影效果，彻底消除阴影导致的视觉间隙。
• Row的height(IntrinsicSize.Min)：让Row的高度由子项中最高的那个决定，保证所有瓷砖的高度完全一致。
• 直接传递weight(1f)：去掉多余的Box嵌套，简化布局层级，让约束传递更直接，确保每个瓷砖均分Row的宽度。

额外排查点 #

如果仍存在白线，可尝试添加以下优化：

• 给ColorTile的modifier添加clipToBounds()，强制裁剪超出边界的内容。
• 检查颜色代码是否正确，避免因颜色透明度问题导致的视觉间隙。

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