基于FutureBuilder在TabBar内创建选项卡

Question

我正在寻找一种方法，在

TabBarView

中创建

FutureBuilder

。我找到了以下解决方案，一切正常：

body: FutureBuilder<List<PrayerTimes>>(
  future: futureAlbum,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return TabBarView(
        controller: _tabController,
        children: [
          Text(snapshot.data![0].date)
        ]
      );
    } else if (snapshot.hasError) {
      return Text('${snapshot.error}');
    }
    return const CircularProgressIndicator();
  },
)
...

但是，我在基于

tabs

内的

futureAlbum

创建

TabBar

时遇到了一些麻烦。出现错误

The method 'map' isn't defined for the type 'Future'.

，我不知道我能做什么（不同）：

return Scaffold(
  appBar: AppBar(
    bottom: TabBar(
      controller: _tabController,
      // Doesn't work
      tabs: futureAlbum.map((sub){
        return Tab(icon: Text(sub.date));
      }).toList(),
    )  
)
...

futureAlbum

是一个简单的异步函数，用于获取并返回 JSON 数据。

Answer 1

您可以尝试以下方法：
如果您的快照中没有数据，请用

AppBar

包裹您的

FutureBuilder

并在

null

的

TabBar

参数中返回

bottom

（或者添加带有不可点击选项卡的

AppBar

）。但是，这对于您的布局来说可能不是很好的解决方案，因为

TabBar

会突然出现，所以我建议您尝试以某种方式在用户位于另一页面时获取数据并将其传递到您有问题的页面