Jetpack Compose + Voyager库：如何保留页面实例避免重复请求？

要实现保留Screen A原有实例、避免返回时重复调用API的效果，核心是控制路由跳转逻辑和API调用时机，以下是具体实现方式：

1. 采用正确的路由跳转方式 #

确保跳转到Screen B时，Screen A仍保留在路由栈中，不要使用会移除当前页面的跳转方法。以Flutter为例，使用标准的Navigator.push：

// 在Screen A内触发跳转
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => ScreenB()),
);

避免使用pushReplacement、popAndPushNamed这类会替换/移除栈中Screen A的方法，这类操作会导致返回时重新创建Screen A实例。

2. 仅在Screen A首次初始化时调用API #

将API调用放在initState方法中（针对StatefulWidget），该方法只会在实例创建时执行一次，返回Screen A时不会重复触发：

class ScreenA extends StatefulWidget {
  @override
  _ScreenAState createState() => _ScreenAState();
}

class _ScreenAState extends State<ScreenA> {
  @override
  void initState() {
    super.initState();
    // 仅首次加载时调用API
    _loadListData();
  }

  Future<void> _loadListData() async {
    // 你的API请求逻辑，比如：
    // final response = await http.get(Uri.parse('your-api-url'));
    // 处理响应并更新本地状态
  }

  @override
  Widget build(BuildContext context) {
    // 构建UI，不要在此方法内调用API（build会多次触发）
    return Scaffold(
      appBar: AppBar(title: const Text('Screen A')),
      body: // 列表UI
    );
  }
}

3. 全局状态持久化（可选，跨页面/会话保留数据） #

如果需要更稳定的状态保留（比如App后台重启后仍能复用数据），可以用状态管理工具（如Provider、Riverpod、Bloc）将列表数据存在全局状态中，Screen A仅在数据不存在时触发API调用：

// 以Riverpod为例，全局缓存API数据
final listDataProvider = FutureProvider<List<Item>>((ref) async {
  // API请求逻辑，数据会被自动缓存
  return ApiClient.fetchList();
});

// Screen A中读取全局状态
class ScreenA extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final listData = ref.watch(listDataProvider);
    
    return Scaffold(
      body: listData.when(
        loading: () => const CircularProgressIndicator(),
        error: (err, _) => Text('加载失败: $err'),
        data: (items) => ListView.builder(
          itemCount: items.length,
          itemBuilder: (_, index) => ListTile(
            title: Text(items[index].name),
            onTap: () => Navigator.push(context, MaterialPageRoute(builder: (_) => ScreenB())),
          ),
        ),
      ),
    );
  }
}

4. 检查第三方路由库配置（如果使用） #

若使用GoRouter、AutoRoute等路由库，确保跳转配置为新增页面到栈中而非替换栈顶。比如GoRouter中使用push而非go：

// GoRouter正确跳转方式
context.push('/screenB');

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