Flutter中BottomNavigationBar结合状态保留与多Future的实现方案

问题根源 #

你当前的实现把FutureBuilder直接放在IndexedStack的页面列表中，会导致所有页面的网络请求在App启动时就同时触发——这不仅浪费了Tab2的API配额，还可能因为并发请求的资源竞争导致部分请求失败（也就是你遇到的Tab2偶尔报错的情况）。另外，这种写法也无法实现"点击标签才加载对应数据"的需求。

推荐方案 #

结合IndexedStack（负责保留页面实例，切换时不重建）和AutomaticKeepAliveClientMixin（让页面状态在切换时不被销毁），同时把网络请求的触发时机放在页面的initState生命周期里，这样就能实现：

• 点击标签时才加载对应页面的数据
• 切换标签时保留页面的滚动位置、已加载状态

完整代码示例 #

1. 主页面结构

class MainTabPage extends StatefulWidget {
  const MainTabPage({super.key});

  @override
  State<MainTabPage> createState() => _MainTabPageState();
}

class _MainTabPageState extends State<MainTabPage> {
  int _currentIndex = 0;
  // 用自定义的StatefulWidget作为页面，而非直接放FutureBuilder
  final List<Widget> _pages = const [
    PhotosPage(),
    OnboardVideosPage(),
    Padding(
      padding: EdgeInsets.symmetric(vertical: 15),
      child: Text(
        "Work in progress",
        style: TextStyle(fontSize: 18),
      ),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.photo), label: "Photos"),
          BottomNavigationBarItem(icon: Icon(Icons.video_library), label: "Videos"),
          BottomNavigationBarItem(icon: Icon(Icons.build), label: "WIP"),
        ],
      ),
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
    );
  }
}

2. 带状态保留的Photos页面

class PhotosPage extends StatefulWidget {
  const PhotosPage({super.key});

  @override
  State<PhotosPage> createState() => _PhotosPageState();
}

// 混入AutomaticKeepAliveClientMixin
class _PhotosPageState extends State<PhotosPage> with AutomaticKeepAliveClientMixin {
  late Future<List<Photo>> _photosFuture;

  @override
  void initState() {
    super.initState();
    // 仅在页面初始化时发起请求（首次点击标签时触发）
    _photosFuture = fetchPhotos(http.Client());
  }

  // 必须重写这个方法，返回true表示需要保留状态
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    // 必须调用super.build，否则AutomaticKeepAliveClientMixin不生效
    super.build(context);
    return FutureBuilder<List<Photo>>(
      future: _photosFuture,
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          return const Center(child: Text('Error on Tab 1'));
        } else if (snapshot.hasData) {
          return PhotosList(photos: snapshot.data!);
        } else {
          return const Center(child: CircularProgressIndicator(color: Colors.orange));
        }
      },
    );
  }
}

3. 带状态保留的Videos页面

class OnboardVideosPage extends StatefulWidget {
  const OnboardVideosPage({super.key});

  @override
  State<OnboardVideosPage> createState() => _OnboardVideosPageState();
}

class _OnboardVideosPageState extends State<OnboardVideosPage> with AutomaticKeepAliveClientMixin {
  late Future<List<Onboardvideo>> _videosFuture;

  @override
  void initState() {
    super.initState();
    // 首次点击Tab2时才发起请求
    _videosFuture = fetchOnboardvideos(http.Client());
  }

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return FutureBuilder<List<Onboardvideo>>(
      future: _videosFuture,
      builder: (context, vidsnapshot) {
        if (vidsnapshot.hasError) {
          return const Center(child: Text('Error on Tab 2'));
        } else if (vidsnapshot.hasData) {
          return OnboardvideosList(onboardvideos: vidsnapshot.data!);
        } else {
          return const Center(child: CircularProgressIndicator(color: Colors.orange));
        }
      },
    );
  }
}

关键注意事项 #

• 不要在FutureBuilder的future参数中直接调用fetchPhotos()或fetchOnboardvideos()，否则每次页面build都会重新发起请求，要把Future存在State的变量中。
• AutomaticKeepAliveClientMixin必须配合super.build(context)和wantKeepAlive: true才能生效，确保页面状态在切换时不被销毁。
• IndexedStack会一次性创建所有页面实例，但只有当前索引的页面会被渲染；而initState仅在页面首次创建时执行，所以实现了"点击标签才加载数据"的需求——只有当用户第一次点击某个标签时，对应页面的initState才会触发网络请求。

内容的提问来源于stack exchange，提问作者cornemrc