Flutter中如何判断Widget是Stateful还是Stateless及底部导航刷新问题

问题根因 #

这个问题和你用Stateful还是Stateless没有直接关系，核心原因是你大概率是把3个标签页的Widget提前初始化存在了一个列表里，切换底部导航的时候只是修改当前选中的索引，直接从列表里拿已经创建好的Widget渲染，不会重新触发页面的初始化逻辑，自然不会重新拉取API。
绝大多数开发者首次实现底部导航时都会写成如下形式：

class MainPageState extends State<MainPage> {
  int _currentIndex = 1;
  // 页面提前初始化完成，后续切换不会重新创建实例
  final List<Widget> _pages = [
    ProfilePage(),
    HomePage(),
    SettingsPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) => setState(() => _currentIndex = index),
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
        ],
      ),
    );
  }
}

这种写法下，ProfilePage的initState只会在第一次创建_pages列表的时候执行一次，后续切换导航不会再触发，自然不会重新拉取API。

解决方案 #

有两种常用的实现方式，根据你的业务需求选择即可：

方式1：切换导航时动态创建页面 #

不要提前把页面存到列表里，每次build的时候根据当前索引动态生成页面实例，这样每次切换都会重新走页面的初始化逻辑：

class MainPageState extends State<MainPage> {
  int _currentIndex = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 每次build动态创建对应页面，不会复用旧实例
      body: [
        ProfilePage(),
        HomePage(),
        SettingsPage(),
      ][_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) => setState(() => _currentIndex = index),
        items: const [...],
      ),
    );
  }
}

注意：这种方式每次切换页面都会销毁旧页面、创建新页面，如果你有页面保存输入态、滚动位置的需求，这种方式不适用。

方式2：使用IndexedStack+页面可见时主动触发刷新 #

如果需要保留页面状态，又要在切换到页面的时候拉取最新API，可以通过GlobalKey主动调用子页面的刷新方法：

1. 首先给需要刷新的页面定义刷新方法和全局Key：

class ProfilePage extends StatefulWidget {
  const ProfilePage({super.key});
  // 定义全局Key用来调用子页面的刷新方法
  static final GlobalKey<_ProfilePageState> globalKey = GlobalKey();

  @override
  State<ProfilePage> createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  Future<void> fetchData() async {
    // 你的API请求逻辑写在这里
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return ...;
  }
}

2. 底部导航切换的时候主动调用对应页面的刷新方法：

class MainPageState extends State<MainPage> {
  int _currentIndex = 1;
  final List<Widget> _pages = [
    ProfilePage(key: ProfilePage.globalKey),
    HomePage(),
    SettingsPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() => _currentIndex = index);
          // 切换到Profile页时主动调用刷新方法
          if (index == 0) {
            ProfilePage.globalKey.currentState?.fetchData();
          }
        },
        items: const [...],
      ),
    );
  }
}

这种方式可以保留页面的原有状态，只有需要刷新数据的时候主动触发请求，性能比第一种方式更好。

额外说明 #

如果你的页面是Stateless也可以实现刷新，只要把API请求的逻辑放到状态管理里，切换导航的时候发送更新事件，页面监听事件重新渲染就行，和页面本身是Stateful还是Stateless没有必然联系。

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