Flutter中FilterChip用来实现过滤标签效果

快来打我* 2023-10-07 20:53 11阅读 0赞

> 程序员如果敲一会就停半天，抱着一杯茶，表情拧巴，那才是在编程，在之前我要实现一级标签效果，我还在苦苦写了好多嵌套的代码，当我看到 Clip 时，泪奔啊，原来一个组件就可以实现，所以从事Flutter开发的小伙伴可以瞅瞅效果，万一用上呢 。

**重要消息**

*  [flutter从入门 到精通 系列文章][flutter_ _]

--------------------

FilterChip 是Material Design的一个 Widget，用来实现过滤标签效果，如下图所示  
![在这里插入图片描述][3ba07a6cfd8047ecba52b1c362ffbfc4.gif_pic_center]

##### 1 测试用例页面 - 启动函数 #####

///flutter应用程序中的入口函数
    void main() => runApp(TextApp());
    
    ///应用的根布局
    class TextApp extends StatelessWidget {
        
      @override
      Widget build(BuildContext context) {
        
        ///构建Materia Desin 风格的应用程序
        return MaterialApp(
          title: "Material3",
          ///在主题中启用
          theme: ThemeData(
            brightness: Brightness.light,
            ///主题是蓝色
            colorSchemeSeed: Colors.blue,
          ),
          ///默认的首页面
          home: CastFiltePage(),
        );
      }
    }

##### 2 测试用例页面-主页面 #####

主页面涉及到数据状态更新，所以使用了 StatefulWidget。

class CastFiltePage extends StatefulWidget {
        
      const CastFiltePage({
        super.key});
    
      @override
      State createState() => CastFiltePageState();
    }
    
    class CastFiltePageState extends State<CastFiltePage> {
        
      ///源数
      final List<ActorFilterEntry> _cast = <ActorFilterEntry>[
        const ActorFilterEntry('早起', '1'),
        const ActorFilterEntry('早睡', '2'),
        const ActorFilterEntry('精神', '3'),
      ];
    
      ///过滤显示的数据
      final List<String> _filters = <String>[];
    
      @override
      Widget build(BuildContext context) {
        ...}
    }

###### 2.1 build 构建页面UI ######

@override
      Widget build(BuildContext context) {
        
        return Scaffold( //页面角手架
          appBar: AppBar(title: const Text("FilterChip")),//标题
          body: Center(//页面居中
            child: Column(//竖直排开
              mainAxisAlignment: MainAxisAlignment.center, //竖直居中
              children: <Widget>[
                Wrap(
                  children: actorWidgets.toList(),
                ),
                const SizedBox(
                  height: 44,
                  child: Divider(),
                ),
                Text('选中的 filters 集合: ${_filters.join(', ')}'),
              ],
            ),
          ),
        );
      }
    }

###### 2.2 actorWidgets 是构建的 FilterChip 相关的内容 ######

///构建显示所有的源数据
      Iterable<Widget> get actorWidgets {
        
        
        return _cast.map((ActorFilterEntry actor) {
        
          String leftIndex = actor.index;
          String rightLabel = actor.name;
          return Padding(
            padding: const EdgeInsets.all(4.0),
            child: FilterChip(
              //最左侧的小图片
              avatar: CircleAvatar(child: Text(leftIndex)),
              //显示的文本
              label: Text(rightLabel),
              //是否选中
              selected: _filters.contains(rightLabel),
              //选中的事件切换
              onSelected: (bool value) {
        
                //更新数据
                setState(() {
        
                  if (value) {
        
                    //如果是选中状态 则添加
                    _filters.add(rightLabel);
                  } else {
        
                    //如果是未选中状态 则删除
                    _filters.removeWhere((String name) {
        
                      return name == rightLabel;
                    });
                  }
                });
              },
            ),
          );
        });
      }

其他属性与 Clip 的属性效果是一致的，大家可点击查看[Flutter Clip 用来实现文本标签的效果][Flutter Clip]

--------------------

完毕

[flutter_ _]: https://blog.csdn.net/zl18603543572/article/details/93532582
[3ba07a6cfd8047ecba52b1c362ffbfc4.gif_pic_center]: https://img-blog.csdnimg.cn/3ba07a6cfd8047ecba52b1c362ffbfc4.gif#pic_center
[Flutter Clip]: https://biglead.blog.csdn.net/article/details/127581885