如何在 Flutter 中向 TabBar 动态添加选项卡？

Question

如何在 Flutter 中为 TabBar Widget 动态添加选项卡？选项卡列表是使用 REST API 从 Internet 获取的。

当我使用下面的代码获取列表时，出现以下错误：

RangeError(index)：无效值：只有有效值是0：1

一个 RenderFlex 在底部溢出了 99896 像素。

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Future<List<Categories>> categoriesList;

  final categoryTabs = <Tab>[
    Tab(text: 'Home'),
  ];

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

    categoriesList = NewsServices.fetchCategoriesList(lang: 'en');
    categoriesList.then((categories) {
      categories.forEach((category) {
        setState(() {
          categoryTabs.add(Tab(
            text: category.name,
          ));
        });
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: categoryTabs.length,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Example App'),
          bottom: TabBar(
            isScrollable: true,
            tabs: categoryTabs,
          ),
        ),
        body: SafeArea(...),
        ),
      ),
    );
  }

Answer 1

您必须迭代从 REST API 获得的列表。

假设，我们声明了一个字符串列表，您将从 REST API 获得。

List<String> tabTextList;

然后声明选项卡列表。

List<Tab> _tabs = List<Tab>();

然后迭代字符串列表。

List<Tab> getTabs() {
    _tabs.clear();
    for (int i = 0; i < tabTextList.length; i++) {
      _tabs.add(getTab(i));
    }
    return _tabs;
  }

  Tab getTab(int widgetNumber) {
    return Tab(
      text: "${tabTextList[widgetNumber]}",
    );
  }

那么构建函数会是这样的。

@override
 Widget build(BuildContext context) {
   return Scaffold(
      body: DefaultTabController(
        length: tabTextList.length,
        child: Scaffold(
          
            bottom: TabBar(
              isScrollable: true,
              tabs: getTabs(),
            ),
          ),
          
          body: Container(),
        ),
      ),
    );
 }

根据您更新的代码，您必须更改某些部分。

使用另一个变量 categoryTabsTemp 来临时存储数组。之后，您必须使用 setState 更新 categoryTabs 并重建。更新后的代码应该是这样的。

var categoryTabs = <Tab>[
    Tab(text: 'Home'),
  ];

  var categoryTabsTemp = <Tab>[
    Tab(text: 'Home'),
  ];

  @override
  void initState() {
    super.initState();
    categoriesList = NewsServices.fetchCategoriesList(lang: 'en');
    categoriesList.then((categories) {
      categories.forEach((category) {
        categoryTabsTemp.add(Tab(
          text: category.name,
        ));
      });
      setState(() {
        categoryTabs = categoryTabsTemp;
      });
    });
  }