如何移除Jetpack Compose中Row内的隐藏空白？

你编写的ZoomButtons组件中，按钮之间出现空白的原因主要有两个：一是OutlinedButton默认带有最小宽度限制，二是相邻按钮的边框叠加导致视觉间隙。以下是具体的解决方法：

修改后的完整代码 #

@Composable
@Preview
fun ZoomButtons(
    modifier: Modifier = Modifier,
) {
    Row(
        modifier = modifier,
        horizontalArrangement = Arrangement.spacedBy(0.dp) // 强制子元素无间距
    ) {
        OutlinedButton(
            onClick = {  },
            modifier = Modifier.size(32.dp).background(Color.White),
            shape = RoundedCornerShape(
                topStart = 9999.dp,
                topEnd = 0.dp,
                bottomStart = 9999.dp,
                bottomEnd = 0.dp
            ),
            border = BorderStroke(1.dp, Color(0xFF5C5C5C)).copy(end = BorderStroke(0.dp, Color.Transparent)), // 去掉右侧边框
            contentPadding = PaddingValues(0.dp),
            minWidth = 0.dp // 取消默认最小宽度
        ) {
            Icon(
                painter = painterResource(id = R.drawable.zoom_minus),
                modifier = Modifier.size(14.dp),
                contentDescription = "Zoom out",
                tint = Color(0xFF0A8213)
            )
        }
        OutlinedButton(
            onClick = {  },
            modifier = Modifier.size(32.dp).background(Color.White),
            shape = RoundedCornerShape(0.dp),
            border = BorderStroke(1.dp, Color(0xFF5C5C5C)).copy(start = BorderStroke(0.dp, Color.Transparent), end = BorderStroke(0.dp, Color.Transparent)), // 去掉左右边框
            contentPadding = PaddingValues(0.dp),
            minWidth = 0.dp // 取消默认最小宽度
        ) {
            Icon(
                painter = painterResource(id = R.drawable.zoom_orig),
                modifier = Modifier.size(14.dp),
                contentDescription = "Reset zoom",
                tint = Color(0xFF0A8213)
            )
        }
        OutlinedButton(
            onClick = {  },
            modifier = Modifier.size(32.dp).background(Color.White),
            shape = RoundedCornerShape(
                topStart = 0.dp,
                topEnd = 9999.dp,
                bottomStart = 0.dp,
                bottomEnd = 9999.dp
            ),
            border = BorderStroke(1.dp, Color(0xFF5C5C5C)).copy(start = BorderStroke(0.dp, Color.Transparent)), // 去掉左侧边框
            contentPadding = PaddingValues(0.dp),
            minWidth = 0.dp // 取消默认最小宽度
        ) {
            Icon(
                painter = painterResource(id = R.drawable.zoom_plus),
                modifier = Modifier.size(14.dp),
                contentDescription = "Zoom in",
                tint = Color(0xFF0A8213)
            )
        }
    }
}

关键修改说明 #

• Row添加horizontalArrangement = Arrangement.spacedBy(0.dp)：明确指定子元素之间没有间距，避免默认排列带来的隐含间隙。
• 按钮设置minWidth = 0.dp：OutlinedButton默认有ButtonDefaults.MinWidth的限制，取消后按钮可以完全按照size(32.dp)的尺寸显示，不会额外占用宽度。
• 调整按钮边框：相邻按钮的边框叠加会产生视觉上的“空白”，通过去掉中间重叠部分的边框，让按钮完全贴合，同时保持整体边框的连贯性。

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