如何在Flutter的onTap事件中传递作为变量接收的自定义页面？

你可以通过以下几种方式实现将传入的页面变量用于导航：

1. 直接使用当前作用域的页面变量 #

如果当前代码范围内已经定义了保存目标页面的变量，直接替换固定的QuestionPaperScreen()即可：

// 提前定义目标页面变量
final Widget targetPage = YourTargetPage();

onTap: () => Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => targetPage),
)

2. 在自定义组件中接收页面参数 #

如果这段代码属于可复用的自定义组件（比如自定义导航按钮），可以在组件构造函数中添加页面参数，再在onTap逻辑中使用：

class CustomNavButton extends StatelessWidget {
  // 接收外部传入的目标页面
  final Widget targetPage;
  final String buttonText;

  const CustomNavButton({
    super.key,
    required this.targetPage,
    required this.buttonText,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => targetPage),
      ),
      child: Text(buttonText),
    );
  }
}

// 使用组件时传入目标页面
CustomNavButton(
  targetPage: QuestionPaperScreen(),
  buttonText: "跳转试卷页面",
)

3. 处理需要动态传参的页面 #

如果目标页面需要接收参数（比如试卷ID、自定义数据），建议传入WidgetBuilder类型的参数，这样可以在导航时动态创建带参数的页面实例：

class CustomNavButton extends StatelessWidget {
  final WidgetBuilder pageBuilder;
  final String buttonText;

  const CustomNavButton({
    super.key,
    required this.pageBuilder,
    required this.buttonText,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => Navigator.push(
        context,
        MaterialPageRoute(builder: pageBuilder),
      ),
      child: Text(buttonText),
    );
  }
}

// 使用时传入带参数的页面构造逻辑
CustomNavButton(
  pageBuilder: (context) => QuestionPaperScreen(paperId: "1001"),
  buttonText: "跳转试卷页面",
)

核心逻辑是：MaterialPageRoute的builder回调只需要返回一个Widget实例，所以无论是直接传入已构建的Widget变量，还是通过WidgetBuilder动态创建，都能替换原来固定的QuestionPaperScreen()。

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