Flutter问题：点击ListTile跳转后IconButton绑定函数提前执行

兄弟，我太懂这种踩坑的感觉了！你遇到的这个问题其实是Flutter里非常常见的回调函数误用问题，咱们一步步捋清楚：

问题根源 #

你在循环生成IconButton的时候，给onPressed赋值时犯了一个小错误——直接写了onPressed: 你的跳转函数()。这种写法会让Flutter在构建IconButton组件的瞬间就立刻执行这个函数，而不是等用户点击按钮的时候才触发。所以页面刚加载完成，所有IconButton对应的跳转函数就都跑了一遍，次数刚好等于你生成的按钮数量。

正确写法分两种情况 #

1. 函数不需要传参数

直接传递函数的引用就行，千万别加括号！比如：

IconButton(
  icon: Icon(Icons.navigate_next),
  onPressed: openTargetPage, // 注意这里没有括号！
)

2. 函数需要传参数（比如循环里的索引/数据）

这时候必须用匿名函数把你的函数调用包裹起来，这样只有用户点击按钮时，才会执行内部的函数逻辑：

// 举个循环生成的例子
ListView(
  children: [
    for (int i = 0; i < 5; i++)
      IconButton(
        icon: Icon(Icons.link),
        onPressed: () {
          // 用匿名函数包裹，点击时才会执行跳转
          openTargetPage(i);
        },
      ),
  ],
)

完整示例代码 #

给你贴一段新页面的完整代码参考，这样更直观：

class SelectionPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("选择页面")),
      body: ListView.builder(
        itemCount: 5,
        itemBuilder: (context, index) {
          return IconButton(
            icon: const Icon(Icons.open_in_new),
            onPressed: () {
              // 只有点击时才会触发这个跳转逻辑
              Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => TargetPage(pageIndex: index)),
              );
            },
          );
        },
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("目标页面 $pageIndex")),
    );
  }
}

关键提醒 #

记住：onPressed需要的是一个VoidCallback类型的对象（也就是无参无返回值的函数）。如果直接加括号调用函数，相当于把函数执行后的返回值传给它，而不是函数本身。用匿名函数包裹的话，就相当于把这个匿名函数作为回调，只有点击时才会触发里面的代码。

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