Compose中如何让Chip点击后保持原有圆形形状？

问题原因 #

你的代码里有两个核心问题导致选中后Chip失去圆形外观：

1. background修饰符未指定圆角形状，选中时背景填充默认使用直角矩形，直接覆盖了border的圆角效果
2. 定义的shape参数没有实际应用到border和background上，而是硬编码了RoundedCornerShape(20.dp)，同时调用时传入的Shapes(medium = RoundedCornerShape(15.dp))完全没起作用

修复后的代码 #

调整TextChip组件 #

@Composable
fun TextChip(
    isSelected: Boolean,
    text: String,
    onChecked: (Boolean) -> Unit,
    selectedColor: Color = DarkGray,
    shape: Shape = RoundedCornerShape(20.dp), // 改为Shape类型，默认设置圆角
) {
    Row(
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .wrapContentSize()
            .border(
                width = 1.dp,
                color = if (isSelected) selectedColor else LightGray,
                shape = shape // 复用传入的shape参数
            )
            .background(
                color = if (isSelected) selectedColor else Transparent,
                shape = shape // 给background指定相同圆角，避免填充时变直角
            )
            .clickable {
                onChecked(!isSelected)
            }
            .padding(top = 3.dp, bottom = 3.dp, start = 17.dp, end = 17.dp)
    ) {
        Text(
            text = text,
            fontSize = 21.sp,
            fontWeight = FontWeight.Bold,
            color = if (isSelected) Color.White else Unspecified,
        )
    }
}

修改FirstChip调用逻辑 #

@Composable
fun FirstChip() {
    val textChipRememberOneState = remember { mutableStateOf(false) }

    TextChip(
        isSelected = textChipRememberOneState.value,
        shape = RoundedCornerShape(15.dp), // 直接传入Shape类型，无需嵌套Shapes
        text = "Action",
        selectedColor = LightGreen,
        onChecked = {
            textChipRememberOneState.value = it
        },
    )
}

关键修复说明 #

• 把TextChip的shape参数类型从Shapes改为Shape，适配单个组件的形状需求，减少冗余
• 让border和background共用同一个shape参数，确保边框和背景的圆角完全一致
• 给background添加shape配置，彻底解决选中状态下背景变直角的问题

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