Flutter如何实现仅在屏幕打开时触发对应API调用？

核心原因分析 #

你的问题本质是页面被提前实例化，导致initState/构造函数中的API调用在APP启动时就执行。通常是以下两种情况：

• 在路由配置或导航逻辑中提前创建了页面实例（而非在跳转时动态创建）
• API调用写在了页面的构造函数中（构造函数在实例化时立即执行）

具体解决步骤 #

1. 确保路由采用懒加载配置 #

MaterialApp的routes默认支持懒加载，只要用builder函数定义路由，页面只会在跳转时才被实例化：

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => Screen0(),
    '/screen1': (context) => Screen1(),
    '/screen2': (context) => Screen2(),
    // 其他页面路由
  },
)

2. 规范Drawer导航逻辑 #

不要在Drawer中直接创建页面实例，改用路由名跳转，确保页面仅在用户点击时才初始化：

Drawer(
  child: ListView(
    children: [
      ListTile(
        title: const Text('Screen1'),
        onTap: () {
          Navigator.pop(context); // 先关闭Drawer
          Navigator.pushNamed(context, '/screen1'); // 通过路由名跳转
        },
      ),
      // 其他导航项
    ],
  ),
)

3. 正确放置API调用代码 #

将API调用放在页面的initState方法中（仅针对有状态组件），该方法仅在页面第一次插入Widget树时执行：

class Screen1 extends StatefulWidget {
  @override
  _Screen1State createState() => _Screen1State();
}

class _Screen1State extends State<Screen1> {
  @override
  void initState() {
    super.initState();
    // 页面打开时才触发API调用
    _fetchScreenData();
  }

  Future<void> _fetchScreenData() async {
    // 你的API请求逻辑
    final response = await http.get(Uri.parse('https://your-api-url.com/data'));
    // 处理响应数据
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(/* 页面UI */);
  }
}

如果是无状态组件，将API请求封装为成员变量的Future，避免build方法重复触发调用：

class Screen1 extends StatelessWidget {
  // 仅初始化一次的API请求Future
  final Future<YourDataModel> _dataFuture = _fetchScreenData();

  static Future<YourDataModel> _fetchScreenData() async {
    final response = await http.get(Uri.parse('https://your-api-url.com/data'));
    return YourDataModel.fromJson(jsonDecode(response.body));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<YourDataModel>(
        future: _dataFuture,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return /* 渲染数据UI */;
          } else if (snapshot.hasError) {
            return Text('加载失败: ${snapshot.error}');
          }
          return const CircularProgressIndicator();
        },
      ),
    );
  }
}

4. 规避预加载错误做法 #

• 不要在APP启动时提前实例化所有页面（比如将页面实例存为全局变量）
• 不要在Drawer的Widget树中直接嵌套页面组件（比如Drawer(child: Screen1())会导致页面提前初始化）
• 使用状态管理（如Provider/Bloc）时，不要在全局初始化时触发所有页面的API事件，而是在页面initState中发送事件触发请求

进阶：页面可见性监听（可选） #

如果需要在页面从后台回到前台时重新加载数据，可以使用RouteObserver监听页面生命周期：

// 全局定义RouteObserver
final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();

// MaterialApp中添加观察者
MaterialApp(
  navigatorObservers: [routeObserver],
  // ...其他配置
)

// 在页面中监听
class _Screen1State extends State<Screen1> with RouteAware {
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    routeObserver.subscribe(this, ModalRoute.of(context) as PageRoute);
  }

  @override
  void didPopNext() {
    // 页面从后台返回时重新加载数据
    _fetchScreenData();
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  // ...API调用方法
}

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