前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter基础widgets教程-Chip篇

Flutter基础widgets教程-Chip篇

原创
作者头像
青年码农
发布2020-10-10 16:04:19
5540
发布2020-10-10 16:04:19
举报
文章被收录于专栏:青年码农

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,

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1 Chip
  • 2 构造函数
  • 3 常用属性
    • 3.1 avatar:标签左侧Widget,一般为小图标
      • 3.2 label:标签
        • 3.3 labelStyle:标签样式
          • 3.4 labelPadding:标签内边距
            • 3.5 deleteIcon:删除图标
              • 3.6 onDeleted:删除回调
                • 3.7 deleteIconColor:删除图标的颜色
                  • 3.8 deleteButtonTooltipMessage:删除按钮的tip文字
                    • 3.9 shape:形状
                      • 3.10 backgroundColor:背景颜色
                        • 3.11 padding:chip内边距
                          • 3.12 materialTapTargetSize:删除图标material点击区域大小
                          领券
                          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档