Flutter中Container组件点击波纹效果失效问题求助

你用GestureDetector只能处理点击事件，它本身不会提供Material风格的波纹交互效果。要实现波纹，得换成InkWell组件，同时注意容器背景会遮挡波纹的问题，调整结构就能解决。

修改后的代码示例（两种写法） #

方法一：用Material包裹

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 25.0),
  child: Material(
    borderRadius: BorderRadius.circular(12),
    color: Colors.deepPurple,
    child: InkWell(
      borderRadius: BorderRadius.circular(12),
      onTap: signIn,
      child: Container(
        padding: EdgeInsets.all(20),
        child: Center(
          child: Text(
            'Sign In',
            style: TextStyle(
              color: Colors.white,
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    ),
  ),
)

方法二：用Ink替代Material

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 25.0),
  child: Ink(
    decoration: BoxDecoration(
      color: Colors.deepPurple,
      borderRadius: BorderRadius.circular(12),
    ),
    child: InkWell(
      borderRadius: BorderRadius.circular(12),
      onTap: signIn,
      child: Container(
        padding: EdgeInsets.all(20),
        child: Center(
          child: Text(
            'Sign In',
            style: TextStyle(
              color: Colors.white,
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    ),
  ),
)

关键注意点 #

• InkWell必须放在Material或Ink组件内部，波纹效果是Material组件树提供的
• 给InkWell设置和外层容器一致的borderRadius，波纹才会贴合圆角，不会出现直角溢出
• 不要在Container上设置背景色，把背景色移到Material或Ink上，这样波纹才能显示在背景之上

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