让 TabBarView 占用所有剩余空间 [英] Make TabBarView take up all remaining space
问题描述
Flutter 新手,不知道如何在我的 UI 上设置大小限制,因此不会溢出.尝试使用选项卡制作一些不同的 UI,其中我在选项卡栏上方有一些组件.基本上我想要这样的东西:
New to Flutter and can't figure out how to put size constraints on my UI so nothing overflows. Trying to make a little bit different UI with tabs, where I have some components above the tab bar. Basically I want something like this:
--------------------
| Container |
--------------------
| TabBar |
--------------------
| |
| |
| TabBarView |
| |
| |
--------------------
| Container |
--------------------
问题是,我不知道如何让 TabBarView 占用剩余空间.我的代码示例甚至无法运行,只是给了我这样的错误:
The problem is, I have no idea how to make the TabBarView take up the remaining space. My code example wont even run, just gives me an error like this:
I/flutter (3875): ══╡ 渲染库╞═════════════════════════════════════════════════════I/flutter (3875):在 performResize() 期间抛出了以下断言:I/flutter (3875):水平视口被赋予了无限的高度.I/flutter(3875):视口在横轴上扩展以填充其容器并约束其子项以匹配I/flutter (3875):它们在横轴上的范围.在这种情况下,水平视口被赋予了无限量的I/flutter (3875):要扩展的垂直空间.
I/flutter ( 3875): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter ( 3875): The following assertion was thrown during performResize(): I/flutter ( 3875): Horizontal viewport was given unbounded height. I/flutter ( 3875): Viewports expand in the cross axis to fill their container and constrain their children to match I/flutter ( 3875): their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of I/flutter ( 3875): vertical space in which to expand.
Widget build(BuildContext context) {
List<Tab> myTabs = <Tab>[
Tab(text: 'TAB 1'),
Tab(text: 'TAB 2'),
Tab(text: 'TAB 3'),
];
Widget topBar = Container(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text("TEXT 1"),
Text("TEXT 2"),
Text("TEXT 3"),
],
));
Widget bottomBar = Row(
children: <Widget>[
RaisedButton(child: Text("Cancel")),
RaisedButton(child: Text("OK")),
],
);
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text("Test"),
),
body: Column(
children: <Widget>[
topBar,
TabBar(
tabs: myTabs,
),
TabBarView(
children: myTabs.map((Tab tab) {
return Container(
color: Colors.red,
child: Text(tab.text)
);
}).toList(),
),
],
),
bottomNavigationBar: bottomBar,
),
);
}
推荐答案
将 TabBarView 放入 Expanded
小部件
Put TabBarView inside Expanded
widget
这篇关于让 TabBarView 占用所有剩余空间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!