Flutter中ListView.builder内如何实现点击不同列表项跳转对应页面

你只要拿到当前点击列表项的索引，直接匹配你预先定义的route数组即可，具体实现如下：

• 如果你用ListView.builder动态生成列表项（推荐方案，适配任意长度的列表）：

// 先优化你的数组类型标注，避免运行时错误
final List<String> title = [
  'Animals',
  'Birds',
  'Body Parts',
  'Country',
  'Fish',
  'Plants',
  'Vehicle',
  'Works',
];
final List<Widget> route = [
  Animals(),
  Birds(),
  BodyParts(),
  Country(),
  Fish(),
  Plant(),
  Vehicle(),
  Works(),
];

// 列表构建代码
ListView.builder(
  itemCount: title.length,
  itemBuilder: (BuildContext context, int index) {
    return InkWell(
      onTap: () {
        // 直接用当前项的索引取对应的页面实例
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => route[index]),
        );
      },
      // 这里可以自定义你的列表项UI
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(title[index]),
      ),
    );
  },
)

• 如果你是手动写死每个InkWell的场景，直接给每个InkWell的onTap传入对应索引即可：

// 第一个列表项对应Animals页面，索引为0
InkWell(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => route[0]),
    );
  },
  child: const Text('Animals'),
),
// 第二个列表项对应Birds页面，索引为1
InkWell(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => route[1]),
    );
  },
  child: const Text('Birds'),
),
// 后续项以此类推

注意事项：请确保title数组和route数组的长度、顺序完全一一对应，否则会出现跳转页面和点击标题不匹配的问题。

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