Flutter?Widgets之标签类控件Chip详解

更新时间：2022年10月20日 15:56:50 作者：风雨_83

这篇文章主要为大家介绍了Flutter?Widgets之标签类控件Chip详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

概述：

Flutter 标签类控件大全ChipFlutter内置了多个标签类控件，但本质上它们都是同一个控件，只不过是属性参数不同而已，在学习的过程中可以将其放在放在一起学习，方便记忆。

RawChip

Material风格标签控件，此控件是其他标签控件的基类，通常情况下，不会直接创建此控件，而是使用如下控件：

Chip
InputChip
ChoiceChip
FilterChip
ActionChip

如果你想自定义标签类控件，通常使用此控件。

RawChip可以通过设置onSelected被选中，设置onDeleted被删除，也可以通过设置onPressed而像一个按钮，它有一个label属性，有一个前置（avatar）和后置图标（deleteIcon）。

 RawChip(label: Text('RawChip')),

效果：

设置左侧控件，一般是图标：

 RawChip(
            avatar: CircleAvatar(child: Text('R'),),
            label: Text('RawChip'),
            isEnabled: false,//禁止点选状态
          ),

设置label的样式和内边距：

 RawChip(
            avatar: CircleAvatar(child: Text('R'),),
            label: Text('RawChip'),
            // isEnabled: false,//禁止点选状态
            labelPadding: EdgeInsets.symmetric(horizontal: 20),
            padding: EdgeInsets.only(left: 10,right: 10,top: 5),
          ),

设置删除相关属性：

  RawChip(
            label: Text('RawChip'),
            onDeleted: (){
              print('onDeleted');
            },
            deleteIcon: Icon(Icons.delete),
            deleteIconColor: Colors.red,
            deleteButtonTooltipMessage: "删除",
            // isEnabled: false,//禁止点选状态
            labelPadding: EdgeInsets.symmetric(horizontal: 10),
            padding: EdgeInsets.only(left: 10,right: 10,top: 5,bottom: 5),
          ),

设置形状、背景颜色及内边距,阴影：

 RawChip(
            label: Text('RawChip'),
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
            backgroundColor: Colors.blue,
            padding: EdgeInsets.symmetric(vertical: 10),
            elevation: 8,
            shadowColor: Colors.grey,
          )

materialTapTargetSize是配置组件点击区域大小的属性，很多组件都有此属性，比如：

[FloatingActionButton], only the mini tap target size is increased.
* [MaterialButton]
* [OutlineButton]
* [FlatButton]
* [RaisedButton]
* [TimePicker]
* [SnackBar]
* [Chip]
* [RawChip]
* [InputChip]
* [ChoiceChip]
* [FilterChip]
* [ActionChip]
* [Radio]
* [Switch]
* [Checkbox]

MaterialTapTargetSize有2个值，分别为：

padded：最小点击区域为48*48。
shrinkWrap：子组件的实际大小。

设置选中状态、颜色：

 RawChip(
              label: Text('RawChip'),
               selected: _selected,
            onSelected: (v){
                setState(() {
                  _selected =v;
                });
            },
            selectedColor: Colors.blue,
            selectedShadowColor: Colors.red,
          )

Chip

Chip是一个简单的标签控件，仅显示信息和删除相关属性，是一个简化版的RawChip，用法和RawChip一样。源代码如下：

@override
Widget build(BuildContext context) {
  assert(debugCheckHasMaterial(context));
  return RawChip(
    avatar: avatar,
    label: label,
    labelStyle: labelStyle,
    labelPadding: labelPadding,
    deleteIcon: deleteIcon,
    onDeleted: onDeleted,
    deleteIconColor: deleteIconColor,
    deleteButtonTooltipMessage: deleteButtonTooltipMessage,
    tapEnabled: false,
    shape: shape,
    clipBehavior: clipBehavior,
    focusNode: focusNode,
    autofocus: autofocus,
    backgroundColor: backgroundColor,
    padding: padding,
    materialTapTargetSize: materialTapTargetSize,
    elevation: elevation,
    shadowColor: shadowColor,
    isEnabled: true,
  );
}

InputChip

以紧凑的形式表示一条复杂的信息，例如实体（人，地方或事物）或对话文本。

InputChip 本质上也是RawChip，用法和RawChip一样。源代码如下：

override
Widget build(BuildContext context) {
  assert(debugCheckHasMaterial(context));
  return RawChip(
    avatar: avatar,
    label: label,
    labelStyle: labelStyle,
    labelPadding: labelPadding,
    deleteIcon: deleteIcon,
    onDeleted: onDeleted,
    deleteIconColor: deleteIconColor,
    deleteButtonTooltipMessage: deleteButtonTooltipMessage,
    onSelected: onSelected,
    onPressed: onPressed,
    pressElevation: pressElevation,
    selected: selected,
    tapEnabled: true,
    disabledColor: disabledColor,
    selectedColor: selectedColor,
    tooltip: tooltip,
    shape: shape,
    clipBehavior: clipBehavior,
    focusNode: focusNode,
    autofocus: autofocus,
    backgroundColor: backgroundColor,
    padding: padding,
    materialTapTargetSize: materialTapTargetSize,
    elevation: elevation,
    shadowColor: shadowColor,
    selectedShadowColor: selectedShadowColor,
    showCheckmark: showCheckmark,
    checkmarkColor: checkmarkColor,
    isEnabled: isEnabled &amp;&amp; (onSelected != null || onDeleted != null || onPressed != null),
    avatarBorder: avatarBorder,
  );
}

基本用法：

 InputChip(
    avatar: CircleAvatar(
    radius: 12.0,
    ),
    label: Text(
    'InputChip',
    style: TextStyle(fontSize: 12.0),
    ),
    shadowColor: Colors.grey,
    deleteIcon: Icon(
    Icons.close,
    color: Colors.black54,
    size: 14.0,
    ),
    onDeleted: () {
      print('onDeleted');
    },
    onSelected: (bool selected) {
        setState(() {
          _selected = selected;
        });
    },
    selectedColor: Colors.orange,
    disabledColor: Colors.grey,
    selected: _selected,
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    labelStyle: TextStyle(color: Colors.black54),
    ),

ChoiceChip

允许从一组选项中进行单个选择，创建一个类似于单选按钮的标签，本质上ChoiceChip也是一个RawChip，ChoiceChip本身不具备单选属性。

  int _selectedIndex = 0;
 Wrap(
            spacing: 5,
            children: List.generate(20, (index){
            return ChoiceChip(
                label: Text('测试 $index'),
                selected: _selectedIndex==index,
              onSelected: (v){
                  setState(() {
                    _selectedIndex =index;
                  });
              },
            );
          }).toList(),
          )

FilterChip

FilterChip可以作为过滤标签，本质上也是一个RawChip，用法如下：

  List&lt;String&gt; _filters = [];
 _buildFilterChip(){
    return Column(
      children: [
        Wrap(
          spacing: 15,
          children: List.generate(10, (index) {
            return FilterChip(
              label: Text('测试 $index'),
              selected: _filters.contains('$index'),
              onSelected: (v) {
                setState(() {
                  if(v){
                    _filters.add('$index');
                  }else{
                    _filters.removeWhere((f){
                      return f == '$index';
                    });
                  }
                });
              },
            );
          }).toList(),
        ),
        Text('选中：${_filters.join(',')}'),
      ],
    );
  }

运行效果：

总结：

本篇主要讲了以下几种chip组件的用法案例：

RawChip：是Material风格标签控件，此控件是其他标签控件的基类，通常情况下，不会直接创建此控件，而是使用其他的标签控件。
InputChip：以紧凑的形式表示一条复杂的信息，例如实体(人，地方或事物)或对话文本。InputChip 本质上也是RawChip，用法和RawChip一样
ChoiceChip：允许从一组选项中进行单个选择，创建一个类似于单选按钮的标签，本质上ChoiceChip也是一个RawChip，ChoiceChip本身不具备单选属性。
FilterChip：可以作为过滤标签，本质上也是一个RawChip
ActionChip：显示与主要内容有关的一组动作，本质上也是一个RawChip
Chip：一个简单的标签控件，仅显示信息和删除相关属性，是一个简化版的RawChip，用法和RawChip一样

以上就是Flutter Widgets之标签类控件Chip详解的详细内容，更多关于Flutter Widgets标签类控件Chip的资料请关注程序员之家其它相关文章！

您可能感兴趣的文章:

iOS 禁止按钮在一定时间内连续点击
本文主要介绍了iOS中禁止按钮在一定时间内连续点击的方法，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
Flutter CustomPaint自定义绘画示例详解
这篇文章主要为大家介绍了Flutter CustomPaint自定义绘画示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
IOS开发教程之put上传文件的服务器的配置及实例分享
IOS开发给人一种高大上的赶脚，弄的好像你不会IOS就不是个合格的程序员一样，好吧，既然是大趋势，那我们就来学习下吧，今天来看看put上传文件的服务器配置及案例
2014-06-06
IOS开发压缩后图片模糊问题解决
这篇文章主要为大家介绍了IOS开发压缩后图片模糊问题解决实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
老生常谈iOS应用程序生命周期
下面小编就为大家带来一篇老生常谈iOS应用程序生命周期。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
iOS中的NSTimer定时器的初步使用解析
这篇文章主要介绍了iOS中的NSTimer定时器的初步使用解析,通过例子简单讲解了NSTimer的输出与停止的方法,需要的朋友可以参考下
2016-05-05
IOS React Native FlexBox详解及实例
这篇文章主要介绍了IOS React Native FlexBox详解的相关资料,并附实例代码，需要的朋友可以参考下
2016-11-11
iOS UICollectionView实现卡片效果
这篇文章主要为大家详细介绍了iOS UICollectionView实现卡片效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-04-04
iOS实现一个意见反馈类型的输入栏
这篇文章主要给大家介绍了关于利用iOS实现一个意见反馈类型的输入栏，通过文中实现的输入栏会用户一个很好的体验效果，文中给了详细的示例代码，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
2017-10-10
iOS开源一个简单的订餐app UI框架
这篇文章主要介绍了iOS开源一个简单的订餐app UI框架,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10