我正在尝试创建TabBar,它将位于页面中间(描述小部件必须在顶部)。
问题是我必须手动设置包含TabBarView的Container小部件的高度。如果我没有设置这个高度,我会得到错误Horizontal viewport was given unbounded height.
。
顶级小部件:
Widget build(BuildContext context) {
return Scaffold(
appBar: CustomAppBar(),
body: SingleChildScrollView(
child: Column(
children: <Widget>[Description(), Tabs()],
),
),
);
}
选项卡小部件:
class Tabs extends StatelessWidget {
final _tabs = [
Tab(
icon: Icon(Icons.menu),
text: 'Menu',
),
Tab(
icon: Icon(Icons.mode_comment),
text: 'Reviews',
)
];
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: _tabs.length,
child: Column(
children: <Widget>[
TabBar(
labelColor: PickColors.black,
indicatorSize: TabBarIndicatorSize.tab,
tabs: _tabs,
),
Container(
width: double.infinity,
height: 200, // I need to remove this and make height dynamic
child: TabBarView(
children: <Widget>[MenuTab(), ReviewsTab()],
),
),
],
));
}
}
因为标签的内容是动态的,所以高度也是动态的。我不能在这里使用静态高度。
有没有一个静态高度的容器的替代品?我怎样才能使我的标签的高度动态?
3条答案
按热度按时间z2acfund1#
我已经通过将SingleChildScrollView更改为ListView并编写自己的TabView小部件(在Stack Package 器中包含选项卡)修复了这个问题。
顶层小部件主体 Package 从列和SingleChildScrollView更改为ListView:
选项卡小部件-删除了具有静态宽度 Package 器的容器:
新的自定义TabsView组件目前只处理两个选项卡(因为我只需要两个),但可以很容易地更改为处理动态数量的选项卡:
P.S.大小配置与媒体查询相同。(上下文).大小.宽度。
希望这对像我这样的人有帮助!:)
pepwfjgg2#
我发现这对我很有效
3vpjnl9f3#
实际上,
TabBarView
是使用Viewport
实现的,它不会“冒泡”它的高度。如果不实现完全定制的TabBarView
/PageView
,很难实现动态高度。我这里有一个解决方案,它也不是完美的,但基本上是无故障的,它使用一个
Stack
和一个不可见的隐藏的当前标签小部件来测量和动画大小和实际的TabBarView
填充Stack
。它运行得很好,但是这种方法的实际缺点是当前表被构建和布局了两次,只要小部件不使用全局键或隐藏的副作用,这应该不会导致任何问题。