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


    程序员如果敲一会就停半天,抱着一杯茶,表情拧巴,那才是在编程,在之前我要实现一级标签效果,我还在苦苦写了好多嵌套的代码,当我看到 Clip 时,泪奔啊,原来一个组件就可以实现,所以从事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},
      ];
      
      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,
        );
      }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    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 轮廓的颜色和重量。


    完毕

  • 相关阅读:
    前端跨域问题的解决思路
    linux 系统资源命令
    windows 上的C语言 图形界面设计函数 ( easyx 插件 )
    Python笔记 · 魔法函数 / Magic Methods / Dunder Methods
    Qt planeGame day10
    【Go】Go语言中的数组基本语法与应用实战
    复试(服务器测试实习生)、一面
    【Rust日报】2023-09-26 Deadpool v0.10 发布
    idea 类注释模板和方法注释模板设置
    网关中间件-Nginx(二)
  • 原文地址:https://blog.csdn.net/zl18603543572/article/details/127594673