【发布时间】:2019-09-23 11:48:21
【问题描述】:
Flutter 新手,不知道如何在我的 UI 上设置大小限制,因此不会溢出。尝试使用选项卡制作一些不同的 UI,其中我在选项卡栏上方有一些组件。基本上我想要这样的东西:
--------------------
| Container |
--------------------
| TabBar |
--------------------
| |
| |
| TabBarView |
| |
| |
--------------------
| Container |
--------------------
问题是,我不知道如何让 TabBarView 占用剩余空间。我的代码示例甚至无法运行,只是给了我这样的错误:
I/flutter (3875): ══╡ 渲染库发现异常╞════════════════════════════════════ ══════════════════════════ I/flutter (3875):在 performResize() 期间抛出了以下断言: I/flutter (3875):水平视口被赋予了无限的高度。 I/flutter(3875):视口在横轴上扩展以填充其容器并约束其子项以匹配 I/flutter (3875):它们在横轴上的范围。在这种情况下,水平视口被赋予了无限量的 I/flutter (3875):要扩展的垂直空间。
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,
),
);
}
【问题讨论】:
标签: flutter tabs widget constraints