Flutter中InkWell水波纹无法覆盖Text组件如何实现全区域覆盖

问题原因 #

Ink系列组件的水波纹默认绘制在其直接子节点的下层，普通Widget（比如未作为Ink decoration属性加载的Text）会绘制在水波纹之上，导致水波纹被遮盖。你之前用Ink的decoration加载的图片是绘制在水波纹下层，所以可以被水波纹覆盖。

解决方案 #

将InkWell下的整个内容区域包裹在带背景色的Ink组件内，替代原来的Container即可，这样所有子内容都会被绘制在水波纹的下层，水波纹就可以正常覆盖文本了。

修改后的完整代码如下：

@override
Widget build(BuildContext context) {
  final theme = Theme.of(context);
  final post = _postModel.post;

  return Material(
    color: theme.colorScheme.background,
    child: InkWell(
      onTap: () {},
      splashColor: Colors.red,
      // 替换原Container为Ink，设置对应属性
      child: Ink(
        color: theme.colorScheme.background,
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            if (post.imageUri != null)
              AspectRatio(
                aspectRatio: 5 / 3,
                child: Ink(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(3),
                    image: DecorationImage(
                      image: NetworkImage('https://picsum.photos/700'),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
            Text(post.title, style: theme.textTheme.headline5),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 5),
              color: Colors.transparent,
              height: 60,
              child: Row(
                children: <Widget>[
                  Ink(
                    height: 35,
                    width: 35,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(3),
                      image: DecorationImage(
                        fit: BoxFit.cover,
                        image: NetworkImage('https://picsum.photos/100'),
                      ),
                    ),
                  ),
                  const SizedBox(width: 5),
                  Text(
                    post.author,
                    style: theme.textTheme.caption,
                  ),
                  const Spacer(),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

你也可以根据需求调整InkWell的splashColor、highlightColor参数，自定义水波纹的颜色和透明度效果。

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