Flutter 自动换行的标签 Chip

实现代码：

import 'package:flutter/material.dart';

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

class _ChipDemoState extends State {
  @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: [
            Wrap(//自动换行
               spacing: 8.0, //一行中两个chip的间距，当不设置时，自动调整间隔
              runSpacing: 8.0, //两行之间的间距
              children: [
                Chip(
                  label: Text('Life')
                  ),

                  Chip(
                  label: Text('Sunset'),
                  backgroundColor: Colors.orange,
                  ),

                  Chip(
                  label: Text('Wanghao'),
                  avatar: CircleAvatar(
                    backgroundColor:Colors.grey,
                    child:Text('皓'),
                    ),
                  ),
                  
                  Chip(
                  label: Text('Wanghao'),
                  avatar: CircleAvatar(
                    backgroundImage:NetworkImage('https://resources.ninghao.org/images/wanghao.jpg'),
                    
                    ),
                  ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

效果如下：

chip1.png

Divider分割线

 Divider(
                    color: Colors.grey,
                    height: 32.0,
                    // indent: 32.0,//左缩进
                  ),
                  

带删除的chip

List _tags = ['Apple', 'Banana', 'Lemon'];

Wrap(
                  spacing: 8.0,
                  children: _tags.map(
                    (tag) {
                      return Chip(
                        label: Text(tag),
                        onDeleted: () {
                          setState(() {
                            _tags.remove(tag);
                          });
                        },
                      );
                    },
                  ).toList(),
                ),
                

带动作的ActionChip

 List _tags = ['Apple', 'Banana', 'Lemon'];
  String _action = 'Nothing';

Container(
              width: double.infinity,
              child: Text('ActionChip $_action'),
            ),
            Wrap(
              spacing: 8.0,
              children: _tags.map(
                (tag) {
                  return ActionChip(
                    label: Text(tag),
                    onPressed: () {
                      setState(() {
                        _action = tag;
                      });
                    },
                  );
                },
              ).toList(),
            ),

过滤碎片FilterChip

List _selected = [];

 Container(
              width: double.infinity,
              child: Text('FilterChip ${_selected.toString()}'),
            ),
            Wrap(
              spacing: 8.0,
              children: _tags.map(
                (tag) {
                  return FilterChip(
                    label: Text(tag),
                    selected: _selected.contains(tag),
                    onSelected: (value) {
                      setState(() {
                        if (_selected.contains(tag)) {
                          _selected.remove(tag);
                        } else {
                          _selected.add(tag);
                        }
                      });
                    },
                  );
                },
              ).toList(),
            ),

单选ChoiceChip

String _choice = 'Lemon';

Container(
              width: double.infinity,
              child: Text('ChoiceChip ${_selected.toString()}'),
            ),
            Wrap(
              spacing: 8.0,
              children: _tags.map(
                (tag) {
                  return ChoiceChip(
                    label: Text(tag),
                    selectedColor: Colors.black,
                    selected: _choice == tag,
                    onSelected: (value) {
                      setState(() {
                        _choice = tag;
                      });
                    },
                  );
                },
              ).toList(),
            ),