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

Question

情况：

我有一个名为 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()
                      ]
                  )
                ],
              ),
            ),

但是给出这样的错误
控制器的长度属性 (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","Outdoor","Indoor", "Seeds", "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,size: 35,color: Color(0xFFC1C2C4),),
            ),
          
        ),),
        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
                ),
                
              ),
            
        ),
          ),),
        Expanded(
          flex:1,
          child: Container(
            decoration: BoxDecoration(
              color:Colors.blue,
            ), 
            child: DefaultTabController(
              length: 5,
                          child: ListView(
                children: [
                  TabBar(
                    isScrollable: true,
                    tabs: 
                      [
                        tabMaker()
                        // Tab(text: tabsText[0],),
                        // Tab(text: tabsText[1],),
                        // Tab(text: tabsText[2],),
                        // Tab(text: tabsText[3],),
                        // Tab(text: tabsText[4],)




                      ]
                  )
                ],
              ),
            ),
          
        ),),
],
    
    );
  }
}

Answer 1

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

Answer 2

您可以在数组中使用 for 循环

            child: DefaultTabController(
              length: tabsText.length,
                          child: ListView(
                children: [
                  TabBar(
                    isScrollable: true,
                    tabs: 
                      [
                        for (var tabText in tabsText)
                          Tab(text: tabText)
                      ]
                  )
                ],
              ),
            ),

编辑：

澄清为什么您的代码不起作用是因为您 return 在 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()

否则你的列表被放入列表中。

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

How to add tabs in flutter using for loop?

tabs

tabview

flutter

情况：

尝试过：

问题：

完整代码：