Flutter Chip 标签

知识共享许可协议 版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons

参数详解

属性 说明
avatar 在芯片标签之前显示的小部件
label 标签文字
labelStyle 标签文字样式
labelPadding 标签文字内间距
deleteIcon 添加图标按钮 与onDeleted 配合使用,单独使用无效
onDeleted 图标按钮监听
deleteIconColor deleteIcon颜色
deleteButtonTooltipMessage deleteIcon长按文字解说
shape 形状
clipBehavior 裁剪  默认Clip.none(不裁剪)
backgroundColor 背景颜色
padding 内间距
materialTapTargetSize 配置tap目标的最小大小
elevation 阴影高度
shadowColor 阴影颜色

代码示例

Chip(label: Text('Text'),),

 进行了一些属性设置

Chip(
  avatar: Icon(Icons.add_alert),
  label: Text('buttom'),
  deleteIcon: Icon(Icons.close),
  deleteIconColor:Colors.red,
  deleteButtonTooltipMessage:'干啥',
  labelStyle: TextStyle(color: Colors.white),
  backgroundColor: Colors.blue,
  elevation:20,
  shadowColor:Colors.red,
  onDeleted: (){
    print('object');
  },
),

我们发现,每一个Chip都要设置很多属性,如果Chip太多,会造成多次编写重复代码,
此时,我们可以使用ChipTheme组件,看代码:

ChipTheme(
//统一设置Chip组件样式
  data: ChipThemeData(
    backgroundColor:Colors.red,
    disabledColor:Colors.yellow,
    selectedColor:Colors.blue,
    secondarySelectedColor:Colors.black,
    labelPadding:EdgeInsets.fromLTRB(10, 0, 10, 0),
    padding:EdgeInsets.all(0),
    shape:BeveledRectangleBorder(borderRadius: BorderRadius.circular(20.0),side: new BorderSide(style: BorderStyle.none,)),
    labelStyle:TextStyle(color: Colors.white),
    secondaryLabelStyle:TextStyle(color: Colors.white),
    brightness:Brightness.dark,
    elevation:20,
    shadowColor:Colors.lime,
  ),
  child: Wrap(
    spacing: 8.0,
    runSpacing: 10.0, 
    children: <Widget>[
      Chip(label: Text('Text'),),
      Chip(label: Text('TextField'),),
      Chip(label: Text('Form'),),
      Chip(label: Text('Image'),),
    ],
  ), 
),

效果图

     

完整代码

查看完整代码

猜你喜欢

转载自blog.csdn.net/ruoshui_t/article/details/93617065