Flutter Chip 标签

参数详解

属性	说明
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'),),
    ],
  ), 
),

效果图

     

完整代码

查看完整代码