如何处理撰写形状中的边框和背景？

Question

在代码中，图像边框仅在侧面，而不是在角落。对于按钮，背景超出形状/边框。我只能通过使用固定高度来“修复”按钮，但我不明白为什么固定高度有帮助，我想知道是否有另一种方法可以做到这一点。

@Composable
fun Test(){
    Column(modifier = Modifier.padding(5.dp)) {
        Image(
            painter = painterResource(id = R.drawable.ic_close),
            contentDescription = null,
            modifier = Modifier
                .clip(CircleShape)
                .border(1.dp, Color.Red)
                .size(20.dp)
        )
        OutlinedButton(
            onClick = {  },
            border = BorderStroke(1.dp, Color.Red),
            shape = RoundedCornerShape(5.dp),
            modifier = Modifier
                .clip(RoundedCornerShape(5.dp))
                .fillMaxWidth()
                .background(Color.Green)
        ) {}
    }
}

Answer 1

对于Image，删除clip修饰符并使用参数shape内部border：

    Image(
        painter = painterResource(id = R.drawable.ic_xxx),
        contentDescription = null,
        modifier = Modifier
            //.clip(CircleShape)
            .border(1.dp, Color.Red, CircleShape)
            .size(20.dp)
    )

对于OutlinedButton使用colors属性来指定背景颜色而不是Modifier.background

    OutlinedButton(
        onClick = {  },
        border = BorderStroke(1.dp, Color.Red),
        shape = RoundedCornerShape(5.dp),
        modifier = Modifier
            //.clip(RoundedCornerShape(5.dp))
            .fillMaxWidth(),
            //.background(Color.Green),
        colors = ButtonDefaults.outlinedButtonColors(backgroundColor = Green),
    )