flutter组件 ExpansionPanelList,ExpansionPanel,Chip,ActionChip,ChoiceChip,FilterChip,InputChip

1.ExpansionPanelList

 const ExpansionPanelList({
    Key key,
    this.children = const <ExpansionPanel>[], //子集
    this.expansionCallback, //展开闭合的回调
    this.animationDuration = kThemeAnimationDuration, //动画时长
  })

ExpansionPanel({
    @required this.headerBuilder, //header的builder
    @required this.body,  //展开后的内容部分
    this.isExpanded = false, //当前的是否展开
    this.canTapOnHeader = false, //点击header是否触发展开回调
})

import 'package:flutter/material.dart';

class MyComponent extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyComponent();
  }
}

class _MyComponent extends State<MyComponent> {
  int _panelIndex=-1;
  List dt = [
    {"name": "张三","id":0},
    {"name": "李四","id":1}
  ];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Component"),
      ),
      body: Column(
        children: <Widget>[
          ExpansionPanelList(
            expansionCallback: (panelIndex,isExpand){
              print(panelIndex);
              setState(() {
               _panelIndex= _panelIndex==panelIndex?-1:panelIndex;
              });
            },
            
            children: dt.map((item){
              return  ExpansionPanel(
                headerBuilder: (ctx,isExpand){
                  return ListTile(
                    title: Text("标题${item['name']}---${item['id']}"),
                  );
                },
                body: new Container(
                  alignment: Alignment.center,
                  width: double.infinity,
                  height: 100.0,
                  color: Colors.black12,
                  child: Text("${item['name']}"),
                ),
                isExpanded: _panelIndex==item['id'],
                canTapOnHeader: true
              );
            }).toList(),
          )
        ],
      ),
    );
  }
}

    

   

2.Chip

const Chip({

    Key key,

    this.avatar, //左侧的图标

    @required this.label, //这个是必填的参数，控件上显示的文本

    this.labelStyle, //label样式

    this.labelPadding, //label间距

    this.deleteIcon, //右侧的删除图标

    this.onDeleted, //删除图标的点击事件，如果不写该方法的话，deleteIcon显示不出来

    this.deleteIconColor,  //颜色

    this.deleteButtonTooltipMessage,  //长按后的提示信息

    this.shape, //形状

    this.clipBehavior = Clip.none,

    this.backgroundColor, //背景色

    this.padding, //间距

    this.materialTapTargetSize, 

    this.elevation, //阴影深度

    this.shadowColor, //阴影颜色
  })

 

 Chip(
    label: Text("Chip的测试"),
    labelPadding: EdgeInsets.all(10.0),
    labelStyle: TextStyle(fontSize: 26.0,color: Colors.redAccent),
    deleteIcon: Image.asset("images/test.jpg"),
    deleteButtonTooltipMessage: "deleteButtonTooltipMessage",
    onDeleted: (){
       print("delete success");
    },
    avatar: Icon(Icons.people),
    materialTapTargetSize: MaterialTapTargetSize.padded,
 )

     

2.ActionChip

const ActionChip({
    Key key,
    this.avatar,
    @required this.label,
    this.labelStyle,
    this.labelPadding,
    @required this.onPressed, //按下的事件
    this.pressElevation, //按下的阴影
    this.tooltip, //长按下的文案
    this.shape,
    this.clipBehavior = Clip.none,
    this.backgroundColor,
    this.padding,
    this.materialTapTargetSize,
    this.elevation,
    this.shadowColor,
  })

 

     

3.ChoiceChip

const ChoiceChip({
    Key key,
    this.avatar,
    @required this.label,
    this.labelStyle,
    this.labelPadding,
    this.onSelected,
    this.pressElevation,
    @required this.selected, //是否选中
    this.selectedColor, //选择的颜色
    this.disabledColor, //不可用的颜色
    this.tooltip,
    this.shape,
    this.clipBehavior = Clip.none,
    this.backgroundColor,
    this.padding,
    this.materialTapTargetSize,
    this.elevation,
    this.shadowColor,
    this.selectedShadowColor, //选中的阴影背景色
    this.avatarBorder = const CircleBorder(),
})

 

import 'package:flutter/material.dart';

class MyComponent extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyComponent();
  }
}

class _MyComponent extends State<MyComponent> {
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Component"),
      ),
      body: Column(
        children: <Widget>[
          ChoiceChip(
              label: Text("Chip的测试"),
              disabledColor: Colors.green,
              onSelected: (val) => {},
              selected: false,
              pressElevation: 20.0,
              // shape: BeveledRectangleBorder(
              //     borderRadius: BorderRadius.all(Radius.circular(20.0)),
              //     side: BorderSide(color: Colors.green, width: 1.0)),
              avatar: Image.asset("images/test.jpg"),
              avatarBorder: CircleBorder(
                  side: BorderSide(color: Colors.red, width: 5.0))),
          ChoiceChip(
            label: Text("Chip的测试"),
            disabledColor: Colors.green,
            onSelected: (val) => {},
            selected: true,
            pressElevation: 20.0,
            avatar: Icon(Icons.people),
          )
        ],
      ),
    );
  }
}

4.FilterChip

const FilterChip({
    Key key,
    this.avatar,
    @required this.label,
    this.labelStyle,
    this.labelPadding,
    this.selected = false,
    @required this.onSelected,
    this.pressElevation,
    this.disabledColor,
    this.selectedColor,
    this.tooltip,
    this.shape,
    this.clipBehavior = Clip.none,
    this.backgroundColor,
    this.padding,
    this.materialTapTargetSize,
    this.elevation,
    this.shadowColor,
    this.selectedShadowColor,
    this.avatarBorder = const CircleBorder(),
})

 

FilterChip(
   label: Text("Chip的测试"),
   disabledColor: Colors.green,
   onSelected: (val) => {},
   selected: true,
   pressElevation: 20.0,
   tooltip: "长按下的文本",
   avatar: Icon(Icons.people),
)


//不可用 未选择状态
FilterChip(
   label: Text("Chip的测试"),
   disabledColor: Colors.green,
   onSelected: null,
   selected: false,
   pressElevation: 20.0,
   avatar: Icon(Icons.people),
)

     

5.InputChip 类似一个集合体

const InputChip({
    Key key,
    this.avatar,
    @required this.label,
    this.labelStyle,
    this.labelPadding,
    this.selected = false,
    this.isEnabled = true,
    this.onSelected,
    this.deleteIcon,
    this.onDeleted,
    this.deleteIconColor,
    this.deleteButtonTooltipMessage,
    this.onPressed,
    this.pressElevation,
    this.disabledColor,
    this.selectedColor,
    this.tooltip,
    this.shape,
    this.clipBehavior = Clip.none,
    this.backgroundColor,
    this.padding,
    this.materialTapTargetSize,
    this.elevation,
    this.shadowColor,
    this.selectedShadowColor,
    this.avatarBorder = const CircleBorder(),
})

 

 InputChip(
     label: Text("Chip的测试"),
     disabledColor: Colors.green,
     onSelected: (val) => {},
     selected: true,
     pressElevation: 20.0,
     avatar: Icon(Icons.people),
     deleteIcon: Image.asset("images/test.jpg"),
     deleteButtonTooltipMessage: "deleteButtonTooltipMessage",
     onDeleted: () {
        print("delete success");
     ,
 )