Flutter如何让自定义Container组件实现Button点击跳转功能？

首先直接解答你的两个核心疑问：

• 不需要删除已写好的5个Container组件再重做Button，你已经调好的样式可以完全保留，只需额外增加交互层组件即可实现点击能力
• 封装为自定义Widget不会对功能实现造成负面影响，反而只需修改一次自定义组件代码，所有用到该组件的按钮就会同步生效，开发效率更高

实现逻辑说明 #

Flutter的交互能力是通过组件组合实现的，并非只有原生Button组件才能响应点击，你只需要给现有Container外层包裹GestureDetector（纯点击无效果）或者InkWell（带Material风格水波纹点击效果）组件，就能给它增加点击交互能力。

具体修改代码 #

1. 改造自定义MenuButton2组件 #

给组件增加点击回调参数，用InkWell包裹原有Container：

class MenuButton2 extends StatelessWidget {
  final String title;
  // 新增点击回调参数
  final VoidCallback onTap;
  const MenuButton2({super.key, required this.title, required this.onTap});
  @override
  Widget build(BuildContext context) {
    // 用InkWell包裹原有Container
    return InkWell(
      // 绑定点击回调
      onTap: onTap,
      // 配置水波纹圆角和原有Container保持一致
      borderRadius: BorderRadius.all(Radius.circular(20)),
      child: Container(
        decoration: BoxDecoration(
          color: const Color(0xFFa9d470),
          border: Border.all(
            color: const Color(0xFFa9d470)
          ),
          borderRadius: BorderRadius.all(Radius.circular(20)),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.9),
              spreadRadius: 10,
              blurRadius: 12
            )
          ]
        ),
        width: MediaQuery.of(context).size.height*0.38,
        height: MediaQuery.of(context).size.height*0.11,
        child: Align(
          alignment: Alignment.center,
          child: Text (title,
            style: TextStyle(
              fontSize: 50,
              fontFamily: 'Amatic',
              fontWeight: FontWeight.bold
            ),
          )
        )
      ),
    );
  }
}

2. 调用组件时传入跳转逻辑 #

在首页使用MenuButton2的位置，通过onTap参数传入页面跳转代码即可，示例如下：

children: <Widget>[ 
  MenuButton2(
    title: 'Bewohner',
    onTap: () {
      // 跳转到Bewohner对应页面，替换为你自己的页面类名即可
      Navigator.push(context, MaterialPageRoute(builder: (context) => const BewohnerPage()));
    },
  ),
  SizedBox(height: 50),
  MenuButton2(
    title: 'Parkplan',
    onTap: () {
      // 对应Parkplan页面跳转逻辑
      Navigator.push(context, MaterialPageRoute(builder: (context) => const ParkplanPage()));
    },
  ),
  SizedBox(height: 40),
  MenuButton2(
    title: 'Zeiten & Preise',
    onTap: () {
      // 对应Zeiten & Preise页面跳转逻辑
      Navigator.push(context, MaterialPageRoute(builder: (context) => const ZeitenPreisePage()));
    },
  ),
  SizedBox(height: 40),
  // 你已经导入了Anfahrt页面，直接写即可
  MenuButton2(
    title: 'Anfahrt',
    onTap: () {
      Navigator.push(context, MaterialPageRoute(builder: (context) => const Anfahrt()));
    },
  ),
  SizedBox(height: 40),
  MenuButton2(
    title: 'Über Uns',
    onTap: () {
      // 对应Über Uns页面跳转逻辑
      Navigator.push(context, MaterialPageRoute(builder: (context) => const UberUnsPage()));
    },
  )
] 

如果你不需要点击水波纹效果，把外层的InkWell换成GestureDetector，删除borderRadius配置即可，其余逻辑完全一致。

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