Flutter-Chip

Chip

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

class _ChipDemoState extends State<ChipDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ChipDemo'),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Chip(
                  label: Text('Life'),
                ),
                SizedBox(width: 8,),
                Chip(
                  label: Text('Sunset'),
                  backgroundColor: Colors.orange,
                ),
                SizedBox(width: 8,),
                Chip(
                  label: Text('Wanghao'),
                  avatar: CircleAvatar(
                    backgroundColor: Colors.grey,
                    child: Text('王'),
                  ),
                ),
                SizedBox(width: 8,),
                Chip(
                  label: Text('Wanghao'),
                  avatar: CircleAvatar(
                    backgroundImage: AssetImage(
                      'resources/images/profilePhoto.jpg'
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

image.png
在Row中的组件总长度如果超过屏幕长度，会出现警告，所以，我们可以将Row组件换成Wrap组件

Wrap

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

class _ChipDemoState extends State<ChipDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ChipDemo'),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Wrap(
              spacing: 20, // 主轴间距
              runSpacing: 20, // 次轴间距
              children: <Widget>[
                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: AssetImage(
                      'resources/images/profilePhoto.jpg'
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

image.png

Divider

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

ActionChip

image.png

FilterChip

Wrap(
  spacing: 8,
  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(),
),

image.png

ChoiceChip

String _choice = 'Lemon';

Wrap(
  spacing: 8,
  children: _tags.map((tag) {
    return ChoiceChip(
      label: Text(tag),
      selectedColor: Colors.black,
      selected: _choice == tag,
      onSelected: (value) {
        setState(() {
          _choice = tag;
        });
      },
    );
  }).toList(),
),

image.png