Android Material3 FilterChip使用问题：去除灰色边框及状态疑问

这是因粗心导致的低级错误，无参考价值。因已有他人作答，故保留此内容。

我用Compose的FilterChip做了个页面，代码如下：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TestPage() {

    var order by remember { mutableStateOf(true) }

    val updateIsASCOrder: (b: Boolean) -> Unit = { order = it }

    Row {
        FilterChip(
            border = FilterChipDefaults.filterChipBorder(
                borderColor = Color.Transparent,
                disabledBorderColor = Color.Transparent
            ),
            modifier = Modifier.weight(1f),
            selected = order,
            onClick = { updateIsASCOrder(true) },
            label = { Text("first") })
        FilterChip(
            modifier = Modifier.weight(1f),
            selected = !order,
            onClick = { updateIsASCOrder(false) },
            label = { Text("second") })
    }
}

运行后出现灰色边框，我想去掉这个边框。另外我对FilterChip的enabled状态不太理解，官方注释如下：

/**
 * 创建一个[SelectableChipBorder]，代表扁平样式[FilterChip]的默认边框。
 *
 * @param borderColor 组件启用且未选中时的边框颜色
 * @param selectedBorderColor 组件启用且选中时的边框颜色
 * @param disabledBorderColor 组件未启用且未选中时的边框颜色
 * @param disabledSelectedBorderColor 组件未启用但选中时的边框颜色
 * @param borderWidth 组件未选中时的边框宽度
 * @param selectedBorderWidth 组件选中时的边框宽度
 */
@Composable
fun filterChipBorder

还有个问题：选中second时，first的边框消失了，符合预期；但选中first时，second的边框还在。我试过把边框宽度设为0dp，还是有细黑线：

border = FilterChipDefaults.filterChipBorder(
                borderColor = Color.Transparent,
                disabledBorderColor = Color.Transparent,
                borderWidth = 0.dp,
                selectedBorderWidth = 0.dp
            )

问题解决与说明 #

1. 去除灰色边框的关键

你只给第一个FilterChip设置了自定义border，第二个完全没配置！第二个FilterChip用的是默认边框样式，所以会出现你看到的情况。

给第二个FilterChip也加上相同的边框配置即可，或者抽成变量复用更简洁：

val transparentBorder = FilterChipDefaults.filterChipBorder(
    borderColor = Color.Transparent,
    disabledBorderColor = Color.Transparent,
    borderWidth = 0.dp,
    selectedBorderWidth = 0.dp
)

Row {
    FilterChip(
        border = transparentBorder,
        modifier = Modifier.weight(1f),
        selected = order,
        onClick = { updateIsASCOrder(true) },
        label = { Text("first") })
    FilterChip(
        border = transparentBorder,
        modifier = Modifier.weight(1f),
        selected = !order,
        onClick = { updateIsASCOrder(false) },
        label = { Text("second") })
}

2. enabled状态的含义

enabled控制组件的可交互性：

• enabled = true：组件可点击、响应触摸，显示正常状态样式；
• enabled = false：组件变为灰色不可点击状态，无法触发onClick，同时应用disabledXXX开头的样式配置（比如disabledBorderColor）。

简单说就是：启用状态下能操作，禁用状态下不能操作且样式灰化。

3. 选中状态边框不一致的原因

还是因为第二个FilterChip没设置自定义边框。选中first时，second处于未选中状态，用的是默认未选中边框；选中second时，first的自定义边框生效，未选中时边框透明所以看起来消失。给第二个加上相同边框配置后，这个问题就会解决。

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