Flutter新手求教：如何实现点击ListView条目跳转对应详情页

已完成UI参考 #

• ListView页面UI：
  
• 详情页UI：
  

具体实现步骤 #

1. 定义通用数据模型 #

统一存储每个列表条目对应的详情页字段，避免传参混乱

class ItemDetail {
  final String title;
  final String longContent;
  final String imgPath;
  // 可根据你的实际UI需求扩展字段
  ItemDetail({
    required this.title,
    required this.longContent,
    required this.imgPath,
  });
}

2. 构造列表对应数据源 #

在ListView页面的代码中，初始化所有条目对应的详情数据，可替换为你的实际内容

final List<ItemDetail> allItemData = [
  ItemDetail(
    title: "第一条目标题",
    longContent: "第一条目对应的长文本内容，可自由扩展长度...",
    imgPath: "assets/imgs/item1.png", // 本地资源路径或网络图片链接均可
  ),
  ItemDetail(
    title: "第二条目标题",
    longContent: "第二条目对应的长文本内容，可自由扩展长度...",
    imgPath: "assets/imgs/item2.png",
  ),
  // 剩余列表条目依次对应添加即可
];

3. 给ListView条目绑定点击跳转逻辑 #

给原有ListView的item外层包裹InkWell（带水波纹点击效果），点击时携带当前条目数据跳转到详情页

ListView.builder(
  itemCount: allItemData.length,
  itemBuilder: (context, index) {
    final currentItem = allItemData[index];
    return InkWell(
      onTap: () {
        // 跳转逻辑，携带当前条目数据传入详情页
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => YourDetailPage(detailData: currentItem),
          ),
        );
      },
      // 此处保留你已经写好的ListView条目UI代码即可
      child: YourOriginalListItemWidget(),
    );
  }
)

4. 详情页接收参数渲染内容 #

修改你已经完成的详情页代码，新增接收参数的逻辑，替换原有写死的标题、文本、图片内容即可

class YourDetailPage extends StatelessWidget {
  // 新增接收详情数据的字段
  final ItemDetail detailData;
  const YourDetailPage({super.key, required this.detailData});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 替换为传入的标题
        title: Text(detailData.title),
      ),
      body: SingleChildScrollView(// 长文本滚动适配，已加可忽略
        child: Column(
          children: [
            // 替换为传入的图片，网络图片用Image.network
            Image.asset(detailData.imgPath),
            // 替换为传入的长文本
            Text(detailData.longContent),
            // 剩余你已经写好的详情页UI代码保持不变即可
          ],
        ),
      ),
    );
  }
}

补充说明 #

• 如果使用命名路由管理页面，可将参数通过settings.arguments传递，核心逻辑和上述方案一致
• 如果详情页逻辑复杂需要状态管理，可根据项目实际情况替换为Provider、Bloc等方案传参

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