flutter中的chip部件

Chip参数

const Chip({
  Key key,
  this.avatar,//标签左侧Widget，一般为小图标
  @required this.label,//标签
  this.labelStyle,
  this.labelPadding,
  this.deleteIcon,//删除图标
  this.onDeleted,//删除回调，为空时不显示删除图标
  this.deleteIconColor,//删除图标的颜
  this.deleteButtonTooltipMessage,//删除按钮的tip文字
  this.shape,//形状.默认两端是半圆形
  this.clipBehavior = Clip.none,
  this.focusNode,
  this.autofocus = false,
  this.backgroundColor,//背景颜色
  this.padding,
  this.materialTapTargetSize,/设置为MaterialTapTargetSize.shrinkWrap时，clip距顶部距离为0；设置为MaterialTapTargetSize.padded时距顶部有一个距离
  this.elevation,
  this.shadowColor,
})

import 'package:flutter/material.dart';
class ChipDemo extends StatefulWidget {
  @override
  _ChipDemoState createState() => _ChipDemoState();
}

class _ChipDemoState extends State<ChipDemo> {
  List<String> listData=['apple','banbana','lemon'];
  String _actionValue='';
  String _chioceValue='';
  List _selectValue=[];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chip案例演示'),

      ),
      body: ListView(
        children: <Widget>[
            Chip(
              label: Text('小标签'),
              backgroundColor: Colors.blue,
              avatar: CircleAvatar(
                backgroundColor: Colors.grey[100],
                child: Text('头像标签'),
              ),
            ),
          Chip(
            label: Text('删除'),
            onDeleted: (){},
            deleteIcon: Icon(Icons.delete),
          ),
          Divider(


          ),
          Wrap(
            spacing: 8.0,
            runSpacing: 8.0,
            children: listData.map((item){
              return Chip(
                label: Text(item),
                onDeleted: (){
                  setState((){
                    listData.remove(item);
                  });
                },
              );
            }).toList(),
          ),
          Divider(


          ),
          Container(
            width: double.infinity,
            child: Text('FilterChip案例选择的值是${_selectValue.toString()}'),
          ),
          Wrap(
            spacing: 8.0,
            runSpacing: 8.0,
            children: listData.map((item){
              return FilterChip(
                label: Text(item),
               selected:_selectValue.contains(item),
                onSelected: (value){
                  setState(() {
                    if(_selectValue.contains(item)){
                      _selectValue.remove(item);
                    }else{
                      _selectValue.add(item);
                    }
                  });
                },

              );
            }).toList(),
          ),
          Divider(


          ),
          Container(
            width: double.infinity,
            child: Text('selectChip$_actionValue'),
          ),
          Wrap(
            spacing: 8.0,
            runSpacing: 8.0,
            children: listData.map((item){
              return ActionChip(
                label: Text(item),
                onPressed: (){
                  setState(() {
                    _actionValue=item;
                  });
                },
              );
            }).toList(),
          ),
          Divider(


          ),
          Container(
            width: double.infinity,
            child: Text('ChoiceChip$_chioceValue'),
          ),
          Wrap(
            spacing: 8.0,
            runSpacing: 8.0,
            children: listData.map((item){
              return ChoiceChip(
                label: Text(item),
                //是否选中
                selected: _chioceValue==item,
                //设置选中的颜色
                selectedColor: Colors.blue,
                //选中回调
                onSelected: (value){
                  setState(() {
                    _chioceValue=item;
                  });
                },
              );
            }).toList(),
          ),
        ],
      ),
    );
  }
}