0

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

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等的消息。

提前致谢！

4

2 回答 2

4

简短的回答：

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

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

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

背景：

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

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

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

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

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

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

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

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

当给定无界约束时，尝试尽可能大的框将无法正常工作，并且在调试模式下，这种组合会引发指向该文件的异常。

如果您有兴趣，可以在这里查看错误的来源。

于 2019-09-27T06:55:41.167 回答
1

我认为您需要将 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()
                  ],
                ),
              )
于 2019-09-27T02:49:06.093 回答