Flutter（32）：Material组件之Chip

作者: starryxp | 来源:发表于2020-10-04 10:29 被阅读0次

Flutter教学目录持续更新中

Github源代码持续更新中

1.Chip介绍

Chip：标签，一个Material widget。它可以将一个复杂内容实体展现在一个小块中，如联系人。
ActionChip：在Chip基础上多了点击事件，长安提示，取消了删除属性
ChoiceChip：在ActionChip基础上多了是否选中，取消了点击事件,跟长按事件
FilterChip：在ChoiceChip多了checkMark等属性
InputChip：在FilterChip基础上多了是否可用，点击事件，长安提示等属性，保留了取消了删除属性

2.Chip属性

avatar：Chip左侧子widget
label：文本
labelStyle：文本样式
labelPadding：文本内边距
deleteIcon：删除图标（这个不是只能放删除图片，做其他操作也是可以的）
onDeleted：删除回调
deleteIconColor：如果删除图片是Icon支持设置颜色
deleteButtonTooltipMessage：deleteIcon长按提示
shape：形状
clipBehavior = Clip.none：
backgroundColor：背景颜色
padding：内边距
elevation：阴影
shadowColor：阴影颜色

3.ActionChip属性

avatar：Chip左侧子widget
label：文本
labelStyle：文本样式
labelPadding：文本内边距
onPressed：点击事件
pressElevation：点击阴影
tooltip：长安提示
shape：形状
clipBehavior = Clip.none：
backgroundColor：背景颜色
padding：内边距
elevation：阴影
shadowColor：阴影颜色

4.ChoiceChip属性

avatar：Chip左侧子widget
label：文本
labelStyle：文本样式
labelPadding：文本内边距
onSelected：选中回调
pressElevation：点击阴影
selected：是否选中
selectedColor：选中颜色
shape：形状
clipBehavior = Clip.none：
backgroundColor：背景色
padding：内边距
elevation：阴影
shadowColor：阴影颜色
selectedShadowColor：选中阴影颜色
avatarBorder = const CircleBorder()：avatar边框

5.FilterChip属性

avatar：Chip左侧子widget
label：文本
labelStyle：文本样式
labelPadding：文本内边距
selected = false：是否选中
onSelected：选中回调
pressElevation：点击阴影
selectedColor：选中颜色
shape：形状
clipBehavior = Clip.none：
backgroundColor：背景色
padding：内边距
elevation：阴影
shadowColor：阴影颜色
selectedShadowColor：选中阴影颜色
showCheckmark：显示选中mark，选中时会在avatar位置出现一个✔
checkmarkColor：mark颜色
avatarBorder = const CircleBorder()：avatar边框

6.InputChip属性

avatar：Chip左侧子widget
label：文本
labelStyle：文本样式
labelPadding：文本内边距
selected = false：是否选中
isEnabled = true：是否可用
onSelected：选中回调
deleteIcon：删除图标（这个不是只能放删除图片，做其他操作也是可以的）
onDeleted：删除回调
deleteIconColor：如果删除图片是Icon支持设置颜色
deleteButtonTooltipMessage：deleteIcon长按提示
onPressed：点击事件，不可与onSelected同时存在
pressElevation：点击阴影
disabledColor：不可用颜色
selectedColor：选中颜色
tooltip：长安提示，只有设置onPressed才生效
shape：形状
clipBehavior = Clip.none：
backgroundColor：背景色
padding：内边距
elevation：阴影
shadowColor：阴影色
selectedShadowColor：选中阴影色
showCheckmark：显示选中mark，选中时会在avatar位置出现一个✔
checkmarkColor：mark颜色
avatarBorder = const CircleBorder()：Chip左侧子widget边框

7.Chip

这是一个最基础的Chip，功能也相对较少

1601714295(1).png

 _myChip() {
    return Chip(
      avatar: Icon(Icons.account_circle),
      label: Text('Chip'),
      labelStyle: TextStyle(
        fontSize: 14,
        color: Colors.black,
      ),
      labelPadding: EdgeInsets.all(10),
      deleteIcon: Icon(Icons.delete) /*Image.asset('images/scan.png')*/,
      onDeleted: () {
        ToastUtil.showToast('onDeleted');
      },
      deleteIconColor: Colors.red,
      deleteButtonTooltipMessage: '删除',
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      clipBehavior: Clip.antiAlias,
      backgroundColor: Colors.grey,
      padding: EdgeInsets.all(10),
      elevation: 10,
      shadowColor: Colors.amber,
    );
  }

8.ActionChip

这个比Chip多了点击事件，长安提示，还可以设置点击阴影，但是去掉了删除属性

未点击.png

点击时.png

 _myActionChip() {
    return ActionChip(
      avatar: Icon(Icons.account_circle),
      label: Text('ActionChip'),
      labelStyle: TextStyle(
        fontSize: 14,
        color: Colors.black,
      ),
      labelPadding: EdgeInsets.all(10),
      onPressed: () {
        ToastUtil.showToast('onPressed');
      },
      pressElevation: 20,
      tooltip: 'InputChip',
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      clipBehavior: Clip.antiAlias,
      backgroundColor: Colors.amber,
      padding: EdgeInsets.all(10),
      elevation: 10,
      shadowColor: Colors.amber,
    );
  }

9.ChoiceChip

在ActionChip基础上多了是否选中，取消了点击事件，跟长按事件

未选中.png

已选中.png

_myChoiceChip() {
    return ChoiceChip(
      avatar: Icon(Icons.account_circle),
      label: Text('ChoiceChip'),
      labelStyle: TextStyle(
        fontSize: 14,
        color: Colors.black,
      ),
      labelPadding: EdgeInsets.all(10),
      selected: _isSelected,
      onSelected: (isSelected) {
        setState(() {
          _isSelected = isSelected;
        });
      },
      pressElevation: 20,
      disabledColor: Colors.grey,
      selectedColor: Colors.blue,
      tooltip: 'InputChip',
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      clipBehavior: Clip.antiAlias,
      backgroundColor: Colors.amber,
      padding: EdgeInsets.all(10),
      elevation: 10,
      shadowColor: Colors.amber,
      selectedShadowColor: Colors.blue,
      avatarBorder: CircleBorder(),
    );
  }

10.FilterChip

在ChoiceChip多了checkMark等属性，选中时会在avatar位置出现一个✔

1601714876(1).png

1601714884(1).png

_myFilterChip() {
    return FilterChip(
      avatar: Icon(Icons.account_circle),
      label: Text('FilterChip'),
      labelStyle: TextStyle(
        fontSize: 14,
        color: Colors.black,
      ),
      labelPadding: EdgeInsets.all(10),
      selected: _isSelected,
      onSelected: (isSelected) {
        setState(() {
          _isSelected = isSelected;
        });
      },
      pressElevation: 20,
      disabledColor: Colors.grey,
      selectedColor: Colors.blue,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      clipBehavior: Clip.antiAlias,
      backgroundColor: Colors.amber,
      padding: EdgeInsets.all(10),
      elevation: 10,
      shadowColor: Colors.amber,
      selectedShadowColor: Colors.blue,
      checkmarkColor: Colors.red,
      showCheckmark: true,
      avatarBorder: CircleBorder(),
    );
  }

11.InputChip

这个相当于前面所有功能的聚合了，属性基本都有，但是有几个注意点

onDeleted与onPressed不可同时存在
tooltip只有在设置了onPressed才生效

1601714901(1).png

1601714910(1).png

_myInputChip() {
    return InputChip(
      avatar: Icon(Icons.account_circle),
      label: Text('InputChip'),
      labelStyle: TextStyle(
        fontSize: 14,
        color: Colors.black,
      ),
      labelPadding: EdgeInsets.all(10),
      selected: _isSelected,
      isEnabled: true,
      onSelected: (isSelected) {
        setState(() {
          _isSelected = isSelected;
        });
      },
      deleteIcon: Icon(Icons.delete),
      onDeleted: () {
        ToastUtil.showToast('onDeleted');
      },
      deleteIconColor: Colors.red,
      deleteButtonTooltipMessage: '删除',
      // onPressed: () {
      //   ToastUtil.showToast('onPressed');
      // },
      pressElevation: 20,
      disabledColor: Colors.grey,
      selectedColor: Colors.blue,
      tooltip: 'InputChip',
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      clipBehavior: Clip.antiAlias,
      backgroundColor: Colors.amber,
      padding: EdgeInsets.all(10),
      elevation: 10,
      shadowColor: Colors.amber,
      selectedShadowColor: Colors.blue,
      checkmarkColor: Colors.red,
      showCheckmark: true,
      avatarBorder: CircleBorder(),
    );
  }

下一节：Material组件之ListTile、RefreshIndicator、ListView、Divider

Flutter（33）：Material组件之ListTile、RefreshIndicator、ListView、Divider

Flutter教学目录持续更新中

Github源代码持续更新中

网友评论

Flutter教学

本文标题：Flutter（32）：Material组件之Chip

本文链接：https://www.haomeiwen.com/subject/egmwuktx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

Flutter（32）：Material组件之Chip

Flutter教学目录持续更新中

Github源代码持续更新中

1.Chip介绍

2.Chip属性

3.ActionChip属性

4.ChoiceChip属性

5.FilterChip属性

6.InputChip属性

7.Chip

8.ActionChip

9.ChoiceChip

10.FilterChip

11.InputChip

Flutter（33）：Material组件之ListTile、RefreshIndicator、ListView、Divider

Flutter教学目录持续更新中

Github源代码持续更新中

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Flutter教学