我试图在容器中的正文中添加TabBar,但似乎出现错误。
错误:RenderFlex children have non-zero flex but incoming width constraints are unbounded.
代码:
Container(
margin: EdgeInsets.only(top: 20),
child: DefaultTabController(
length: 3,
child: Row(children: [
TabBar(
unselectedLabelColor: Colors.redAccent,
indicatorSize: TabBarIndicatorSize.label,
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.redAccent),
tabs: [
Tab(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
border: Border.all(
color: Colors.redAccent, width: 1)),
child: Align(
alignment: Alignment.center,
child: Text("APPS"),
),
),
),
Tab(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
border: Border.all(
color: Colors.redAccent, width: 1)),
child: Align(
alignment: Alignment.center,
child: Text("MOVIES"),
),
),
),
Tab(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
border: Border.all(
color: Colors.redAccent, width: 1)),
child: Align(
alignment: Alignment.center,
child: Text("GAMES"),
),
),
),
]),
TabBarView(children: [
Icon(Icons.apps),
Icon(Icons.movie),
Icon(Icons.games),
])
])),
)
[您可以看到我在容器的子代中有DefaultTabController
,其中第一行是TabBar
,第二行是TabBarView
。
所以,我在这里做错了什么?
而且,我知道通常的惯例是在应用程序栏中添加标签栏。但这对我的设计不起作用。即使我必须在appbar中添加标签栏,也必须根据我的设计增加appbar的高度,这就是为什么选择这种方法的原因。
谢谢
用列替换行
DefaultTabController(
length: 3,
child: Column(children: [ // Column Here
用扩展名包装TabBarView
Expanded(
child: TabBarView(children: [
Icon(Icons.apps),
Icon(Icons.movie),
Icon(Icons.games),
]),
)
我认为您应该将TabBar添加到Scaffold的appbar字段中,如下所示:
Scaffold(
appBar: AppBar(
title: const Text('Tabbed AppBar'),
bottom: TabBar(
unselectedLabelColor: Colors.redAccent,
indicatorSize: TabBarIndicatorSize.label,
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.redAccent),
tabs: [
Tab(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
border: Border.all(
color: Colors.redAccent, width: 1)),
child: Align(
alignment: Alignment.center,
child: Text("APPS"),
),
),
),
Tab(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
border: Border.all(
color: Colors.redAccent, width: 1)),
child: Align(
alignment: Alignment.center,
child: Text("MOVIES"),
),
),
),
Tab(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
border: Border.all(
color: Colors.redAccent, width: 1)),
child: Align(
alignment: Alignment.center,
child: Text("GAMES"),
),
),
),
),