Flutter Chip的使用

已经是很久很久很久没有更新了，这段时间过得略糟糕，此处省略一万字。。。

感觉一眨眼，flutter都1.6了，落后了好多了，又重新捡起来熟悉了一遍，才想起来页面咋创建的，好抱歉~~~~

昨晚偶然看到了一个比较好玩的组件，叫 Chip，应用场景（关于应用场景，这个链接说得很详细），官方翻译叫标签或者芯片

一、效果

二、构造函数解析：

const Chip({
    Key key,
    this.avatar,//左侧的图标
    @required this.label,//这个是必填的参数，控件上显示的文本
    this.labelStyle,
    this.labelPadding,
    this.deleteIcon,//右侧的删除图标
    this.onDeleted,//删除图标的点击事件，如果不写该方法的话，deleteIcon显示不出来
    this.deleteIconColor,
    this.deleteButtonTooltipMessage,//点击删除图标后弹出的文本，类似于tooltip的效果
    this.shape,
    this.clipBehavior = Clip.none,//这个不晓得是啥
    this.backgroundColor,
    this.padding,
    this.materialTapTargetSize,//这个具体也不晓得怎么描述，它的两个值，一个为padded，一个为shrinkWrap，前者自带margin，后者好像没有margin，紧贴附近的控件
    this.elevation,//阴影深度
    this.shadowColor,//阴影颜色
  })

三、例子

import 'package:flutter/material.dart';
import 'package:the_first_one/utils/PageUtil.dart';
import 'InputChipDemo.dart';
import 'FilterChipDemo.dart';
import 'package:fluttertoast/fluttertoast.dart';

class ChipPage extends StatefulWidget {
  @override
  _ChipPageState createState() => _ChipPageState();
}

class _ChipPageState extends State<ChipPage> {
  int _valueChoice = 0;

  Widget _buildChoiceItem(int index) {
    return ChoiceChip(
      label: Text("ChoiceChip $index"),
      selectedColor: Colors.orange, //选中的颜色
      disabledColor: Colors.orange[100], //没选中的颜色
      onSelected: (bool selected) {
        setState(() {
          _valueChoice = selected ? index : null;
        });
      },
      selected: _valueChoice == index,
      labelStyle: TextStyle(color: Colors.black54),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ChipDemo"),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              SizedBox(height: 10.0),
              Text("一、初步认识"),
              Divider(),
              Chip(
                label: Text("普通的chip"),
                labelStyle: TextStyle(color: Colors.black54),
                backgroundColor: Colors.orange,
              ),
              Chip(
                avatar: Icon(
                  Icons.arrow_forward,
                  color: Colors.black54,
                ),
                label: Text("带avatar的chip"),
                labelStyle: TextStyle(color: Colors.black54),
                backgroundColor: Colors.orange,
              ),
              Chip(
                avatar: CircleAvatar(
                  backgroundImage:
                      AssetImage('assets/images/illustration_1.jpg'),
                  radius: 18.0,
                ),
                label: Text("带avatar的chip"),
                labelStyle: TextStyle(color: Colors.black54),
                backgroundColor: Colors.orange,
              ),
              Chip(
                avatar: CircleAvatar(
                  backgroundImage:
                      AssetImage('assets/images/illustration_1.jpg'),
                  radius: 30.0,
                ),
                padding: EdgeInsets.all(0.0),
                label: Text("padding为0,labelPadding不为0的chip"),
                labelPadding: EdgeInsets.all(15.0),
                labelStyle: TextStyle(
                  color: Colors.black54,
                  fontSize: 10.0,
                  fontWeight: FontWeight.bold,
                ),
                backgroundColor: Colors.orange,
              ),
              Chip(
                label: Text("带deleteIcon的chip"),
                deleteIcon: Icon(Icons.close),
                deleteIconColor: Colors.black54,
                onDeleted: () {
                  print("点击了删除噢");
                },
                deleteButtonTooltipMessage: "弹出提示",
                labelStyle: TextStyle(color: Colors.black54),
                backgroundColor: Colors.orange,
              ),
              Chip(
                label: Text("圆角矩形的chip"),
                deleteIcon: Icon(Icons.close),
                deleteIconColor: Colors.black54,
                onDeleted: () {
                  print("点击了删除噢");
                },
                deleteButtonTooltipMessage: "弹出提示",
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(2.0),
                ),
                labelStyle: TextStyle(color: Colors.black54),
                backgroundColor: Colors.orange,
              ),
              Chip(
                label: Text("尺寸最小的chip"),
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                labelStyle: TextStyle(color: Colors.black54),
                backgroundColor: Colors.orange,
              ),
              Chip(
                label: Text("带阴影的chip"),
                shadowColor: Colors.grey,
                elevation: 10.0,
                labelStyle: TextStyle(color: Colors.black54),
                backgroundColor: Colors.orange,
              ),
              Divider(),
              Text("二、例子"),
              ActionChip(
                //自带一个onPress事件，有点击效果
                label: Text("ActionChip"),
                backgroundColor: Colors.orange,
                onPressed: () {
                  Fluttertoast.showToast(msg: "ActionChip");
                },
              ),
              Wrap(
                spacing: 5.0, //主轴间距
                runSpacing: 8.0, //副轴间距
                children: List<Widget>.generate(2, (int index) {
                  return _buildChoiceItem(index);
                }),
              ),
              RaisedButton(
                  child: Text(
                    "FilterChipDemo",
                    style: TextStyle(color: Colors.black54),
                  ),
                  color: Colors.orange,
                  onPressed: () {
                    PageUtil().pushTo(context, FilterChipDemo());
                  }),
              RaisedButton(
                  child: Text(
                    "InputChipDemo",
                    style: TextStyle(color: Colors.black54),
                  ),
                  color: Colors.orange,
                  onPressed: () {
                    PageUtil().pushTo(context, InputChipDemo());
                  }),
              SizedBox(height: 10.0),
            ],
          ),
        ),
      ),
    );
  }
}

四、其他

关于chip也可以看看以下扩展类，以下排列顺序按照功能的升序排列

1. ActionChip //比普通的chip多一个onPressed事件
2. ChoiceChip //允许从一组选项中进行单一选择
3. FilterChip //自带的比ChoiceChip多一个选中的勾勾的效果

import 'package:flutter/material.dart';

class FilterChipDemo extends StatefulWidget {
  @override
  _FilterChipDemoState createState() => _FilterChipDemoState();
}

class ActorFilterEntry {
  const ActorFilterEntry(this.name, this.initials);

  final String name;
  final String initials;
}

class _FilterChipDemoState extends State<FilterChipDemo> {
  final List<ActorFilterEntry> _cast = <ActorFilterEntry>[
    const ActorFilterEntry('Aaron Burr', 'AB'),
    const ActorFilterEntry('Alexander Hamilton', 'AH'),
    const ActorFilterEntry('Eliza Hamilton', 'EH'),
    const ActorFilterEntry('James Madison', 'JM'),
  ];
  List<String> _filters = <String>[];

  Iterable<Widget> get actorWidgets sync* {
    for (ActorFilterEntry actor in _cast) {
      yield Padding(
        padding: const EdgeInsets.all(4.0),
        child: FilterChip(
          avatar: CircleAvatar(child: Text(actor.initials)),
          label: Text(actor.name),
          selected: _filters.contains(actor.name),
          onSelected: (bool value) {
            setState(() {
              if (value) {
                _filters.add(actor.name);
              } else {
                _filters.removeWhere((String name) {
                  return name == actor.name;
                });
              }
            });
          },
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FilterChipDemo"),
      ),
      body: Column(
        children: <Widget>[
          Wrap(
            children: actorWidgets.toList(),
          ),
          Text('Look for: ${_filters.join(', ')}'),
        ],
      ),
    );
  }
}

1. InputChip //比FilterChip多一个onPressed和onDeleted

import 'package:flutter/material.dart';

class InputChipDemo extends StatefulWidget {
  @override
  _InputChipDemoState createState() => _InputChipDemoState();
}

class _InputChipDemoState extends State<InputChipDemo> {
  List<String> list = [
    "摇滚",
    "音乐",
    "机车党",
    "Android工程师",
    "全栈",
    "Python",
    "UI设计师",
    "测试小姐姐",
    "后台单身狗",
    "产品老大",
    "路边摊",
    "火锅 串串 麻辣烫",
    "篮球",
    "摄影",
    "户外",
    "客服",
    "超级自恋的小哥哥",
    "直播",
    "不忘初心 继续前行",
    "记性不好",
    "花容月貌",
    "榴莲控",
    "一定要穿美美的衣服"
  ];

  List<String> _filters = <String>[];

  Widget _buildItem(int index) {
    String content = list[index];
    return InputChip(
      avatar: CircleAvatar(
        backgroundImage: AssetImage('assets/images/illustration_1.jpg'),
        radius: 12.0,
      ),
      label: Text(
        content,
        style: TextStyle(fontSize: 12.0),
      ),
      shadowColor: Colors.grey,
      deleteIcon: Icon(
        Icons.close,
        color: Colors.black54,
        size: 14.0,
      ),
      onDeleted: () {
        setState(() {
          list.removeAt(index);
        });
      },
      onSelected: (bool selected) {
        setState(() {
          if (selected) {
            _filters.add(list[index]);
          } else {
            _filters.removeWhere((String name) {
              return name == list[index];
            });
          }
        });
      },
      selectedColor: Colors.orange,
      disabledColor: Colors.grey,
      selected: _filters.contains(list[index]),
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      labelStyle: TextStyle(color: Colors.black54),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("InputChipDemo"),
      ),
      body: Container(
        padding: EdgeInsets.all(10.0),
        child: Wrap(
          spacing: 5.0,
          //主轴间距
          runSpacing: 8.0,
          //副轴间距
          alignment: WrapAlignment.end,
          //主轴上的对齐方式
          crossAxisAlignment: WrapCrossAlignment.center,
          //副轴上的对齐方式
          children: List<Widget>.generate(
            list.length,
            (int index) {
              return _buildItem(index);
            },
          ).toList(),
        ),
      ),
    );
  }
}

1. RawChip //原始chip，通常仅在您想要创建自己的定制芯片类型时使用

五、补充

更多的应用场景，请点击我

 

作者：周南城
链接：https://www.jianshu.com/p/9ab805c97ea2
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。