Flutter Clip 用来实现文本标签的效果

矫情吗；* 2023-10-07 20:49 9阅读 0赞

> 程序员如果敲一会就停半天，抱着一杯茶，表情拧巴，那才是在编程

**重要消息**

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

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

Clip 是Material Design的一个 Widget，用来实现标签效果，Clip中通过属性可配置一个文本、完整的 Widget、一个动作（比如按钮点击）。

##### 1 基本使用效果如下 #####

![在这里插入图片描述][c2ae6fa1014144f0be481d07509b161f.png]

class ClipHomeState extends State {
        
      @override
      Widget build(BuildContext context) {
        
        return Scaffold(
          appBar: AppBar(title: const Text("Clip")),
          body: const Center(
            ///-----------------------------------------------------
            ///核心代码
            child: Chip(
              //左侧的小组件
              avatar: CircleAvatar(
                backgroundColor: Colors.red,
                foregroundColor: Colors.white,
                child: Text('早'),
              ),
              //右侧的文本
              label: Text('Flutter 基础 '),
            ),
    
            ///-----------------------------------------------------
          ),
        );
      }
    }

Chip 的 avatar 属性配置的是一个Widget，所这里可以组合足够复杂的 Widget合集，在本实例中只是使用了 CircleAvatar，CircleAvatar常用来展示圆形的小头像。

##### 2 结合 Wrap 组件实现多标签效果 #####

class ClipWrapHomeState extends State {
        
      final List<String> _tagList = [
        "早起", "晚睡", "测试", "努力",
        "不想睡觉", "清晨的太阳", "这是什么", "哈哈"
      ];
    
      @override
      Widget build(BuildContext context) {
        
        return Scaffold(
          appBar: AppBar(title: const Text("Clip")),
          body: Padding(
            ///-----------------------------------------------------
            ///核心代码
            padding: EdgeInsets.all(12),
            child: Wrap(
              spacing: 10,
              children: _tagList.map((e) => Chip(label: Text(e))).toList(),
            ),
            ///-----------------------------------------------------
          ),
        );
      }
    }

![在这里插入图片描述][5d1c6f02882e4f90a4f12e0c78df53cf.png]

##### 3 Clip 的属性概述 #####

###### 3.1 label 文本相关配置 ######

label 是用来配置文本的，labelStyle是用来设置这个文本的样式，如颜色、大小 、粗细等等，labelPadding是用来设置文本四周的边距的。

Chip buildChip() {
        
        return const Chip(
          //左侧的小组件
          avatar: CircleAvatar(
            backgroundColor: Colors.red,
            foregroundColor: Colors.white,
            child: Text('早'),
          ),
    
          ///右侧的文本
          label: Text('Flutter 基础 '),
          labelStyle: TextStyle(color: Colors.red),
          labelPadding: EdgeInsets.only(left: 12, right: 12),
        );
      }
    }

![在这里插入图片描述][e811fb5360b540ff8bd3310044e82276.png]

###### 3.2 右侧的删除按钮配置 deleteIcon ######

avatar 是用来配置左侧的显示的小 Widget，deleteIcon是用来配置右侧的删除按钮的。

Chip buildChip() {
        
        return Chip(
          //左侧的小组件
          avatar: const CircleAvatar(
            backgroundColor: Colors.red,
            foregroundColor: Colors.white,
            child: Text('早'),
          ),
    
          ///右侧的文本
          label: Text('Flutter 基础 '),
          labelStyle: TextStyle(color: Colors.red),
          labelPadding: EdgeInsets.only(left: 12, right: 12),
    
          ///
          deleteIcon: Icon(Icons.close),
          //删除按钮颜色
          deleteIconColor: Colors.red,
          //长按的提示
          deleteButtonTooltipMessage: "删除",
          onDeleted: () {
        
            print("--点击了删除");
          },
        );
      }

![在这里插入图片描述][4b05bfc29b8c4f46ab642cdef55db1e2.png]

##### 3.3 阴影设置 #####

属性 elevation 用来设置阴影高度，shadowColor属性用来设置阴影颜色

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

完毕

[flutter_ _]: https://blog.csdn.net/zl18603543572/article/details/93532582
[c2ae6fa1014144f0be481d07509b161f.png]: https://img-blog.csdnimg.cn/c2ae6fa1014144f0be481d07509b161f.png
[5d1c6f02882e4f90a4f12e0c78df53cf.png]: https://img-blog.csdnimg.cn/5d1c6f02882e4f90a4f12e0c78df53cf.png
[e811fb5360b540ff8bd3310044e82276.png]: https://img-blog.csdnimg.cn/e811fb5360b540ff8bd3310044e82276.png
[4b05bfc29b8c4f46ab642cdef55db1e2.png]: https://img-blog.csdnimg.cn/4b05bfc29b8c4f46ab642cdef55db1e2.png