可展开的列表组件，可根据逻辑来实现单展开或多展开。可指定展开动画时长，接收展开回调

相关组件

ExpansionTile

ExpansionPanelList基本使用

【children】 : 子组件列表 【List】
【animationDuration】 : 动画时长 【Duration】
【expansionCallback】 : 展开回调 【List】
【onPressed】 : 点击事件 【Function()】
157.gif

  1. import 'package:flutter/material.dart';
  2. class CustomExpansionPanelList extends StatefulWidget {
  3.   @override
  4.   _CustomExpansionPanelListState createState() =>
  5.       _CustomExpansionPanelListState();
  6. }
  8. class _CustomExpansionPanelListState extends State<CustomExpansionPanelList> {
  9.   var data = <Color>[
  10.     Colors.red[50],
  11.     Colors.red[100],
  12.     Colors.red[200],
  13.     Colors.red[300],
  14.     Colors.red[400],
  15.     Colors.red[500],
  16.     Colors.red[600],
  17.     Colors.red[700],
  18.     Colors.red[800],
  19.     Colors.red[900],
  20.   ];
  21.   int _position = 0;
  23.   @override
  24.   Widget build(BuildContext context) {
  25.     return Container(
  26.       width: 300,
  27.       child: ExpansionPanelList(
  28.         children: data.map((color) => _buildItem(color)).toList(),
  29.         animationDuration: Duration(milliseconds: 200),
  30.         expansionCallback: (index, open) {
  31.           setState(() => _position=open?-1:index);
  32.         },
  33.       ),
  34.     );
  35.   }
  37.   ExpansionPanel _buildItem(Color color) {
  38.     return ExpansionPanel(
  39.         isExpanded: data.indexOf(color) == _position,
  40.         canTapOnHeader: true,
  41.         headerBuilder: (ctx, index) => Center(
  42.               child: Wrap(
  43.                 crossAxisAlignment: WrapCrossAlignment.center,
  44.                 children: <Widget>[
  45.                   Container(
  46.                     height: 30,
  47.                     width: 30,
  48.                     decoration:
  49.                         BoxDecoration(color: color, shape: BoxShape.circle),
  50.                   ),
  51.                   Container(
  52.                     width: 120,
  53.                     alignment: Alignment.center,
  54.                     height: 50,
  55.                     child: Text(
  56.                       colorString(color),
  57.                       style: TextStyle(color: Colors.black),
  58.                     ),
  59.                   ),
  60.                 ],
  61.               ),
  62.             ),
  63.         body: Container(
  64.           alignment: Alignment.center,
  65.           height: 50,
  66.           color: color,
  67.           child: Text(
  68.             colorString(color),
  69.             style: TextStyle(color: Colors.white, shadows: [
  70.               Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)
  71.             ]),
  72.           ),
  73.         ));
  74.   }
  76.   String colorString(Color color) =>
  77.       "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
  78. }