如何创建动态标签，等于列表的长度

问题描述

如何创建等于列表长度的制表符，它们的名称应等于列表中项目的名称，然后从Firebase实时数据库中获取列表。

这是我的代码：

class _ItemDetailsDemoState extends State<ItemDetailsDemo>  with SingleTickerProviderStateMixin {


  @override
  void initState() {
    getSubCategories();
  
    super.initState();
  }
  

  List<SubCategoryLoader> subCategoryLoaderList = List();

  Future<void> getSubCategories() async {
    await FirebaseDatabase.instance.reference().child("SubCategoryNames").once()
        .then((DataSnapshot snapshot) {
      var key = snapshot.value.keys;
  ;

      for (var i in key) {
        SubCategoryLoader subCategoryLoader = new SubCategoryLoader(
            snapshot.value[i]['Name']
        );
        subCategoryLoaderList.add(subCategoryLoader);
      }
      for (int j = 0; j < subCategoryLoaderList.length; j++) {
        print(subCategoryLoaderList[j].Name);
      }
      if (mounted) {
        setState(() {
        
          print(subCategoryLoaderList.length);
        });
      }
    });
  }


  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: FirebaseDatabase.instance.reference().child("SubCategoryNames").once(),builder: (context,snapshot){
        if(snapshot.hasData){
          if(snapshot.data!=null)
            {
              return DefaultTabController(
                  length: subCategoryLoaderList.length,// I made this dynamic but this is throwing an error "controller's length property does not match with number of tabs,this is because my Tab is static which is 2 how can I make it dynamic. 
                  child: Scaffold(
                    appBar: AppBar(
                      bottom: TabBar(
                        tabs: [
                          Tab(icon: Icon(Icons.looks_one),text: "List1"),//How can i make this dynamic and text:"List1" must be the name of list items
                          Tab(icon: Icon(Icons.looks_two),text: "List2"),],),body: TabBarView(
                      children: [
                        _buildList(key: "key1",string: "a"),_buildList(key: "key2",string: "List2: "),));
            }else{
           return Loader();
          }
        }else{
          return Loader();
        }
      },);

  }

  Widget _buildList({String key,String string}) {
    return ListView.builder(
      shrinkWrap: true,scrollDirection: Axis.vertical,itemCount: subCategoryLoaderList.length,itemBuilder: (context,index1){
        return Container(
          child: Text(subCategoryLoaderList[index1].Name+string),);
      },);
  }
}

我还希望TabBarView也具有动态性，以便它可以相应地呈现项目。我需要获取属于该子类别的所有数据。

解决方法

tabs和TabBarView的children的数量必须与DefaultTabController的length相同。一种实现方法是使用map函数将SubCategoryLoader转换为Tab s或页面：

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: FirebaseDatabase.instance
          .reference()
          .child("SubCategoryNames")
          .once(),builder: (context,snapshot) {
        if (snapshot.hasData) {
          if (snapshot.data != null) {
            return DefaultTabController(
                length: subCategoryLoaderList.length,child: Scaffold(
                  appBar: AppBar(
                    bottom: TabBar(
                      tabs: subCategoryLoaderList
                          .map((subCatagory) => Tab(text: subCatagory.Name))
                          .toList(),),body: TabBarView(
                    children: subCategoryLoaderList.map((sub){
                      return _buildList(key: "key${sub.id}",string: "some string");
                    }).toList(),));
          } else {
            return Loader();
          }
        } else {
          return Loader();
        }
      },);
  }