Flutter TabBarView 子项由于高度无界而无法渲染

Question

我正在尝试复制以下设计：

https://lh3.googleusercontent.com/pOGNNz2MYFZg24jd7Yf55mLXFRWIYMCNQSUshnPX6P2iYsMQn8bkezdp8tQD-Y9GcD0=w2560-h1370

我似乎不明白为什么我的子小部件TabBarView会导致异常。提到了无限高度，但我已经提供了子部件的高度和宽度，所以我对发生的事情感到困惑......

仅供参考：TripPage小部件（代码中未显示，仅显示其状态）作为值传递给 a 的 body 属性Scaffold（也未显示）。我不想改变这一点。

这是我的代码：

class _TripPageState extends State<TripPage> {
  //ToDo: Keep as dynamic until an object is created for the listItems.
  List<dynamic> upcomingTrips;
  List<dynamic> pastTrips;

  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[
          Padding(
            child: Text(
              "Trips",
              style: TextStyle(
                  color: Colors.deepPurple,
                  fontSize: 36.0,
                  fontWeight: FontWeight.bold),
            ),
            padding: EdgeInsets.only(top: 40.0, left: 28.0),
          )
        ]),
        DefaultTabController(
          length: 2,
          child: Column(mainAxisSize: MainAxisSize.max, children: <Widget>[
            Padding(
                padding: EdgeInsets.only(left: 16.0, top: 24.0),
                child: Row(children: <Widget>[
                  TabBar(
                    tabs: <Widget>[
                      Tab(text: "Upcoming".toUpperCase()),
                      Tab(text: "Past".toUpperCase())
                    ],
                    isScrollable: true,
                    indicatorColor: Colors.deepPurple,
                    labelColor: Colors.black,
                    unselectedLabelColor: Color.fromRGBO(78, 78, 81, 30),
                  )
                ])),
            TabBarView(
              children: <Widget>[
                Container(
                    color: Colors.pink,
                    child: Image.asset('assets/saved_flights_icon.jpg',
                        width: 200.0, height: 200.0)),
                Container(
                    color: Colors.greenAccent,
                    child: Image.asset('assets/saved_flights_icon.jpg',
                        width: 200.0, height: 200.0)),
//                UpcomingTripsTabPage(),
//                PastTripsTabPage()
              ],
            )
          ]),
        )
      ],
    );
  }
}

但是，我的堆栈跟踪中出现以下消息：

I/flutter ( 7054): The following assertion was thrown during performResize():
I/flutter ( 7054): Horizontal viewport was given unbounded height.
I/flutter ( 7054): Viewports expand in the cross axis to fill their container and constrain their children to match
I/flutter ( 7054): their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of
I/flutter ( 7054): vertical space in which to expand.

随后是有关RenderBoxes、RenderViewports等的几条消息。

提前致谢！

Answer 1

简短回答：

\n

要使用TabBarView您应该提供有限的高度。有几种方法可以做到这一点。其中之一是将其包装在具有约束高度的小部件中（例如，Container或SizedBox）。或者，如果小部件的父级具有受限尺寸（在您的情况下没有），您可以包装TabBarView在一个Expanded小部件中，该小部件将指示它扩展以填充可用空间。

\n

对于您的情况，类似以下内容应该可以解决问题：

\n

Container( // or SizedBox, etc.\n  height: 200\n  child: TabBarView(...)\n)\n

\n

背景：

\n

您正在使用TabBarView没有任何高度限制的视图。换句话说，它的高度是无限的，如错误所示：

\n

\n

水平视口被赋予无限高度。

\n

视口在横轴上扩展以填充其容器并约束其子项以匹配其在横轴上的范围。在这种情况下，水平视口被赋予了无限量的垂直空间来扩展。

\n

\n

要理解无界（和其他术语）在这种情况下的确切含义，我们可以参考BoxConstraints类：

\n

\n

最大约束为无限的轴是无界的。

\n

\n

因此，我们可以看到，在某些情况下，小部件被赋予无限的最大高度（垂直空间）以用于扩展。如果一个小部件试图填充所有可用（无限）空间，这将被证明是有问题的。因此，Flutter 会抛出错误。这可以通过将小部件包装在具有受限宽度/高度的父级中来约束小部件来解决。

\n

可以在文档中找到对正在发生的事情的相当有启发性（虽然有点简短）的解释：

\n

\n

在某些情况下，给予盒子的约束是无界的或无限的。这意味着最大宽度或最大高度设置为 double.INFINITY。

\n

当给定无界约束时，尝试尽可能大的盒子将不会\xe2\x80\x99t有效地发挥作用，并且在调试模式下，这样的组合会引发指向该文件的异常。

\n

\n

如果您有兴趣，可以在此处查看错误的根源。

\n