Flutter基础widgets教程-Chip篇
时间:2022-07-26
本文章向大家介绍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,
- 构建Flex应用的10大误区
- Flex的起步推动新语言学习
- 简单科普云计算相关内容
- Silverlight初级教程-开发工具
- WCF的Binding模型之五:绑定元素(Binding Element)
- 2018年物联网发展趋势
- Silverlight初级教程-概述
- WCF的Binding模型之四:信道工厂(Channel Factory)
- 如何做一个好的前端重构工程师
- 云计算是否真的对企业来说无所不能?
- 科协带你开个2017年科技世界的总结会!
- 基于StockRanker算法的机器学习量化策略
- Enterprise Library深入解析与灵活应用(6):自己动手创建迷你版AOP框架
- 交易费用过高的比特币还能成为“未来货币”吗?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法