无法在每个选项卡上显示多个数据:TabBarView
Couldn't display more than one data on each tab: TabBarView
我是个新手,现在当我尝试在 TabBarView 的每个选项卡上的 ListView 中显示多张卡片时,我收到此错误
" 控制器的长度 属性 (4) 与 TabBar 的标签 属性 中存在的标签数量 (5) 不匹配。"
这是我的代码,有没有办法做到这一点?
这是标签栏
child: TabBar(
tabs: [
Tab(child: Text("New", style: TextStyle(color: Colors.black),),),
Tab(child: Text("Indoor", style: TextStyle(color: Colors.black),),),
Tab(child: Text("Outdoor", style: TextStyle(color: Colors.black),),),
Tab(child: Text("Furniture", style: TextStyle(color: Colors.black),),),
],
indicatorColor: Color.fromRGBO(230, 0, 49, 0.86),
),
这是 TabBarView
child: TabBarView(
children:
[
//First tab
ListView(
children: [
Card(
clipBehavior: Clip.antiAlias,
elevation: 0.5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12)),
child: Padding(
padding: const EdgeInsets.only(
left: 0.0, top: 10.0, bottom: 0.0, right: 0.0),
child: InkWell(
onTap: () {
},
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(alignment: Alignment.bottomCenter, children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0),
child: Ink.image(
height: 200,
image: AssetImage('assets/images/kitchen.jpg'),
fit: BoxFit.fitWidth),
),
]),
ListTile(
title: Text(
"Project Name",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
subtitle: Text(
"Project details descriptions",
style: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.grey),
),
),
],
),
),
),
),
],
),
ListView(
children: [
Card(
clipBehavior: Clip.antiAlias,
elevation: 0.5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12)),
child: Padding(
padding: const EdgeInsets.only(
left: 0.0, top: 10.0, bottom: 0.0, right: 0.0),
child: InkWell(
onTap: () {
},
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(alignment: Alignment.bottomCenter, children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0),
child: Ink.image(
height: 200,
image: AssetImage('assets/images/food_tables.jpg'),
fit: BoxFit.fitWidth),
),
]),
ListTile(
title: Text(
"Project Name",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
subtitle: Text(
"Project details descriptions",
style: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.grey),
),
),
],
),
),
),
),
],
),
],
),
您有 4 个选项卡,但在 tabbarViews 中有 2 个列表视图。
对于解决方案,您必须删除 2 个选项卡,或者您可以在 tabbarview 中再添加 2 个小部件
TabBarView(children: [
// 1.tab
Container(),
// 2.tab
Container(),
// 3.tab
Container(),
// 4.tab
Container(),
]);
我是个新手,现在当我尝试在 TabBarView 的每个选项卡上的 ListView 中显示多张卡片时,我收到此错误
" 控制器的长度 属性 (4) 与 TabBar 的标签 属性 中存在的标签数量 (5) 不匹配。"
这是我的代码,有没有办法做到这一点?
这是标签栏
child: TabBar(
tabs: [
Tab(child: Text("New", style: TextStyle(color: Colors.black),),),
Tab(child: Text("Indoor", style: TextStyle(color: Colors.black),),),
Tab(child: Text("Outdoor", style: TextStyle(color: Colors.black),),),
Tab(child: Text("Furniture", style: TextStyle(color: Colors.black),),),
],
indicatorColor: Color.fromRGBO(230, 0, 49, 0.86),
),
这是 TabBarView
child: TabBarView(
children:
[
//First tab
ListView(
children: [
Card(
clipBehavior: Clip.antiAlias,
elevation: 0.5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12)),
child: Padding(
padding: const EdgeInsets.only(
left: 0.0, top: 10.0, bottom: 0.0, right: 0.0),
child: InkWell(
onTap: () {
},
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(alignment: Alignment.bottomCenter, children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0),
child: Ink.image(
height: 200,
image: AssetImage('assets/images/kitchen.jpg'),
fit: BoxFit.fitWidth),
),
]),
ListTile(
title: Text(
"Project Name",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
subtitle: Text(
"Project details descriptions",
style: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.grey),
),
),
],
),
),
),
),
],
),
ListView(
children: [
Card(
clipBehavior: Clip.antiAlias,
elevation: 0.5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12)),
child: Padding(
padding: const EdgeInsets.only(
left: 0.0, top: 10.0, bottom: 0.0, right: 0.0),
child: InkWell(
onTap: () {
},
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(alignment: Alignment.bottomCenter, children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0),
child: Ink.image(
height: 200,
image: AssetImage('assets/images/food_tables.jpg'),
fit: BoxFit.fitWidth),
),
]),
ListTile(
title: Text(
"Project Name",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
subtitle: Text(
"Project details descriptions",
style: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.grey),
),
),
],
),
),
),
),
],
),
],
),
您有 4 个选项卡,但在 tabbarViews 中有 2 个列表视图。
对于解决方案,您必须删除 2 个选项卡,或者您可以在 tabbarview 中再添加 2 个小部件
TabBarView(children: [
// 1.tab
Container(),
// 2.tab
Container(),
// 3.tab
Container(),
// 4.tab
Container(),
]);