如何在Flutter Raw Chip中禁用芯片选择图标？

Question

我想创建一个带有芯片标签的TabBar，就像这样：

代码如下：

class TabChip extends StatefulWidget{

  final String chipTitle;

  TabChip(this.chipTitle) : assert(chipTitle != null);

  @override
  State<StatefulWidget> createState() {
    return _TabChipState();
  }
}

class _TabChipState extends State<TabChip>{

  bool isSelected = false;

  @override
  Widget build(BuildContext context) {
    return RawChip(
      avatar: CircleAvatar(),
      label: Text(widget.chipTitle,
          style: TextStyle(
            color: isSelected ? Colors.white : Colors.red,
            fontWeight: FontWeight.bold
          ),),
      backgroundColor: isSelected ? Colors.red : Colors.white, // Switch colors if chip is selected
      shape: StadiumBorder(side: BorderSide(color: Colors.red, width: 2.0)),
      selectedColor: Colors.red,
      selected: isSelected,
      onPressed: (){
        setState(() {
          isSelected = isSelected ? false : true;
        });
      },
//      onSelected: (bool value){
//        setState(() {
//          isSelected = true;
//        });
//      },
    );
  }
}

现在，我已经能够使用 RawChip Widget 创建此基本大纲，但当选择芯片时，会在头像中显示一个勾号图标。

我想禁用 Avatar。

我还想添加每次只能选择单个选项卡的功能。

我该怎么做？

- user8187389

Answer 1

我认为您应该查看ChoiceChip组件，它仅允许选择一个选项，并且没有勾选标记。

class TabChips extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _TabChipsState();
}

class _TabChipsState extends State<TabChips> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: List.generate(3, (index) {
          return ChoiceChip(
            selected: _selectedIndex == index,
            label: Text("$index"),
            onSelected: (selected) {
              if (selected) {
                setState(() {
                  _selectedIndex = index;
                });
              }
            },
          );
        },
      ),
    );
  }
}

- Jordan Davies

---

我正在TabBar中使用它。使用ChoiceChip会在后续出现问题吗？例如，在选择选项卡时，它能否加载正确的页面？ - user8187389

哦，抱歉，之前没注意到问题中的这个要求。如果要将它放在选项卡栏中，可能根本不需要使用芯片（chips），您需要考虑自定义选项卡的外观。类似于这个。 - Jordan Davies

我也发现了这个问题。现在，我正在努力理解它并根据我的需求进行自定义。请问如何添加矩形边框并根据所选状态更改文本颜色，就像问题图片中的那样？ - user8187389

明白了。感谢您的帮助。 - user8187389

Answer 2

为了隐藏所选中的勾号，在您的代码中，您需要在 RawChip 中添加 showCheckmark: false。

    RawChip(
        showCheckmark: false,  // Add this Code
      //  avatar: CircleAvatar(),
        label: Text(widget.chipTitle,
          style: TextStyle(
              color: isSelected ? Colors.white : Colors.red,
              fontWeight: FontWeight.bold
          ),),
        backgroundColor: isSelected ? Colors.red : Colors.white, // Switch colors if chip is selected
        shape: StadiumBorder(side: BorderSide(color: Colors.red, width: 2.0)),
        selectedColor: Colors.red,
        selected: isSelected,
        onPressed: (){
          setState(() {
            isSelected = !isSelected;
          });
        },
//      onSelected: (bool value){
//        setState(() {
//          isSelected = true;
//        });
//      },
      ),

- anmol.majhail

---

明白了。感谢您的帮助。 - user8187389