Flutter使用Navigator传递列表数据到另一页面报错无法解决

错误原因 #

你的代码存在参数类型不匹配问题：点击列表卡片跳转时，你把类型为List<Isi>的整个数据列表传给了Test页面，而根据点击单条商品进入详情的业务场景，Test页面实际需要接收的是单个Isi类型的当前点击项数据，类型不匹配触发了编译报错。

修复方案 #

步骤1：修改跳转传值逻辑 #

找到InkWell组件的onTap回调，将传入的参数从整个列表改为当前点击的单个数据项：

onTap: () {
  Navigator.push(
      context,
      MaterialPageRoute(
          // 原代码传的是整个列表isi，改为传当前循环项item
          builder: (context) => Test(isi: item)));
},

步骤2：确认目标页参数定义 #

在test.dart文件中，确认Test页面的构造参数为单个Isi类型：

class Test extends StatelessWidget {
  // 定义接收单个Isi类型的参数
  final Isi isi;
  // 构造函数声明必传该参数
  const Test({super.key, required this.isi});

  @override
  Widget build(BuildContext context) {
    // 页面内直接通过isi.xxx调用对应属性即可
    return Scaffold(
      appBar: AppBar(title: Text(isi.text)),
      body: Column(
        children: [
          Image.asset(isi.gbr, fit: BoxFit.cover),
          SizedBox(height: 10),
          Text(isi.harga, style: TextStyle(fontSize: 16)),
        ],
      ),
    );
  }
}

场景扩展说明 #

如果你确实需要把整个列表传递到Test页面做批量处理，只需要把Test页面的参数类型改为List<Isi>即可：

final List<Isi> isiList;
const Test({super.key, required this.isiList});

跳转时就可以直接传入整个列表：Test(isiList: isi)

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