Flutter基础widgets教程-Chip篇-阿里云开发者社区

Flutter基础widgets教程-Chip篇

2022-05-19 122

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Flutter基础widgets教程-Chip篇

1 Chip

中文翻译为碎片的意思，一般也是用作商品或者一些东西的标签。

2 构造函数

Chip({
    Key key,
    this.avatar,
    @required this.label,
    this.labelStyle,
    this.labelPadding,
    this.deleteIcon,
    this.onDeleted,
    this.deleteIconColor,
    this.deleteButtonTooltipMessage,
    this.shape,
    this.clipBehavior = Clip.none,
    this.backgroundColor,
    this.padding,
    this.materialTapTargetSize,
})

复制

3 常用属性

3.1 avatar：标签左侧Widget，一般为小图标

avatar: Icon(
    Icons.arrow_forward,
    color: Colors.black54,
),

复制

3.2 label：标签

label: Text("chip"),

复制

3.3 labelStyle：标签样式

labelStyle: TextStyle(color: Colors.black54),

复制

3.4 labelPadding：标签内边距

labelPadding: EdgeInsets.all(15.0),

复制

3.5 deleteIcon：删除图标

deleteIcon: Icon(Icons.close),

复制

3.6 onDeleted：删除回调

onDeleted: () {
     print("点击了删除噢");
},

复制

3.7 deleteIconColor：删除图标的颜色

deleteIconColor: Colors.black54,

复制

3.8 deleteButtonTooltipMessage：删除按钮的tip文字

deleteButtonTooltipMessage: "弹出提示",

复制

3.9 shape：形状

shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(2.0),
),

复制

3.10 backgroundColor：背景颜色

backgroundColor: Colors.orange,

复制

3.11 padding：chip内边距

padding: EdgeInsets.all(15.0),

复制

3.12 materialTapTargetSize：删除图标material点击区域大小

materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,

复制