Flutter基础widgets教程-Chip篇

简介: 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,

复制

相关文章
|
13天前
|
Dart JavaScript 前端开发
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
Flutter 是 Google 开发的开源 UI 框架,用于快速构建高性能的移动、Web 和桌面应用。Flutter 通过 Widget 构建 UI,每个 UI 元素都是 Widget,包括文本、按钮、图片等。Widget 不仅描述外观,还描述行为,是不可变的。常见的 Widget 包括结构型(Container、Column、Row)、呈现型(Text、Image)、交互型(ElevatedButton)和状态管理型(StatefulWidget)。Flutter 与鸿蒙 Next 在组件化架构、开发语言、布局系统、性能和跨平台支持方面各有优势
64 0
|
3月前
|
开发者 Windows
Flutter笔记:Widgets Easier组件库(9)使用弹窗
Flutter笔记:Widgets Easier组件库(9)使用弹窗
107 3
|
3月前
|
数据安全/隐私保护 Android开发 开发者
Flutter笔记:Widgets Easier组件库-使用隐私守卫
Flutter笔记:Widgets Easier组件库-使用隐私守卫
50 2
|
3月前
|
UED 开发者
Flutter笔记:Widgets Easier组件库(13)- 使用底部弹窗
Flutter笔记:Widgets Easier组件库(13)- 使用底部弹窗
59 2
|
3月前
|
开发者
Flutter笔记:Widgets Easier组件库(5)使用加减器
Flutter笔记:Widgets Easier组件库(5)使用加减器
77 2
|
3月前
|
开发者 容器
Flutter笔记:Widgets Easier组件库(4)使用按钮组
Flutter笔记:Widgets Easier组件库(4)使用按钮组
33 2
|
3月前
|
开发者 容器
Flutter笔记:Widgets Easier组件库(3)使用按钮组件
Flutter笔记:Widgets Easier组件库(3)使用按钮组件
44 2
|
3月前
|
开发者
Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝(Tip Toasts)
Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝(Tip Toasts)
48 1
|
3月前
|
开发者
Flutter笔记:Widgets Easier组件库 - 使用标签(Tag)
Flutter笔记:Widgets Easier组件库 - 使用标签(Tag)
110 0
|
3月前
|
开发者
Flutter笔记:Widgets Easier组件库(12)使用消息吐丝(Notify Toasts)
Flutter笔记:Widgets Easier组件库(12)使用消息吐丝(Notify Toasts)
74 0