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

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

重要消息

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

Clip 是Material Design的一个 Widget，用来完成标签作用，Clip中经过特点可装备一个文本、完好的 Widget、一个动作（比如按钮点击）。

1 根本运用作用如下

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(),
        ),
        ///-----------------------------------------------------
      ),
    );
  }
}

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),
    );
  }
}

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("--点击了删去");
      },
    );
  }

3.3 暗影设置

特点 elevation 用来设置暗影高度，shadowColor特点用来设置暗影色彩

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("--点击了删去");
      },
      ///
      elevation: 10,//暗影 高度
      shadowColor: Colors.blue,//暗影色彩
      backgroundColor: Colors.grey,//背景色
    );
  }

结束