Flutter TabBarView 子級由於高度無限而無法渲染

Question

我正在嘗試復制以下設計：

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

我似乎不明白為什么我的TabBarView中的子小部件會導致異常。 提到了無限高度，但我提供了子小部件的高度和寬度，所以我對發生的事情感到困惑......

僅供參考： TripPage小部件（代碼中未顯示，僅其 state 是）作為值傳遞給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視圖。 換句話說，它的高度是無限的，如錯誤所示：

水平視口被賦予了無限的高度。

視口在橫軸上擴展以填充其容器並約束其子級以匹配其在橫軸上的范圍。 在這種情況下，水平視口被賦予了無限量的垂直空間來擴展。

要了解無界（和其他術語）在這種情況下的確切含義，我們可以參考BoxConstraints class：

最大約束為無限的軸是無界的。

因此，我們可以看到，在某些情況下，小部件被賦予了無限的最大高度（垂直空間）以用於擴展。 如果一個小部件試圖填充所有可用（無限）空間，這將被證明是有問題的。 因此，Flutter 會拋出錯誤。 這可以通過將小部件包裝在具有受限寬度/高度的父部件中來約束小部件來解決。

可以在文檔中找到對正在發生的事情的相當有啟發性（雖然有點短）的解釋：

在某些情況下，給予盒子的約束是無界的或無限的。 這意味着最大寬度或最大高度設置為 double.INFINITY。

當給定無界約束時，嘗試盡可能大的框不會有用 function 並且在調試模式下，這樣的組合會引發指向該文件的異常。

如果您有興趣，可以在這里查看錯誤的來源。

Answer 2

我認為您需要將 TabBarView 包裝在 Container 中並為其提供高度。

              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()
                  ],
                ),
              )