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创建其基本轮廓，但是当选择了芯片时，化身中会显示一个勾号图标。

我要禁用头像。

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

我该怎么做？

Answer 1

为了隐藏选定的刻度线标记。

在您的代码中，您需要在-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;
//        });
//      },
      ),

Answer 2

我认为您应该看看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;
                });
              }
            },
          );
        },
      ),
    );
  }
}

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

2 个答案: