Flutter列表页跳转Rest API详情页无报错白屏问题排查

问题核心 #

你跳转详情页时手动传入的全是空字符串（text: '', code: '', rate: '', lastpricestr: ''），没有传递列表项对应的真实数据，这是导致详情页内容空白的直接原因。另外需注意数据类型匹配，比如原接口返回的rate是数值类型，需要正确转换为字符串。

修复步骤 #

1. 修正跳转时的参数传递 #

在Hisseler页面的ListTile的onTap回调中，传入当前列表项的真实数据：

onTap: () {
  final currentItem = hisseResult?.result[index];
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => StocksDetailScreen(
        text: currentItem?.text ?? "",
        code: (currentItem?.code ?? "").replaceAll("https:", ""), // 和列表显示内容保持一致
        rate: currentItem?.rate?.toString() ?? "",
        lastpricestr: currentItem?.lastpricestr ?? "",
      ),
    ),
  );
},

2. 优化详情页空数据处理 #

为避免极端情况（比如接口返回字段为null）导致的渲染异常，给详情页的Text组件添加默认值：

// AppBar标题
title: Text(rate.isNotEmpty ? rate : "未知"),
// 页面内的文本组件
Text(rate.isNotEmpty ? rate : "0.0", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w900)),
Text(code.isNotEmpty ? code : "无代码", style: TextStyle(fontSize: 20,fontWeight: FontWeight.w600), textAlign: TextAlign.center),

3. 排查广告组件导致的白屏 #

如果修复参数后仍有白屏，临时注释掉广告相关代码，确认是否是广告组件引发的渲染问题：

// 替换原广告代码为空白容器
// context.watch<AdsBloc>().bannerAdEnabled == false ? Container()
//     : BannerAdAdmob()
Container(),

额外优化点 #

• 提前把列表项赋值给变量，减少重复空判断，让代码更简洁：

itemBuilder: (context, index){
  final currentItem = hisseResult?.result[index];
  return Card(
    child: ListTile(
      // 其他代码保持不变
      onTap: () {
        // 使用currentItem传递参数
      },
    ),
  );
}

• 修复callHisse方法中的无效代码：原代码里的if(mounted);多了分号，改为有效判断：

if(mounted){
  setState(() {
    counter = result.result.length;
    result.result.sort((a, b) => (a.text ?? "").compareTo(b.text ?? ""));
    hisseResult = result;
  });
}

内容的提问来源于stack exchange，提问作者Mıktad Tahir Durak