下面我们可以再去创建一个表示收缩面板项目的类 .. 名字可以叫它 ExpansionPanelItem ... 面板项目里面需要一个 String 类型的属性，名字是 headerText .. 它可以作为在面板头部上显示的标题 ..

再添加一个 Widget 类型的属性.. 名字叫 body .. 然后还有一个 bool 类型的属性 .. 名字是 isExpanded ..

用一个构造函数 .. ExpansionPanel .. 里面放一个 this.headerText .. this.body .. 还有一个 isExpanded .. 这样使用它的时候需要提供这三个东西 ..

下面在收缩面板演示里面 .. 添加一个列表数据 .. 列表里面的项目的类型是刚才定义的 ExpasnionPanelItem .. 这个列表的名字叫 _expasionPanelItems ..

在类里面，再添加一个 initState .. 初始数据的时候可以设置一下上面定义的这个 _expasionPanelItems 的值 .

它应该是一个列表数据 .. 列表项目的类型是 ExpansionPanelItem ..

在这个列表里面可以手工添加几个项目 .. 项目是 ExpansionPanelItem .. 需要给它三样东西 .. headerText .. 设置一下标题文字 .. Panel A ..

还需要一个 body .. 面板的主体 .. 这个主体，我们可以去复制一个之前创建的这个面板里面的 body 属性的值 ... 把它粘贴到这个 body 里面 ..

另外项目还需要一个 isExpanded ，表示面板的收缩状态 .. 把它设置成 false ..

复制两份这个面板项目 ... 修改一下标题文字 .. Panel B ... Panel B .. 下面这个是 Panel C .. 主体内容是 Content for Panel C ..

然后再找到 ExpansionPanelList .. 现在它的children 属性的值我们可以用一个 map 方法去生成 .. 这里先复制一下这个 ExpasionPanel 的 headerBuilder ，一会儿需要用到它 ..

然后去掉 children 属性的值 .. 用一下 _expasionPanelItems.map 迭代处理一下列表项目 .. 处理的结果再用一个 toList 转换成一个列表 .

给 map 提供一个方法 .. 每次迭代当前项目是个 ExpansionPanelItem .. 名字可以叫它 item ..

方法里面，return 的是一个 ExpansionPanel ..

这个 Widget 需要 isExpanded .. 对应的值可以用一下 item 里的 isExpanded .. 还需要 body ，面板的主体 .. 对应的值是 item 里的 body 属性的值 ..

再添加一个 headerBuilder 去构建面板的头部 .. 把之前复制的东西粘贴过来 ..

下面还得再去处理一下 expasnionCallback ... 要设置的是 _expasionPanelItems 里的 panelIndex 这个项目的 isExpanded 属性的值 .. 把它变成跟当前相反的值 ..

之前在类里添加的这个 _isExpanded 属性现在可以把它删除掉 .. 然后保存一下文件 ..

屏幕提示了一些错误 .. 我们可以 hot restart 一下 ...

重新再打开这个收缩面板的演示页面 ..

现在这里会显示三个面板，不过这几个面板的标题文字都是一样的 .. 这个是因为这个 headerBuilder 里面 .. 标题文字现在是静态的字符，这里要把它替换成 item.headerText 属性的值 ..

下面再到模拟器上去试一下 ...

按一下面板上的控制按钮可以切换面板的收缩状态 ...