Flutter 标签类控件大全Chip

梦里梦外; 2023-03-13 02:55 41阅读 0赞

![2020051009211583.png][]

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

## RawChip ##

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

*  Chip
 *  InputChip
 *  ChoiceChip
 *  FilterChip
 *  ActionChip

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

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

基本用法如下：

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

效果如下：

![20200510092115316.png][]

禁用状态设置：

RawChip(
      label: Text('老孟'),
      isEnabled: false,
    )

效果如下：

![20200510092115431.png][]

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

RawChip(
      avatar: CircleAvatar(
        child: Text('孟'),
      ),
      label: Text('老孟'),
    )

效果如下：

![20200510092115572.png][]

设置label的样式和内边距：

RawChip(
      label: Text('老孟'),
      labelStyle: TextStyle(color: Colors.blue),
      labelPadding: EdgeInsets.symmetric(horizontal: 10),
    )

效果如下：

![20200510092115715.png][]

设置删除相关属性：

RawChip(
      label: Text('老孟'),
      onDeleted: (){
        print('onDeleted');
      },
      deleteIcon: Icon(Icons.delete),
      deleteIconColor: Colors.red,
      deleteButtonTooltipMessage: '删除',
    )

效果如下：

![20200510092115943.png][]

点击删除图标，回调`onDeleted`。

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

RawChip(
      label: Text('老孟'),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      backgroundColor: Colors.blue,
      padding: EdgeInsets.symmetric(vertical: 10),
    )

效果如下：

![2020051009211695.png][]

设置阴影：

RawChip(
      label: Text('老孟'),
      elevation: 8,
      shadowColor: Colors.blue,
    )

效果如下：

![20200510092116222.png][]

`materialTapTargetSize`属性控制最小点击区域，详情查看：[MaterialTapTargetSize][]

设置选中状态、颜色：

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

效果如下：

![20200510092116377.png][]

设置选中状态下“前置对勾”图标：

RawChip(
      label: Text('老孟'),
      selected: true,
      showCheckmark: true,
      checkmarkColor: Colors.red,
    )

效果如下：

![20200510092116505.png][]

`showCheckmark`为false时，无“前置对勾”图标。

设置点击属性：

RawChip(
      label: Text('老孟'),
      onPressed: (){
        print('onPressed');
      },
      pressElevation: 12,
    )

效果如下：

![20200510092116669.png][]

点击时有水波纹效果。

## Chip ##

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

## 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 && (onSelected != null || onDeleted != null || onPressed != null),
        avatarBorder: avatarBorder,
      );
    }

## ChoiceChip ##

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

单选demo如下：

int _selectIndex = 0;
    Wrap(
      spacing: 15,
      children: List.generate(10, (index) {
        return ChoiceChip(
          label: Text('老孟 $index'),
          selected: _selectIndex == index,
          onSelected: (v) {
            setState(() {
              _selectIndex = index;
            });
          },
        );
      }).toList(),
    )

效果如下：

![20200510092116818.png][]

本控件由共建者[普通程序员][Link 1]提供。

## FilterChip ##

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

List<String> _filters = [];
    
    Column(
      children: <Widget>[
        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(',')}'),
      ],
    )

效果如下：

![2020051009211745.png][]

## ActionChip ##

显示与主要内容有关的一组动作，本质上也是一个RawChip，用法如下：

ActionChip(
        avatar: CircleAvatar(
          backgroundColor: Colors.grey.shade800,
          child: Text('孟'),
        ),
        label: Text('老孟'),
        onPressed: () {
          print("onPressed");
        })

效果如下：

![20200510092117242.png][]

效果很像按钮类控件。

## 交流 ##

老孟Flutter博客地址（近200个控件用法）：[http://laomengit.com][http_laomengit.com]

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：

[2020051009211583.png]: /images/20230312/1ba328d979f645ce8cba03b5ecf68c41.png
[20200510092115316.png]: /images/20230312/344f7d9f84314d378f521c98f05137db.png
[20200510092115431.png]: /images/20230312/0dcf8266f07544c3b6f399c3fa71d5c9.png
[20200510092115572.png]: /images/20230312/467eecc14e984693a5d6da55420f9d27.png
[20200510092115715.png]: /images/20230312/f6d182ea2b4c4bd7903cf21bae9aabe1.png
[20200510092115943.png]: /images/20230312/e28ad35466544b2ebdfef39e17e74e30.png
[2020051009211695.png]: /images/20230312/d4780769ad184d11be3f4f7d246feea9.png
[20200510092116222.png]: /images/20230312/bcde855dc9e3481ca9482bb4c38216d5.png
[MaterialTapTargetSize]: http://laomengit.com/flutter/widgets/MaterialTapTargetSize.html
[20200510092116377.png]: /images/20230312/cb040a4b09ca4b93890156d5b6885e6b.png
[20200510092116505.png]: /images/20230312/d3184392ae49493db1919ba298b36161.png
[20200510092116669.png]: /images/20230312/c385e077eb7d4c3eb3e6d5e58492dce3.png
[20200510092116818.png]: /images/20230312/3f469f98b6ab47ab8f2ce7fdfe8aace0.png
[Link 1]: https://juejin.im/user/5e2741925188254baf6c4cb1
[2020051009211745.png]: /images/20230312/971476aec0f649638d4be3108b8acc90.png
[20200510092117242.png]: /images/20230312/f15383dbe7d449198b00aabe8d9f9294.png
[http_laomengit.com]: http://laomengit.com