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

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,//背景色


    );

  }

完毕