Question

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

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

我似乎不明白为什么TabBarView中的子小部件引起异常。提到了无限的高度，但是我提供了子窗口小部件的高度和宽度，所以我对正在发生的事情感到困惑...

仅供参考：TripPage小部件（未在代码中显示，仅显示其状态）作为值传递给Scaffold（同样未显示）的body属性。我不想更改它。

这是我的代码：

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

简短答案：

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

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

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

背景：

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

水平视口的高度不受限制。

视口在横轴上扩展以填充其容器，并约束其子代以使其在横轴上的范围匹配。在这种情况下，水平视口将获得无限量的垂直空间用于扩展。

要了解 unbounded （以及其他术语）在这种情况下到底意味着什么，我们可以参考BoxConstraints类：

最大约束为无限的轴为 unbounded 。

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

可以在documentation中找到关于发生的事情的相当有启发性（尽管有些简短）的解释：

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

在没有无限约束的情况下，尽可能大的框将无法发挥作用，并且在调试模式下，这种组合会引发指向该文件的异常。

如果您有兴趣，可以查看错误here的出处。

Answer 2

我认为您需要将TabBarView包装在容器中并为其提供高度。

              Container(
                height: 200.0,
                child: 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()
                  ],
                ),
              )

Flutter TabBarView子级由于高度不受限制而无法渲染

2 个答案: