无法在Flutter中创建带有项目的ExpansionPanelList [英] Can't create ExpansionPanelList with Items in Flutter

问题描述

我是Flutter的新手，所以我正尝试加入.但是我一直在用ExpansionPanels创建一个ExpansionPanelList.就像标题所说的那样，所有内容都是在Google Flutter中创建的.

I'm new to Flutter so i am trying to get into it. But I'm hanging on creating an ExpansionPanelList with ExpansionPanels in it. And Like the title says all created in googles Flutter.

到目前为止，我的代码:

My code so far:

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");
  }
}

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

But when I open the app the debugger says:

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

Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1430 pos 12: 'hasSize': is not true.

推荐答案

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

It sounds like you need to put your ExpansionPanelList into a ListView or Column or some other container that won't force it to be a particular size.

这是扩展面板用法的一个例子.

Here is an example of expansion panel usage.

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画廊具有更详细的扩展面板示例.

The Flutter Gallery has a more detailed expansion panels example.

这篇关于无法在Flutter中创建带有项目的ExpansionPanelList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！