如何实现组件剪切功能


我们在上一章回中介绍了Slider Widget相关的内容,本章回中将介绍如何使用Chip Widget.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

概念介绍

本文中提到的Chip Widget在屏幕上显示一小块区域,类似悬浮的按钮,通常在网页类操作中比较常见,比如最近的搜索记录,或者视频中的弹幕。在实际项目中使用场
景不是很多,不过本章回中还是准备去介绍它的使用方法。

使用方法

和其它的组件一样,Chip Widget提供了相关的属性来控自己,下面是一些常用的属性:

  • label属性:主要用来显示文本内容,类似于Button上的文本;
  • labelStyle属性:主要用来修改label中文字的style;
  • backgroundColor属性:主要用来修改整个chip组件的背景颜色;
  • avatar属性:主要用来在label显示的文字前面添加一个圆形文字或者图标;
  • deleteIcon属性:主要用来在label显示的文字后面添加图标;
  • deleteIconColor属性:主要用来修改deleteIcon属性中图标的颜色;
  • onDeleted属性:主要用来响应deleteIcon属性中图标的点击事件;
    上面介绍的这些属性中只有第一个属性是必选属性,其它属性都是可选属性,我们可以依据项目需求自行选择其中的属性;此外,还有一个需要注意的是只有onDelete属
    性有值的时候deleteIcon属性中对应的图标才能被显示出来,否则该图标不会被显示。

示例代码

Chip(
  label: Text('label'),
  backgroundColor: Colors.purpleAccent,
  avatar: CircleAvatar(
  backgroundColor: Colors.pinkAccent,
  child: Text("Avatar"),
  backgroundImage: AssetImage("images/ex.png"),
  ),
  //该属性只有设置onDeleted属性时才起作用,否则看不到图标,图标在尾部和头部相对应
  deleteIcon: Icon(Icons.delete),
  deleteIconColor: Colors.redAccent,
  onDeleted:()=>print('onDeleted callback'),
  //修改label中文字的style
  labelStyle: TextStyle(
    color: Colors.pink,
    fontSize: 21,
    backgroundColor: Colors.grey,
  ),
),

上面的代码中综合使用了各种属性,我们在相关地方都添加了注释,以方便大家理解代码。 上面的代码只是一个核心代码,完整的代码在Github上的ex028文件中,建议
大家参考完整代码中的内容,自己动手编译程序,体会一下Chip这个组件的使用方法。

其它类Chip

Chip组件还有其它类似的组件,这些组件主要是用来响应事件的,常用的组件有InputChip和ActionChip,这两种组件与Chip组件最大的区别是多了一个onPress
属性,该属性主要用来响应事件,类似按钮中的事件。我在这里就提供示例代码了,建议大家参考完整文件中的示例代码,同时自己动手去实践。
看官们,关于Chip Widget相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

talk_8

真诚赞赏,手有余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值