【Flutter】入门16-chip

 

List<String> _tags = [
    'Apple',
    'Banana',
    'Lemon',
  ];
  List<String> _tags01 = [
    'item01',
    'item02',
    'item03',
  ];

  String _action = 'Nothing';
  List<String> _selected = [];
  String _choice = 'Lemon';
  TextStyle _titleStyle = TextStyle(fontSize: 20, fontWeight: FontWeight.bold);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Gecer')),
        body: Container(
          padding: EdgeInsets.all(16.0),
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'Chip',
                  style: _titleStyle,
                ),
                SizedBox(
                  height: 16,
                ),
                Wrap(
                  spacing: 8.0,
                  runSpacing: 8.0,
                  children: <Widget>[
                    Chip(
                      label: Text('骑行'),
                    ),
                    Chip(
                      label: Text(
                        '篮球',
                        style: TextStyle(color: Colors.white),
                      ),
                      backgroundColor: Colors.redAccent,
                    ),
                    Chip(
                      label: Text('跑步'),
                      avatar: CircleAvatar(
                        backgroundColor: Colors.redAccent,
                        child: Text('G', style: TextStyle(color: Colors.white)),
                      ),
                    ),
                    Chip(
                      label: Text('Gecer'),
                      avatar: CircleAvatar(
                        backgroundImage: NetworkImage(
                            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580978802188&di=f689c8ee27a5038881de40124bcac94a&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201812%2F06%2F20181206181119_fjgjo.jpg'),
                      ),
                    ),
                    Chip(
                      label: Text('666'),
                      onDeleted: () {},
                      deleteIcon: Icon(Icons.delete),
                      deleteIconColor: Colors.redAccent,
                      deleteButtonTooltipMessage: 'Remove this tag',
                    ),
                  ],
                ),
                Divider(
                  color: Colors.grey,
                  height: 32.0,
                  // indent: 32.0,
                ),
                Text(
                  'Chip-Delete',
                  style: _titleStyle,
                ),
                SizedBox(
                  height: 16,
                ),
                Wrap(
                  spacing: 8.0,
                  children: _tags01.map((tag) {
                    return Chip(
                      label: Text(tag),
                      onDeleted: () {
                        setState(() {
                          _tags01.remove(tag);
                        });
                      },
                    );
                  }).toList(),
                ),
                Divider(
                  color: Colors.grey,
                  height: 32.0,
                  // indent: 32.0,
                ),
                Text(
                  'ActionChip: $_action',
                  style: _titleStyle,
                ),
                SizedBox(
                  height: 16,
                ),
                Wrap(
                  spacing: 8.0,
                  children: _tags.map((tag) {
                    return ActionChip(
                      label: Text(tag),
                      onPressed: () {
                        setState(() {
                          _action = tag;
                        });
                      },
                    );
                  }).toList(),
                ),
                Divider(
                  color: Colors.grey,
                  height: 32.0,
                  // indent: 32.0,
                ),
                Text(
                  'FilterChip: ${_selected.toString()}',
                  style: _titleStyle,
                ),
                SizedBox(
                  height: 16,
                ),
                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(),
                ),
                Divider(
                  color: Colors.grey,
                  height: 32.0,
                  // indent: 32.0,
                ),
                Text(
                  'ChoiceChip: $_choice',
                  style: _titleStyle,
                ),
                SizedBox(
                  height: 16,
                ),
                Theme(
                  data: ThemeData(primaryColor: Colors.white),
                  child: Wrap(
                    spacing: 8.0,
                    children: _tags.map((tag) {
                      return ChoiceChip(
                        label: Text(tag),
                        selectedColor: Colors.redAccent,
                        selected: _choice == tag,
                        onSelected: (value) {
                          setState(() {
                            _choice = tag;
                          });
                        },
                      );
                    }).toList(),
                  ),
                )
              ],
            ),
          ),
        ));
  }