Flutter使用Ink.image实现GridView图片点击水波纹效果求助

问题原因 #

你的代码无法触发完整点击水波纹是三个原因导致的：

1. 点击后立即触发路由跳转，水波纹动画还未开始渲染就被页面切换打断，仅能捕捉到按压状态的短暂效果
2. Material组件默认带白色底色，会遮挡水波纹效果
3. 未明确配置水波纹的显式颜色，容易和图片背景融合不可见

修改方案 #

直接替换你的itemBuilder部分代码即可，核心修改点：

• 给Material设置透明类型，避免底色遮挡水波纹
• 给InkWell配置显式的半透波纹颜色
• 给onTap增加150毫秒的延迟，保证水波纹触发后再执行跳转
• 新增mounted判断避免跳转时页面销毁导致的异常

修改后的完整代码：

Expanded(
  child: GridView.builder(
    gridDelegate:
        const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
    controller: _scrollController,
    padding: const EdgeInsets.all(8.0),
    itemCount: _agentsList.length,
    shrinkWrap: true,
    physics: const ClampingScrollPhysics(),
    itemBuilder: (BuildContext context, int index) {
      return Stack(
        children: [
          Container(
            margin: const EdgeInsets.all(margin),
            child: ClipRRect(
              borderRadius: const BorderRadius.all(Radius.circular(19.0)),
              child: Material(
                type: MaterialType.transparency, // 新增：设置Material透明
                clipBehavior: Clip.hardEdge,
                child: Ink.image(
                  image: CachedNetworkImageProvider(
                    _agentsList[index].agentPhoto,
                  ),
                  fit: BoxFit.cover,
                  child: InkWell(
                    splashFactory: InkSplash.splashFactory,
                    // 新增：配置显式半透波纹颜色，可自行调整色值和透明度
                    splashColor: Colors.white.withOpacity(0.3),
                    highlightColor: Colors.white.withOpacity(0.1),
                    onTap: () async {
                      // 新增：延迟150ms跳转，等待水波纹触发
                      await Future.delayed(const Duration(milliseconds: 150));
                      widget.viewType =
                          Agent.current != null ? "hello" : "";
                      if(context.mounted) { // 新增mounted判断避免内存泄漏
                        Navigator.of(context).pushNamed('/ProfileView',
                            arguments: {"agent": _agentsList[index]});
                      }
                    },
                  ),
                ),
              ),
            ),
          ),
        ],
      );
    }))

额外说明 #

如果不需要保留按压高亮效果，可以把highlightColor设置为Colors.transparent即可，波纹的颜色、透明度、延迟时间都可以根据你的设计需求自行调整。

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