Flutter ChoiceChip 用来实现选择标签效果

Posted 2022-11-27 早起的年轻人

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

重要消息

• flutter从入门 到精通 系列文章

---

ChoiceChip 是Material Design的一个 Widget，用来实现选择标签效果，如下图所示

1 ChoiceChip 核心使用代码如下

class _ChoiceClipHomeState extends State<ChoiceClipHome> 
  ///当前选中的索引
  int? _value = 1;

  final List<Map<String, dynamic>> _tagList = [
    "tag": "早起", "index": 0,
    "tag": "早睡", "index": 1,
    "tag": "精神", "index": 2,
  ];
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: const Text("ChoiceClip")),
      body: Center(
        ///核心代码
        child: buildChoiceClip(),
      ),
    );
  
  

  Widget buildChoiceClip() 
    return Wrap(
      children: _tagList
          .map((e) => Padding(
                padding: EdgeInsets.only(left: 5, right: 5),
                child: buildItem(e),
              ))
          .toList(),
    );
  
 ///构建每一个 ChoiceChip
  ChoiceChip buildItem(Map<String, dynamic> map) 
    String tag = map["tag"];
    int index = map["index"];
    return ChoiceChip(
      label: Text(tag),
      selected: _value == index,
      onSelected: (bool selected) 
        setState(() 
          _value = selected ? index : null;
        );
      ,
      labelStyle: TextStyle(
        color: _value == index ? Colors.white : Colors.black,
      ),
      selectedColor: Colors.red,
      surfaceTintColor: Colors.white,
    );
  

2 ChoiceChip 属性概览

• autofocus → bool
  如果此小部件将被选择为初始焦点，而其作用域中目前没有其他节点被聚焦，则为True。
  最后

• avatar → Widget
  文本最左侧显示的Widget，一般是个小图标

• avatarBorder→ShapeBorder
  当 ChoiceChip的 selected 属性为 true.，在avatar上绘制的半透明高光的形状。

• backgroundColor
  颜色将用于 ChoiceChip 未选中 并且 isEnabled 的值为 true 时显示的背景色

• disabledColor→颜色?
  颜色将用于 ChoiceChip 未选中 并且 isEnabled 的值为 false 时显示的背景色

• elevation → double?
  阴影高度

• iconTheme→IconThemeData吗?
  用于 ChoiceChip 中所有图标的主题。

• isEnabled→bool
  该芯片是否可用于输入。

• labelPadding→EdgeInsetsGeometry吗?
  标签小部件周围的填充。

• labelStyle→TextStyle吗?
  应用于ChoiceChip标签的文本样式。

• onselect→ValueChanged < bool > ?
  当ChoiceChip 在选定和取消选定状态之间更改时调用。

• pressElevation→双吗?
  在按压运动期间，将应用于ChoiceChip 阴影调试。

• selected →bool
  该ChoiceChip是否被选中。

• selectedColor→颜色?
  用于ChoiceChip背景的颜色，表示它已被选中。

• selectedShadowColor→颜色?
  选中时阴影的颜色

• shadowColor→颜色?
  默认显示的阴影的颜色。
  最后
  shape→OutlinedBorder吗?
  在 ChoiceChip 周围绘制的轮廓边界。
  side →BorderSide吗?
  ChoiceChip 轮廓的颜色和重量。

---

完毕