Flutter页面数据加载异常求助：点击ListView跳转后数据为空

问题根源 #

当前流程是先跳转加载页，再在原页面异步请求数据并跳转详情页，这种分离操作会导致上下文冲突，且加载页与数据请求的时序混乱，最终导致详情页无法正确接收并渲染数据。

修复方案：将数据请求逻辑移至加载页 #

把索引传递给加载页，在加载页内部完成数据请求，拿到数据后再跳转详情页，这样能保证时序正确且上下文有效。

1. 修改加载页，接收索引并处理数据请求

class testSplashScreen extends StatefulWidget {
  final int index;
  const testSplashScreen({Key? key, required this.index}) : super(key: key);

  @override
  State<testSplashScreen> createState() => _testSplashScreenState();
}

class _testSplashScreenState extends State<testSplashScreen> {
  @override
  void initState() {
    super.initState();
    // 页面初始化后立即请求数据并跳转
    _fetchDataAndNavigate();
  }

  Future<void> _fetchDataAndNavigate() async {
    try {
      var response = await Dio().get('*******/${widget.index + 1}');
      var movieDescription = MovieDescription.fromMapJson(response.data);
      
      // 确保页面未销毁时再执行跳转
      if (mounted) {
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(
            builder: (context) => DescriptionPage(descriptions: movieDescription),
          ),
        );
      }
    } catch (e) {
      // 处理请求失败逻辑，提示错误并返回上一页
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('数据加载失败: $e')),
        );
        Navigator.pop(context);
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    // 加载页UI示例
    return Scaffold(
      backgroundColor: Colors.white,
      body: const Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

2. 更新ListView的onTap逻辑，传递索引给加载页

onTap: () {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => testSplashScreen(index: index),
    ),
  );
}

额外注意事项 #

• 检查MovieDescription.fromMapJson方法，确保所有字段都正确映射，避免因解析错误导致默认值显示。
• 保留异常捕获逻辑，处理网络请求失败的情况，提升用户体验。
• 始终用mounted判断页面状态，防止页面销毁后执行导航操作引发错误。

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