我正在尝试复制以下设计:
我似乎不明白为什么我的 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等的信息
提前致谢!
最佳答案
简答:
要使用 TabBarView，您应该提供一个有限的高度。有几种方法可以做到这一点。其中之一是将其包装在高度受限的小部件中(例如，Container 或 SizedBox)。或者，如果小部件的父级具有受限尺寸(在您的情况下没有)，您可以将 TabBarView 包装在 Expanded 小部件中，这将指示它扩展以填充可用空间。
对于您的情况，类似以下内容应该可以解决问题:
Container( // or SizedBox, etc.
height: 200
child: TabBarView(...)
)
背景:
您正在使用没有任何高度限制的 TabBarView View 。换句话说，它的高度是无限的，如错误所示:
Horizontal viewport was given unbounded height.
Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of vertical space in which to expand.
要理解unbounded(和其他术语)在此上下文中的确切含义，我们可以引用 BoxConstraints类:
An axis whose maximum constraint is infinite is unbounded.
因此，我们可以看到，在某些情况下，小部件被赋予无限的最大高度(垂直空间)以用于扩展。如果小部件试图填充所有可用(无限)空间，这将证明是有问题的。因此，Flutter 会抛出一个错误。这可以通过将小部件包装在具有受限宽度/高度的父级中来约束小部件来解决。
可以在 documentation 中找到对正在发生的事情的相当有启发性的(虽然有点简短)解释。 :
In certain situations, the constraint that is given to a box is unbounded, or infinite. This means that either the maximum width or the maximum height is set to double.INFINITY.
A box that tries to be as big as possible won’t function usefully when given an unbounded constraint and, in debug mode, such a combination throws an exception that points to this file.
如果你有兴趣，你可以看看错误的来源here .
关于user-interface - Flutter TabBarView 子项因高度无限制无法渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58125403/