我想要一个屏幕,顶部有一个小部件,后面跟着一个选项卡栏。我希望所有内容都位于 SingleChildScrollView 内,以便可以滚动整个屏幕(而不仅仅是单个选项卡的内容)。
--------------------
| Widget |
--------------------
| TabBar |
--------------------
| |
| |
| TabBarView |
| |
| |
--------------------
我查看了类似的问题,但它们对我想要实现的目标没有帮助:
如何在 flutter 上的列小部件内添加选项卡 https://stackoverflow.com/questions/58620053/how-to-add-a-tab-inside-a-column-widget-on-flutter
让TabBarView占据所有剩余空间 https://stackoverflow.com/questions/55995077/make-tabbarview-take-up-all-remaining-space
我无法设置固定高度,因为我不知道(标签栏内容)。
我的方法不起作用:
class TestScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Test'),
),
body: SingleChildScrollView(
child: DefaultTabController(
length: 2,
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Text('My Top Widget'),
),
TabBar(
tabs: [
Tab(child: Text('Available')),
Tab(child: Text('Taken')),
],
),
TabBarView(
children: [
Center(child: Text('1')),
Center(child: Text('2')),
],
),
],
),
),
),
);
}
}
我收到以下错误:
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.
The relevant error-causing widget was:
TabBarView file:///home/kay/Code/emat/frontend/lib/ui/TestScreen.dart:26:15
最终应该如何: