Flutter笔记20：Chip、ActionChip、FilterChip、ChoiceChip组件

Chip组件非常强大，包括普通的Chip、ActionChiop、FilterChip、ChoiceChip，普通的Chip相当于tags标签，而且，这个标签还可以设置头像、图标，还有删除回调，而ActionChip则相当于可点击的Chip，FilterChip则是可以选择和取消选择的Chip，并且有选中状态，选中后前面会显示“√”，而ChoiceChip相当于单选的Chip，点击Chip，也有选中状态等，下面是详细的案例：

class ChipDemo extends StatefulWidget {
  ChipDemo({Key key}) : super(key: key);

  @override
  _ChipDemoState createState() => _ChipDemoState();
}

class _ChipDemoState extends State<ChipDemo> {
  List<String> _tags = ['Android', 'IOS', 'Windows', 'macOS', 'Linux'];
  List<String> _selected = [];
  String _choice = 'IOS';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Wrap(
            spacing: 8.0,
            runSpacing: 8.0,
            children: [
              //普通圆角
              Chip(
                label: Text('Flutter'),
                backgroundColor: Colors.orange,
              ),

              //带圆形头部的chip
              Chip(
                label: Text('Flutter'),
                avatar: CircleAvatar(
                  backgroundColor: Colors.green,
                  child: Text('F'),
                ),
              ),

              //带圆形头部并且是图片的chip
              Chip(
                label: Text('Flutter'),
                avatar: CircleAvatar(
                  backgroundImage: NetworkImage('http://www.5imoban.net/1.jpg'),
                ),
              ),

              //带删除按钮的chip
              Chip(
                label: Text('张三'),
                //删除回调
                onDeleted: () {},
                deleteIcon: Icon(Icons.delete),
                deleteIconColor: Colors.red,
                deleteButtonTooltipMessage: '删除这个标签',
              )
            ],
          ),
          //分割线
          Divider(
            color: Colors.grey,
            height: 36.0,
          ),

          //可删除的Chip案例，相当于tags标签
          Wrap(
            spacing: 8.0,
            runSpacing: 8.0,
            children: _tags.map((tag) {
              return Chip(
                label: Text(tag),
                onDeleted: () {
                  setState(() {
                    _tags.remove(tag);
                  });
                },
              );
            }).toList(),
          ),
          //分割线
          Divider(
            color: Colors.grey,
            height: 36.0,
          ),

          //可交互的Actionchip，相当于按钮
          Wrap(
            spacing: 8.0,
            runSpacing: 8.0,
            children: _tags.map((tag) {
              return ActionChip(
                label: Text(tag),
                onPressed: () {
                  print(tag);
                },
              );
            }).toList(),
          ),

          //分割线
          Divider(
            color: Colors.grey,
            height: 36.0,
          ),

          //用来展示过滤的效果
          Container(
            width: 300.0,
            child: Text('${_selected.toString()}'),
          ),
          //FilterChip 过滤
          Wrap(
            spacing: 8.0,
            runSpacing: 8.0,
            children: _tags.map((tag) {
              return FilterChip(
                label: Text(tag),
                //当前的chip是否选中的效果
                selected: _selected.contains(tag),
                onSelected: (value) {
                  setState(() {
                    if (_selected.contains(tag)) {
                      _selected.remove(tag);
                    } else {
                      _selected.add(tag);
                    }
                  });
                },
              );
            }).toList(),
          ),

          //分割线
          Divider(
            color: Colors.grey,
            height: 36.0,
          ),

          //用来展示选中的效果
          Container(
            width: 300.0,
            child: Text('$_choice'),
          ),
          //ChoiceChip 选择
          Wrap(
            spacing: 8.0,
            runSpacing: 8.0,
            children: _tags.map((tag) {
              return ChoiceChip(
                label: Text(tag),
                //当前的chip是否选中的效果
                selected: _choice == tag,
                selectedColor: Colors.green,
                onSelected: (value) {
                  setState(() {
                    _choice = tag;
                  });
                },
              );
            }).toList(),
          ),
        ],
      ),
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！