如何删除 Jetpack Compose 中 Row 中的隐藏填充？

Question

我有以下代码：

@Composable
@Preview
fun ZoomButtons(
    modifier: Modifier = Modifier,
) {
    Row(
        modifier = modifier,
    ) {
        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)),
            contentPadding = PaddingValues(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(
                topStart = 0.dp,
                topEnd = 0.dp,
                bottomStart = 0.dp,
                bottomEnd = 0.dp
            ),
            border = BorderStroke(1.dp, Color(0xFF5C5C5C)),
            contentPadding = PaddingValues(0.dp)
        ) {
            Icon(
                painter = painterResource(id = R.drawable.zoom_orig),
                modifier = Modifier.size(14.dp),
                contentDescription = "Zoom in",
                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)),
            contentPadding = PaddingValues(0.dp)
        ) {
            Icon(
                painter = painterResource(id = R.drawable.zoom_plus),
                modifier = Modifier.size(14.dp),
                contentDescription = "Zoom in",
                tint = Color(0xFF0A8213)
            )
        }
    }
}

这会产生：

如何删除第一个和第二个子按钮中的空白？

Answer 1

background

修饰符会干扰

OutlinedButton

可组合项的内部实现。请尝试删除

.background(Color.White)

改为使用

OutlinedButton(
    //...
    colors = ButtonDefaults.outlinedButtonColors(containerColor = Color.White),
    //...
) {
    //...
}