如何使用for循环在Flutter中添加标签？

编程问答 2022-11-06

问题描述

情况：

我有一个名为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）不匹配 属性。

问题：

我想要这个

enter image description here


我该如何实现？

完整代码：

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()

否则，您的列表将被放入列表中。

tabstabview