【问题标题】:Flutter nested ListView.builder throwing errorFlutter 嵌套 ListView.builder 抛出错误
【发布时间】:2019-05-20 13:32:55
【问题描述】:

我想将两个 ListView.builder 放在一个小部件屏幕中,但出现以下错误:

The following assertion was thrown during performLayout():
I/flutter (17103): RenderFlex children have non-zero flex but incoming         
height constraints are unbounded.
I/flutter (17103): When a column is in a parent that does not provide a     
finite height constraint, for example if it is
I/flutter (17103): in a vertical scrollable, it will try to shrink-wrap its 
children along the vertical axis. Setting a
I/flutter (17103): flex on a child (e.g. using Expanded) indicates that the 
child is to expand to fill the remaining
I/flutter (17103): space in the vertical direction.
I/flutter (17103): These two directives are mutually exclusive. If a parent 
is to shrink-wrap its child, the child
I/flutter (17103): cannot simultaneously expand to fit its parent.
I/flutter (17103): Consider setting mainAxisSize to MainAxisSize.min and 
using FlexFit.loose fits for the flexible
I/flutter (17103): children (using Flexible rather than Expanded). This will 
allow the flexible children to size
I/flutter (17103): themselves to less than the infinite remaining space they 
would otherwise be forced to take, and
I/flutter (17103): then will cause the RenderFlex to shrink-wrap the 
children rather than expanding to fit the maximum
I/flutter (17103): constraints provided by the parent.
I/flutter (17103): The affected RenderFlex is:
I/flutter (17103):   RenderFlex#446cb relayoutBoundary=up14 NEEDS-LAYOUT 
NEEDS-PAINT

这是我的代码:

 @override
 Widget build(BuildContext context) {
if (!loaded) _loadZones();
return new Scaffold(
    body: new Column(
  children: <Widget>[
    new Padding(padding: EdgeInsets.fromLTRB(0, 20, 0, 0)),
    new Expanded(
        child: new ListView.builder(
            itemCount: zones.length,
            itemBuilder: (BuildContext context, int index) {
              Zone zone = zones[index];
              List<Place> places = zone.places;
              print(zone.toString());
              print(places.length);
              return InkWell(
                  onTap: () {
                    Navigator.push(
                      context,
                      FromRightToLeft(
                          builder: (context) => CondominiumScreen(zone.id)),
                    );
                  },
                  child: Card(
                      color: Colors.white,
                      key: Key(zone.name),
                      margin: EdgeInsets.fromLTRB(10, 5, 10, 5),
                      child: new InkWell(
                          child: new Column(
                        children: <Widget>[
                          ListTile(
                            leading: Icon(Icons.place),
                              title: Row(
                            children: <Widget>[
                              Icon(
                                Icons.place,
                                color: Colors.grey,
                              ),
                              Text(
                                ' ${zone.name}',
                                style: TextStyle(fontSize: 20),
                              ),
                            ],
                          )),
                          new Divider(),
                          new Flexible(
                            child: new ListView.builder(
                                itemCount: places.length,
                                itemBuilder: (BuildContext ct, int i) {
                                  Place place = places[i];
                                  return Text(
                                    "● ${place.name}",
                                    textAlign: TextAlign.start,
                                  );
                                }),
                          ),
                          new Divider(),
                          new Row(
                            children: <Widget>[
                              Padding(
                                padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
                              ),
                              Expanded(
                                flex: 50,
                                child: InkWell(
                                    child: FlatButton(
                                        child: const Text('Reportes'),
                                        shape: RoundedRectangleBorder(
                                            side: BorderSide(
                                                color: Colors.black12)),

块引用

              splashColor: Colors.white10,
                                        color: Colors.white,
                                        onPressed: () {
                                          /* ... */
                                        })),
                              ),
                              Padding(
                                  padding: EdgeInsets.fromLTRB(5, 0, 5, 0)),
                              Expanded(
                                flex: 50,
                                child: InkWell(
                                    child: FlatButton(
                                        child: const Text('Turnos'),
                                        shape: RoundedRectangleBorder(
                                            side: BorderSide(
                                                color: Colors.black12)),
                                        splashColor: Colors.white10,
                                        color: Colors.white,
                                        onPressed: () {
                                          /* ... */
                                        })),
                              ),
                              Padding(
                                padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
                              ),
                            ],
                          ),
                        ],
                      ))));
            }))
  ],
));

}

我尝试在每一列中将 mainAxisSize 放入 MainAxisSize.min,但它不起作用。

在 performLayout() 期间抛出了以下断言:

I/flutter (17956): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter (17956): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter (17956): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter (17956): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter (17956): space in the vertical direction.
I/flutter (17956): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
I/flutter (17956): cannot simultaneously expand to fit its parent.
I/flutter (17956): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
I/flutter (17956): children (using Flexible rather than Expanded). This will allow the flexible children to size
I/flutter (17956): themselves to less than the infinite remaining space they would otherwise be forced to take, and
I/flutter (17956): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
I/flutter (17956): constraints provided by the parent.

【问题讨论】:

    标签: android ios mobile flutter


    【解决方案1】:

    为了修复代码中的给定错误 - 你需要做 两件事 - 在 ListView.builder 中添加 shrinkWrap: true 并在第二个 ListView.builder 中删除灵活 -

    更新后的代码如下:

       Widget build(BuildContext context) {
        if (!loaded) _loadZones();
        return new Scaffold(
            body: new Column(
          children: <Widget>[
            new Padding(padding: EdgeInsets.fromLTRB(0, 20, 0, 0)),
            new Expanded(
                child: new ListView.builder(
                    shrinkWrap: true,   //Added
                    itemCount: zones.length,
                    itemBuilder: (BuildContext context, int index) {
                      Zone zone = zones[index];
                      List<Place> places = zone.places;
                      print(zone.toString());
                      print(places.length);
                      return InkWell(
                          onTap: () {
                            Navigator.push(
                              context,
                              FromRightToLeft(
                                  builder: (context) => CondominiumScreen(zone.id)),
                            );
                          },
                          child: Card(
                              color: Colors.white,
                              key: Key(zone.name),
                              margin: EdgeInsets.fromLTRB(10, 5, 10, 5),
                              child: new InkWell(
                                  child: new Column(
                                children: <Widget>[
                                  ListTile(
                                      leading: Icon(Icons.place),
                                      title: Row(
                                        children: <Widget>[
                                          Icon(
                                            Icons.place,
                                            color: Colors.grey,
                                          ),
                                          Text(
                                            ' ${zone.name}',
                                            style: TextStyle(fontSize: 20),
                                          ),
                                        ],
                                      )),
                                  new Divider(),
                                  new ListView.builder(   //removed Flexible
                                      shrinkWrap: true, //Added
                                      itemCount: places.length,
                                      itemBuilder: (BuildContext ct, int i) {
                                        Place place = places[i];
                                        return Text(
                                          "● ${place.name}",
                                          textAlign: TextAlign.start,
                                        );
                                      }),
                                  new Divider(),
                                  new Row(
                                    children: <Widget>[
                                      Padding(
                                        padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
                                      ),
                                      Expanded(
                                        flex: 50,
                                        child: InkWell(
                                            child: FlatButton(
                                                child: const Text('Reportes'),
                                                shape: RoundedRectangleBorder(
                                                    side: BorderSide(
                                                        color: Colors.black12)),
                                                splashColor: Colors.white10,
                                                color: Colors.white,
                                                onPressed: () {
                                                  /* ... */
                                                })),
                                      ),
                                      Padding(
                                          padding: EdgeInsets.fromLTRB(5, 0, 5, 0)),
                                      Expanded(
                                        flex: 50,
                                        child: InkWell(
                                            child: FlatButton(
                                                child: const Text('Turnos'),
                                                shape: RoundedRectangleBorder(
                                                    side: BorderSide(
                                                        color: Colors.black12)),
                                                splashColor: Colors.white10,
                                                color: Colors.white,
                                                onPressed: () {
                                                  /* ... */
                                                })),
                                      ),
                                      Padding(
                                        padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
                                      ),
                                    ],
                                  ),
                                ],
                              ))));
                    }))
          ],
        ));
      }
    

    【讨论】:

      【解决方案2】:

      使用嵌套的 ListViews 时,您必须为内部列表视图指定高度约束。还要记住,当列表视图中有列时,如果不指定列高,就不能使用展开的子项。

      要指定高度限制,只需将相应的小部件包装在带有高度的Container 中。

      如果您不想指定高度并让框架布局子级。 因此,请删除内部ListView.builder 并用Column 替换它,还请删除根ListView 内没有具有高度信息的父级的任何ExpandedFlexible 小部件。

      【讨论】:

        猜你喜欢
        • 2018-10-16
        • 2019-01-08
        • 1970-01-01
        • 2023-01-31
        • 2018-07-15
        • 1970-01-01
        • 1970-01-01
        • 2019-07-10
        • 1970-01-01
        相关资源
        最近更新 更多