Flutter中ListView如何实现单选项后跳转第二页渲染内容？

初学者使用Flutter开发时，已通过rootBundle加载本地JSON数据，借助ListView.builder渲染出基础列表，想要实现的目标是：点击列表中的任意条目时，仅将该选中条目的完整内容传递跳转至独立的详情第二页，目前不清楚列表项的点击交互逻辑、跨页面传值该如何编写。

当前已编写的核心代码片段：

List<dynamic> buy;

  @override
  void initState() {
    super.initState();
    rootBundle.loadString('assets/dados.json').then((jsonData) {
      this.setState(() {
        buy = jsonDecode(jsonData);
      });
    });
  }

// 列表渲染逻辑
ListView.builder(
      itemCount: buy?.length ?? 0,
      itemBuilder: (_, index) {
      return buildCardBuy(context, index, buy);
      }
)

• 给列表项绑定点击事件
  在itemBuilder构建每个卡片的时候，通过当前索引拿到对应的单条数据，用InkWell（自带点击水波纹效果）包裹原有返回的buildCardBuy组件，在onTap回调里触发路由跳转：

  ListView.builder(
    itemCount: buy?.length ?? 0,
    itemBuilder: (context, index) {
      // 取出当前索引对应的单条选中数据
      final currentSelectedItem = buy[index];
      return InkWell(
        onTap: () {
          // 调用路由跳转，把选中的单条数据作为参数传给详情页
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => DetailPage(
                selectedItem: currentSelectedItem,
              ),
            ),
          );
        },
        // 保留你原来写的卡片渲染逻辑
        child: buildCardBuy(context, index, buy),
      );
    },
  )
  

• 编写可接收传参的详情第二页
  新建详情页组件，在构造函数中定义用来接收选中条目的字段，在页面渲染时直接使用传入的参数展示内容即可，无需重复读取本地JSON：

  class DetailPage extends StatelessWidget {
    // 定义接收的选中数据字段
    final dynamic selectedItem;
    const DetailPage({super.key, required this.selectedItem});
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: const Text('商品详情')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          // 这里替换成你需要展示的选中项具体字段即可
          child: Text('选中内容：${selectedItem.toString()}'),
        ),
      );
    }
  }
  

• 额外交互逻辑补充
  如果后续需要实现选中高亮的效果，可以在当前列表页面单独维护一个记录选中索引的状态变量，点击列表项时更新该状态，在渲染卡片时判断当前索引和选中索引是否一致，匹配时给卡片设置不同的背景色即可，不需要改动页面传值的逻辑。

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