Flutter自定义Container按钮跳转页面失败，求解决方案

以下是几种可行的解决方式，你可以根据需求选择：

方式1：正确用GestureDetector包裹Container #

你之前可能没把GestureDetector放在正确层级，或者路由跳转逻辑有问题。正确做法是用GestureDetector包裹整个Container，在onTap中编写页面跳转代码：

GestureDetector(
  onTap: () {
    // 示例：跳转到PaymentPage页面
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const PaymentPage()),
    );
  },
  child: Container(
    decoration: BoxDecoration(
      border: Border.all(color: Colors.green.shade100),
      borderRadius: BorderRadius.circular(12),
    ),
    padding: const EdgeInsets.all(12),
    child: const Row(
      children: [
        Text(
          "Pay Now",
          style: TextStyle(color: Colors.white),
        ),
        Icon(
          Icons.arrow_forward_ios,
          size: 16,
          color: Colors.white,
        ),
      ],
    ),
  ),
)

注意：确保当前Widget处于MaterialApp的子树中，能正常获取context访问Navigator；如果在嵌套结构里，可尝试用Navigator.of(context, rootNavigator: true)获取全局导航器。

方式2：用InkWell替代GestureDetector（推荐） #

InkWell是Material组件库自带的点击组件，除了处理点击事件，还会生成符合Material风格的水波纹效果，比GestureDetector更贴合Flutter设计规范：

InkWell(
  borderRadius: BorderRadius.circular(12), // 和Container圆角保持一致，水波纹会适配圆角
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const PaymentPage()),
    );
  },
  child: Container(
    decoration: BoxDecoration(
      border: Border.all(color: Colors.green.shade100),
      borderRadius: BorderRadius.circular(12),
    ),
    padding: const EdgeInsets.all(12),
    child: const Row(
      children: [
        Text(
          "Pay Now",
          style: TextStyle(color: Colors.white),
        ),
        Icon(
          Icons.arrow_forward_ios,
          size: 16,
          color: Colors.white,
        ),
      ],
    ),
  ),
)

方式3：直接用原生按钮自定义样式（更简便） #

如果不需要极端复杂的自定义效果，直接用TextButton或ElevatedButton定制样式即可，原生按钮自带onPressed回调，不易出错：

TextButton(
  style: TextButton.styleFrom(
    padding: const EdgeInsets.all(12),
    side: BorderSide(color: Colors.green.shade100),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const PaymentPage()),
    );
  },
  child: const Row(
    mainAxisSize: MainAxisSize.min, // 让Row仅占内容宽度
    children: [
      Text(
        "Pay Now",
        style: TextStyle(color: Colors.white),
      ),
      SizedBox(width: 8), // 给文字和图标添加间距
      Icon(
        Icons.arrow_forward_ios,
        size: 16,
        color: Colors.white,
      ),
    ],
  ),
)

额外排查点 #

• 确认跳转目标页面已在MaterialApp的路由配置中，或使用了正确的路由跳转方式
• 检查是否有其他组件覆盖在Container上方，导致点击事件被拦截（比如Stack上层组件未设置behavior: HitTestBehavior.translucent）
• 可在onTap/onPressed中添加print("点击触发")，测试点击事件是否正常触发

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