前言

关于在学习Flutter Chip 标签中删除标签，遇到点小问题，经过反复调试和测试，总结一下

多重启项目能解决80%问题！！！

经验之谈：(一开始Key挂不上，后续经过反复重启又可以挂上去了)

废话不多说我们直接进行学习！

功能实现

准备工作

标签数量固定删除实例

  ...State
//少量 处理 ，列表处理
  List<Container> chipList = [];
  // late Container firstContainer;
  // late Container twoContainer;
  // late Container threeContainer;

 @override
  void initState() {
    super.initState();

    Container firstContainer = Container(
      margin: EdgeInsets.only(right: 20),
      child: Chip(label: Text("JSP",style: TextStyle(color: Colors.white)),backgroundColor: Colors.blue,deleteIconColor: Colors.red,deleteIcon: Icon(Icons.close),deleteButtonTooltipMessage: "移除",onDeleted: ()=>{
        setState(() {
          list.remove(firstContainer);
        })

      }))
    );
    //
    Container twoContainer = Container(
      margin: EdgeInsets.only(right: 20),
      child: Chip(label: Text("PHP",style: TextStyle(color: Colors.white)),backgroundColor: Colors.blue,deleteIconColor: Colors.red,deleteIcon: Icon(Icons.close),deleteButtonTooltipMessage: "移除",onDeleted: ()=>{
        setState(() {
           list.remove(twoContainer);
        })

      }))
    );
    //
    Container threeContainer = Container(
        margin: EdgeInsets.only(right: 20),
        child: Chip(
            label: const Text("ASP",
                style: TextStyle(color: Colors.white),
                ),
            backgroundColor: Colors.blue,
            deleteIconColor: Colors.red,
            deleteIcon: Icon(Icons.close),
            deleteButtonTooltipMessage: "移除",
            onDeleted: () => {
              setState(() {
                list.remove(threeContainer);
              })
                }));
    chipList.add(firstContainer);
   chipList.add(twoContainer);
   chipList.add(threeContainer);
  }

  List<Container> getChipList(){
    return chipList;
  }

可见，固定数量的标签通过对象依次删除即可！

标签数量无固定数组形式删除实例

   ...State
List<Container> chipList = [];
  //少量 处理 ，列表处理
  // late Container firstContainer;
  // late Container twoContainer;
  // late Container threeContainer;

  @override
  Widget build(BuildContext context) {
    return getHobbyWidget();
  }
@override
  void initState() {
    super.initState();

    Container firstContainer = Container(
      margin: EdgeInsets.only(right: 20),
      child: Chip(label: Text("JSP",style: TextStyle(color: Colors.white)),backgroundColor: Colors.blue,deleteIconColor: Colors.red,deleteIcon: Icon(Icons.close),deleteButtonTooltipMessage: "移除",onDeleted: ()=>{
        setState(() {
          removeChild(const ValueKey("JSP"));
        })
        // list.removeAt(0)
      }),key:const ValueKey("JSP")
    );
    //
    Container twoContainer = Container(
      margin: EdgeInsets.only(right: 20),
      child: Chip(label: Text("PHP",style: TextStyle(color: Colors.white)),backgroundColor: Colors.blue,deleteIconColor: Colors.red,deleteIcon: Icon(Icons.close),deleteButtonTooltipMessage: "移除",onDeleted: ()=>{
        setState(() {
          removeChild(const ValueKey("PHP"));
        })

      }),key: const ValueKey("PHP")
    );
    //
    Container threeContainer = Container(
        margin: EdgeInsets.only(right: 20),
        child: Chip(
            label: const Text("ASP",
                style: TextStyle(color: Colors.white),
                ),
            backgroundColor: Colors.blue,
            deleteIconColor: Colors.red,
            deleteIcon: Icon(Icons.close),
            deleteButtonTooltipMessage: "移除",
            onDeleted: () => {
              setState(() {
                 removeChild(const ValueKey("ASP"));
              })
                }),key: const ValueKey("ASP"));
    chipList.add(firstContainer);
   chipList.add(twoContainer);
   chipList.add(threeContainer);
  }

  List<Container> getChipList(){
    return chipList;
  }

  /**
   * 移除节点
   */
  bool removeChild(Key key){
    for (var element in chipList) {
      Key? elementKey = element.key;
      if(elementKey == key){
        chipList.remove(element);
        return true;
      }
    }
    return false;
  }

这种方式是最简单且是最轻便的数组删除形式，根据Key 进行删除！

感谢你的观看！