无法使用 Flutter 中的项目创建 ExpansionPanelList答案

【问题标题】：Can't create ExpansionPanelList with Items in Flutter无法使用 Flutter 中的项目创建 ExpansionPanelList
【发布时间】：2017-12-19 15:02:16
【问题描述】：

我是 Flutter 的新手，所以我正在尝试进入它。但是我一直在创建一个带有 ExpansionPanels 的 ExpansionPanelList。就像标题所说的那样，一切都是在谷歌 Flutter 中创建的。

到目前为止我的代码：

import 'package:flutter/material.dart';


class ShoppingBasket extends StatefulWidget {
  @override
  ShoppingBasketState createState() => new ShoppingBasketState();
}

class ShoppingBasketState extends State<ShoppingBasket> {

  @override
  Widget build(BuildContext context) {
    return new ExpansionPanelList(
      children: <ExpansionPanel>[
        new ExpansionPanel(
          headerBuilder: _headerBuilder,
          body: new Container(
            child: new Text("body"),
          ),
        )
      ],
    );
  }


  Widget _headerBuilder(BuildContext context, bool isExpanded) {
    return new Text("headerBuilder");
  }
}

但是当我打开应用程序时，调试器会说：

引发了另一个异常：“package:flutter/src/rendering/box.dart”：断言失败：第 1430 行 pos 12：“hasSize”：不正确。

【问题讨论】：

标签： android panel flutter

【解决方案1】：

听起来您需要将ExpansionPanelList 放入ListView 或Column 或其他不会强制其为特定大小的容器中。

这里是扩展面板使用示例。

import 'package:flutter/material.dart';

class ShoppingBasket extends StatefulWidget {
  @override
  ShoppingBasketState createState() => new ShoppingBasketState();
}

class MyItem {
  MyItem({ this.isExpanded: false, this.header, this.body });

  bool isExpanded;
  final String header;
  final String body;
}

class ShoppingBasketState extends State<ShoppingBasket> {
  List<MyItem> _items = <MyItem>[
    new MyItem(header: 'header', body: 'body')
  ];

  @override
  Widget build(BuildContext context) {
    return new ListView(
      children: [
        new ExpansionPanelList(
          expansionCallback: (int index, bool isExpanded) {
            setState(() {
              _items[index].isExpanded = !_items[index].isExpanded;
            });
          },
          children: _items.map((MyItem item) {
            return new ExpansionPanel(
              headerBuilder: (BuildContext context, bool isExpanded) {
                return new Text(item.header);
              },
              isExpanded: item.isExpanded,
              body: new Container(
                child: new Text("body"),
              ),
            );
          }).toList(),
        ),
      ],
    );
  }
}

void main() {
  runApp(new MaterialApp(
    home: new Scaffold(
      appBar: new AppBar(
        title: new Text('ExpansionPanel Example'),
      ),
      body: new ShoppingBasket(),
    ),
  ));
}

Flutter Gallery 有更详细的expansion panels example。

【讨论】：

非常感谢 :)
child: new Text("body"), 应该是child: new Text(item.body),

【解决方案2】：

还有另一种实现相同用户体验的方法是在 ListView 中使用 ExpansionTile

         ListView(
              shrinkWrap: true,
              children: <Widget>[
                ExpansionTile(
                  leading: Icon(Icons.event),                         
                  title: Text('Test1'),
                  children: <Widget>[
                    ListTile(title: Text('Title of the item')),
                    ListTile(
                      title: Text('Title of the item2'),
                    )
                  ],
                ),
                ExpansionTile(
                  title: Text('Test2'),
                  children: <Widget>[
                    ListTile(title: Text('Title of the item')),
                    ListTile(
                      title: Text('Title of the item2'),
                    )
                  ],
                )
              ],
            )

【讨论】：