首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter基础widgets教程-Chip篇

1 Chip

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

2 构造函数

代码语言:javascript
复制
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,一般为小图标

代码语言:javascript
复制
avatar: Icon(
    Icons.arrow_forward,
    color: Colors.black54,
),

3.2 label:标签

代码语言:javascript
复制
label: Text("chip"),

3.3 labelStyle:标签样式

代码语言:javascript
复制
labelStyle: TextStyle(color: Colors.black54),

3.4 labelPadding:标签内边距

代码语言:javascript
复制
labelPadding: EdgeInsets.all(15.0),

3.5 deleteIcon:删除图标

代码语言:javascript
复制
deleteIcon: Icon(Icons.close),

3.6 onDeleted:删除回调

代码语言:javascript
复制
onDeleted: () {
     print("点击了删除噢");
},

3.7 deleteIconColor:删除图标的颜色

代码语言:javascript
复制
deleteIconColor: Colors.black54,

3.8 deleteButtonTooltipMessage:删除按钮的tip文字

代码语言:javascript
复制
deleteButtonTooltipMessage: "弹出提示",

3.9 shape:形状

代码语言:javascript
复制
shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(2.0),
),

3.10 backgroundColor:背景颜色

代码语言:javascript
复制
backgroundColor: Colors.orange,

3.11 padding:chip内边距

代码语言:javascript
复制
padding: EdgeInsets.all(15.0),

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

代码语言:javascript
复制
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,

下一篇
举报
领券