Flutter实现列表中每张图片点击跳转对应独立页面的方法

方案一：复用PostScreen，通过参数区分内容 #

如果你的"独立页面"只是展示不同城市的内容，没必要新建8个页面，给PostScreen加个参数就能搞定：

1. 先修改PostScreen，让它接收城市标识：

class PostScreen extends StatelessWidget {
  final int cityId;
  const PostScreen({super.key, required this.cityId});

  @override
  Widget build(BuildContext context) {
    // 根据cityId加载对应内容，比如显示对应城市图片、信息
    return Scaffold(
      appBar: AppBar(title: Text('城市${cityId}详情')),
      body: Center(child: Text('这是城市${cityId}的专属页面')),
    );
  }
}

2. 然后在ListView.builder的点击事件里传递对应参数：

onTap:(){
  Navigator.push(context, MaterialPageRoute(
    builder: (context)=>PostScreen(cityId: index+1),
  ));
}

方案二：跳转完全不同的独立页面 #

如果每个图片对应完全不同的页面（比如City1Screen、City2Screen...），可以把页面存在列表里，按索引取对应页面跳转：

1. 先定义好各个独立页面：

class City1Screen extends StatelessWidget {
  const City1Screen({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: const Text('城市1专属页面')));
  }
}

class City2Screen extends StatelessWidget {
  const City2Screen({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: const Text('城市2专属页面')));
  }
}
// 依次定义到City8Screen

2. 在ListView所在页面创建页面列表，跳转时取对应项：

// 在当前页面类里定义页面列表
final List<Widget> cityScreens = const [
  City1Screen(),
  City2Screen(),
  City3Screen(),
  City4Screen(),
  City5Screen(),
  City6Screen(),
  City7Screen(),
  City8Screen(),
];

// 修改点击事件
onTap:(){
  Navigator.push(context, MaterialPageRoute(
    builder: (context)=>cityScreens[index],
  ));
}

关于手动添加图片崩溃的问题 #

你之前手动添加图片导致崩溃，大概率是重复编写组件时出现了布局约束冲突、上下文使用错误这类问题。用ListView.builder的方式本身就是最优解，既不会产生冗余代码，也能避免手动编写组件时的低级错误。

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