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

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

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

重要消息

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

    );
  

---

完毕