Question

我是新手，但我还是收到错误消息RenderFlex子级的flex为非零值，但是传入的高度限制是无限的问题。我试图在列内添加mainAxisSize：MainAxisSize.min，但它不起作用。我知道删除扩展的代码后，所有的工作都可以进行。但是我确实需要扩展部分才能在TabBarView中显示数据。

这是我的代码

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Column(
        children: <Widget>[
          new ToolBar("Title"),
          new DefaultTabController(
            length: 3,
            child: new Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                new Row(
                  children: <Widget>[
                    new Expanded(
                      child: TabBar(
                        tabs: sortedGroup.map((tab) {
                          return new Tab(
                            text: tab.name,
                          );
                        }).toList()
                      )
                    ),
                  ],
                ),

                new Expanded(
                  child: new TabBarView(
                    children: sortedGroup.map((group) {
                      return new Column(
                        children: <Widget>[
                          new Text("test")
                        ],
                      );
                    }).toList(),
                  )
                )
               )
              ],
            ),
          ),
          new BottomNavigation()
        ]
      )
    );
  }

Answer 1

这是因为“框约束”如何通过父级传递给子级，这对于“列”和“行”窗口小部件来说很奇怪。

Expanded会扩展或占用剩余的可用空间，但是 这样做是基于直接列的BoxConstraint 。 列将向下传递无限高度作为对其子级的约束。

父列支架向下传递的第一个“列”框约束将是屏幕的尺寸，但列 不会沿主轴向下传递相同的约束给子代 。

因此，嵌套列将具有有限的宽度约束 ，但是高度将具有无限的高度 。因此，当Expanded查看其父级并看到它可以扩展为无穷大时，就在收到错误时结束。

要解决此问题，请使用Expanded包装DefaultTabController，这会将向下的有限高度限制传递给嵌套的Column。

如果您想了解更多信息，我已经为此撰写了一个中等article系列文章。

Answer 2

由于您将body用Column包裹，而Column和Expanded分别是孩子，因此您将收到该错误。 Column小部件会扩展到最大垂直空间，如果有Expanded，它将再次尝试获得最大可用空间。为了解决此问题，只需删除父Column并直接将DefaultTabController作为body中的小部件。您可以保留其余代码。下面的示例工作代码：

return new Scaffold(
      body: 
          new DefaultTabController(
            length: 3,
            child: new Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                new Row(
                  children: <Widget>[
                    new Expanded(
                      child: TabBar(
                        tabs: [Tab(icon: Icon(Icons.school, color: Colors.black),),
                  Tab(icon: Icon(Icons.home, color: Colors.black),),
                  Tab(icon: Icon(Icons.local_hospital, color: Colors.black),),]

                      )
                    ),
                  ],
                ),
                new Expanded(
                  child: new TabBarView(
                    children: [
                      new Container(
                color: Colors.redAccent,
                child: Center(child: Text('Hi from School', style: TextStyle(color: Colors.white),),),
                ),
                      new Container(
                color: Colors.redAccent,
                child: Center(child: Text('Hi from School', style: TextStyle(color: Colors.white),),),
                ),
                      new Container(
                color: Colors.redAccent,
                child: Center(child: Text('Hi from School', style: TextStyle(color: Colors.white),),),
                ),

                    ]
                  )
                )

        ]
      )

          ));

希望这能回答您的问题。

Flutter RenderFlex子级具有非零的flex，但是传入的高度限制是无限制的

2 个答案: