如何在Flutter中实现类按钮行为的Container组件

当然可行，在Flutter里可以通过给Container嵌套手势监听组件来实现点击交互，常用的两种实现方式如下：

• 使用InkWell（推荐，带Material水波纹效果）
  把Container放在InkWell的child属性中，通过onTap回调处理点击逻辑，代码示例：

  InkWell(
    onTap: () {
      // 这里编写点击后的业务逻辑，比如页面跳转、弹窗提示等
      print('Container被点击');
    },
    child: Container(
      child: Column(
        children: [
          Text('All categories'),
          Text('All cities'),
        ],
      ),
    ),
  )
  

• 使用GestureDetector（通用手势监听）
  如果不需要Material风格的水波纹效果，GestureDetector是更通用的选择，它支持双击、长按等多种手势监听：

  GestureDetector(
    onTap: () {
      // 点击逻辑
      print('Container被点击');
    },
    // 可额外添加onLongPress、onDoubleTap等手势回调
    child: Container(
      child: Column(
        children: [
          Text('All categories'),
          Text('All cities'),
        ],
      ),
    ),
  )
  

如果想让Container视觉上更贴近按钮样式，可以给它添加一些装饰属性，比如内边距、背景色、圆角：

InkWell(
  onTap: () {},
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    decoration: BoxDecoration(
      color: Colors.grey[200],
      borderRadius: BorderRadius.circular(8),
    ),
    child: Column(
      children: [
        Text('All categories'),
        Text('All cities'),
      ],
    ),
  ),
)

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