如何禁用 Flutter Raw Chip 中的芯片选择图标？答案

【问题标题】：How do I disable the chip selected icon in a Flutter Raw Chip?如何禁用 Flutter Raw Chip 中的芯片选择图标？
【发布时间】：2019-06-09 08:44:18
【问题描述】：

我想创建一个带有芯片的 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;
//        });
//      },
    );
  }
}

Now, I have been able to use a RawChip Widget to create the basic outline of this but when the chip is selected, a tick icon is shown in the avatar.

我想禁用头像。

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

我该怎么做？

【问题讨论】：

标签： dart flutter md-chip

【解决方案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;
                });
              }
            },
          );
        },
      ),
    );
  }
}

【讨论】：

我在 TabBar 中使用它。使用 ChoiceChip 是否会进一步解决问题，例如它能否在选择选项卡时加载正确的页面？
哦，抱歉错过了这个问题。如果它在标签栏中，您可能根本不想使用芯片，您希望查看自定义标签的外观。类似this
我也发现了。现在，我正在努力理解它并根据我的需要对其进行定制。有什么帮助我可以为矩形添加边框并根据问题图像中的选定状态更改文本颜色吗？
知道了。感谢您的帮助。

【解决方案2】：

为了隐藏选中的刻度线。

您需要在您的代码中添加 - showCheckmark: false 在您的 - RawChip

    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;
//        });
//      },
      ),

【讨论】：

知道了。感谢您的帮助。