Flutter列表生成路由跳转按钮失效求助：需实现对应按钮跳转

嘿，我帮你找出代码里的几个关键问题啦，这就给你修复方案~

问题根源分析 #

你的代码无法正常工作主要有3个核心原因：

• Map对象访问错误：列表里的元素是Map类型，不能用.语法（比如item.name）访问属性，得用键值对方式item['name']/item['route']来取值。
• 闭包引用陷阱：在map循环的onPressed闭包里直接用item，会导致所有按钮最终都跳转到列表最后一个元素的路由——因为闭包捕获的是变量引用，不是循环时的快照。
• 组件已废弃：RaisedButton在Flutter 2.0+已经被标记为过时，推荐用ElevatedButton替代，避免后续版本兼容性问题。

修复后的完整代码 #

// 先确保Bmw、Audi是有效的页面Widget，比如：
// class Bmw extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(appBar: AppBar(title: const Text('BMW Page')));
//   }
// }

// 语义化命名列表，提升可读性
final List<Map<String, dynamic>> carList = [
  {'id': '0', 'name': 'BMW', 'route': Bmw},
  {'id': '1', 'name': 'Audi', 'route': Audi},
];

// 返回Column的代码
return Column(
  children: carList.map((item) {
    // 用局部变量保存当前循环的item，避开闭包引用陷阱
    final currentCar = item;
    return Container(
      margin: const EdgeInsets.all(5),
      child: SizedBox(
        width: double.infinity,
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            padding: const EdgeInsets.all(20),
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.zero, // 替代circular(0)的简洁写法
            ),
            backgroundColor: Colors.blue,
          ),
          child: Text(
            currentCar['name'] as String,
            style: const TextStyle(color: Colors.white),
          ),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => (currentCar['route'] as Widget Function())(),
              ),
            );
          },
        ),
      ),
    );
  }).toList(),
);

额外优化小建议 #

• 给变量起语义化的名字（比如carList而非list），代码更易读。
• 用const修饰不变的EdgeInsets、TextStyle等，减少不必要的Widget重建。
• 对Map取值做类型转换（比如as String），避免编辑器的类型警告。

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