FilterChip 的功能跟 Checkbox 或者 Switch 有点像 .. 它会有选中还有未选中两种状态 .. 先复制一份之前添加的 Divider ... Container .. 还有这个 Wrap ..
修改一下标题文字 .. FilterChip .. 后面加上一个 _selected.toString() .. 这个 _selected 是一个列表,表示的就是被选中的项目,toString 这个方法可以把列表转换成字符串 ..
在上面再去定义一下它 .. 一个 List .. 项目的类型是 String .. 名字叫 _selected .. 让它先等于一个空白的列表 ..
再回来编辑一下 .. 这里我们要用的是 FilterChip .. 这个小部件里面没有 onPressed .. 去掉这个属性 .. 小部件里的 selected ,表示的就是选中的状态 .. 如果它的值是 true,就表示被选中的状态 .. false 就表示是未选中的状态 .. 这个状态可以判断一下 .. _selected.contains .. tag .. 也就是如果 _selected 里面包含当前的项目,这个小部件就是被选中的状态 ..
然后添加一个 onSelected .. 给它一个方法 .. 接收一个 value 参数,表示的就是选中的状态 .. 里面用一下 setState .. 再去判断一下 .. 如果 _selected.contains .. tag .. 我们可以执行一下 _selected.remove 在选中的项目里去掉当前的项目 ..
else .. 不然的话 .. 就可以把当前项目添加到 _selected 里面 .. _selected.add(tag) ..
下面再找到漂浮动作按钮 .. 点按它的时候,再把 _selected 属性的值设置成一个空白的列表 ..
然后到模拟器再去试一下 ..
按一下 FilterChip 里的某个项目 .. 被选中的项目,它的标签文字的左边会出现一个对号 . 背景颜色也会有变化 ..
选中的项目会被转换成字符串显示在这个标题里面 ..
按一下漂浮动作按钮,可以重置这些 FilterChip 的选中状态 ..