flutter小碎片Chip

class ChipDemo extends StatefulWidget {
  @override
  _ChipDemoState createState() => _ChipDemoState();
}

class _ChipDemoState extends State<ChipDemo> {
  List<String> _tags = ['北京', '上海', '广东', '深圳'];
  String _action = '';
  List<String> _select = [];
  String _choice = '北京';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ChipDemo'), elevation: 0.0,),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment:  MainAxisAlignment.center,
          children: <Widget>[
            Wrap( // Wrap中的内容如果内容超出一行可以换行显示
              spacing: 8.0, // 设置标签之间的间隔
              runSpacing: 8.0, // 设置行与行之间的间隔
              children: <Widget>[
                Chip(
                  label: Text('Life'),
                ),
                Chip(
                  label: Text('Sunset'),
                  backgroundColor: Colors.redAccent, // 设置标签背景色
                ),
                Chip(
                  label: Text('Wanghao'),
                  avatar: CircleAvatar( // 添加标签的头部
                    backgroundColor: Colors.white, // 设置标签头部的背景颜色
                    child: Text('浩'),
                  ),
                ),
                Chip(
                  label: Text('Wanghao'),
                  avatar: CircleAvatar(
                    // 给标签头部添加背景图片
                    backgroundImage: NetworkImage('http://img0.pconline.com.cn/pconline/1507/18/6716136_02_thumb.jpg'),
                  ),
                ),
                Chip( // 删除样式的标签
                  label: Text('City'),
                  onDeleted: () {}, // 删除按钮的点击事件
                  deleteIcon: Icon(Icons.delete), // 更改删除按钮的图标
                  deleteIconColor: Colors.redAccent, // 设置删除按钮的颜色
                  deleteButtonTooltipMessage: 'Remove this tag?', // 设置长按删除按钮的提示文字
                ),
                Divider( // 添加分割线
                  color: Colors.grey,
                  height: 32.0, // 设置分割线区域的高度
//                  indent: 30.0, // 设置分割线的缩进
                ),
                Wrap( // 用列表生成带删除功能的标签
                  spacing: 10.0,
                  children: _tags.map((tag) {
                    return Chip(
                      label: Text(tag),
                      onDeleted: () {
                        setState(() {
                          _tags.remove(tag);
                        });
                      },
                    );
                  }).toList(),
                ),
                Divider(color: Colors.grey,),
                Container(width: double.infinity, child: Text('ActionChip：$_action'),),
                Wrap( // 带点击事件的标签
                  spacing: 10.0,
                  children: _tags.map((tag) {
                    return ActionChip(label: Text(tag), onPressed: () {
                      setState(() {
                        _action = tag;
                      });
                    });
                  }).toList(),
                ),
                Divider(color: Colors.grey,),
                Container(width: double.infinity, child: Text('FilterChip：${_select.toString()}'),),
                Wrap( // 多选状态的标签
                  spacing: 10.0,
                  children: _tags.map((tag) {
                    return FilterChip(
                      label: Text(tag),
                      selected: _select.contains(tag), // 设置选中状态
                      onSelected: (value) {
                        setState(() {
                          if (_select.contains(tag)) {
                            _select.remove(tag);
                          } else {
                            _select.add(tag);
                          }
                        });
                      });
                  }).toList(),
                ),
                Divider(color: Colors.grey,),
                Container(width: double.infinity, child: Text('ChoiceChip：$_choice'),),
                Wrap( // 单选状态的标签
                  spacing: 10.0,
                  children: _tags.map((tag) {
                    return ChoiceChip(
                      label: Text(tag),
                      selected: _choice == tag,
                      selectedColor: Colors.redAccent,
                      onSelected: (value) {
                        setState(() {
                          _choice = tag;
                        });
                      });
                  }).toList(),
                ),
              ],
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton( // 重置按钮
        child: Icon(Icons.restore),
        onPressed: () {
          setState(() {
            _tags = ['北京', '上海', '广东', '深圳'];
            _select = [];
            _choice = '北京';
          });
        }),
    );
  }
}