Flutter material 3芯片，不能go 除输入芯片小部件上的轮廓

发布于01月21日

I wanted to create an InputChip Widget that looked the this (The red circle). M3 Official Figma

有了这个代码，我就可以用蓝色圈出芯片:

@override
Widget build(BuildContext context) {
  return InputChip(
    label: const Text('tag'),
    onDeleted: () {},
  );
}

通过添加一些参数，我可以更改 colored颜色 :

@override
Widget build(BuildContext context) {
  return InputChip(
    label: const Text('tag'),
    backgroundColor: Colors.blue[100],
    onDeleted: () {},
  );
}

但我不能删除轮廓.

我已try 将selected参数更改为true，但这会创建一个我不想要的复选标记:

@override
Widget build(BuildContext context) {
  return InputChip(
    label: const Text('tag'),
    selected: true,
    onDeleted: () {},
  );
}

我怎样才能做到这一点呢？

推荐答案

如果您看到InputChip的实现，则边框样式由值isSelected控制:

@override
BorderSide? get side => !isSelected
  ? isEnabled
    ? BorderSide(color: _colors.outline)
    : BorderSide(color: _colors.onSurface.withOpacity(0.12))
  : const BorderSide(color: Colors.transparent);

从源代码看，似乎没有其他方法可以实现边框样式和背景 colored颜色的精确组合，所以您只需像这样启用selected和禁用showCheckmark:

InputChip(
  // ...
  selected: true,
  showCheckmark: false,
)

Note:也可以将side设置为BorderSide(color: Colors.transparent)，但我们还必须手动设置背景 colored颜色 . Select 芯片时使用的背景 colored颜色取自RawChip中名为_getBackgroundColor的私有方法，这使得解决方案更加复杂.