如何解决如何使用for循环在Flutter中添加标签?
情况:
我有一个名为tabsText
的列表,我想从TabBar
内的列表中为每个项目创建标签。
列表如下:
List<String> tabsText = ["Top","Outdoor","Indoor","Seeds","Flowers"];
尝试:
我做了一个名为tabsMaker
的函数。
tabMaker(){
for (var i = 0; i < tabsText.length; i++) {
return Tab(text: tabsText[i],);
};
}
并在TabBar
内这样使用,
child: DefaultTabController(
length: 5,child: ListView(
children: [
TabBar(
isScrollable: true,tabs:
[
tabMaker()
]
)
],),
但给出了这样的错误
控制器的length属性(5)与TabBar的选项卡中存在的选项卡数(1)不匹配
属性。
问题:
完整代码:
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class PlantFeatureScreen1 extends StatefulWidget {
@override
_PlantFeatureScreen1State createState() => _PlantFeatureScreen1State();
}
class _PlantFeatureScreen1State extends State<PlantFeatureScreen1> {
List<String> tabsText = ["Top","Flowers"];
tabMaker(){
for (var i = 0; i < tabsText.length; i++) {
return Tab(text: tabsText[i],);
};
}
@override
Widget build(BuildContext context) {
return Column(
children:<Widget> [
Expanded(
flex:1,child: Container(
decoration: BoxDecoration(
color:Colors.grey,child: ListTile(leading: Icon(Icons.donut_small,size: 35,color: Color(0xFFC1C2C4),trailing: Icon(Icons.search,Expanded(
flex:1,child: Align(
alignment: Alignment(-1,0),child: Container(
decoration: BoxDecoration(
color:Colors.white,child: Text(
"Plants",style: TextStyle(
fontSize: 30,fontWeight: FontWeight.w700
),child: Container(
decoration: BoxDecoration(
color:Colors.blue,child: DefaultTabController(
length: 5,tabs:
[
tabMaker()
// Tab(text: tabsText[0],// Tab(text: tabsText[1],// Tab(text: tabsText[2],// Tab(text: tabsText[3],// Tab(text: tabsText[4],)
]
)
],],);
}
}
解决方法
for循环返回单个标签。
tabMaker(){
List<Tab> tabs = List();
for (var i = 0; i < tabsText.length; i++) {
tabs.add(Tab(text: tabsText[i],));
};
return tabs;
}
在TabBar
中
像这样使用它:
tabs: tabMaker()
,
您可以使用数组中的循环
child: DefaultTabController(
length: tabsText.length,child: ListView(
children: [
TabBar(
isScrollable: true,tabs:
[
for (var tabText in tabsText)
Tab(text: tabText)
]
)
],),
编辑:
要弄清代码为什么不起作用,是因为您在tabMaker
函数中返回了1个制表符,而DefaultTabController
期望为5。
如果您想使用自己的方法,则应该可以:
List<Tab> tabMaker(){ //return type is specified
List<Tab> tabs = []; //create an empty list of Tab
for (var i = 0; i < tabsText.length; i++) {
tabs.add(Tab(text: tabsText[i])); //add your tabs to the list
}
return tabs; //return the list
}
并更改
tabs:
[
tabMaker()
]
到
tabs: tabMaker()
否则,您的列表将被放入列表中。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。