Flutter中Stack组件顶层InkWell不显示问题求助

问题出在Ink组件的绘制特性上：Ink的内容是绘制在**Material组件的墨水层（ink layer）**里的，这个层默认处于组件树底层。你的Stack里没有Material组件，蓝色Container是不透明的，直接挡住了墨水层里的Ink内容，所以看起来InkWell在Container下方。而换成普通Container组件时，它作为普通Widget绘制在Stack上层，因此能正常显示。

方案1：替换Ink为Container（最简方案） #

直接把Ink换成Container，组件会按Stack堆叠顺序显示在蓝色背景之上，同时保留InkWell的点击和水波纹效果：

Stack(
  children: [
    Container(height: 280, color: Colors.blue),
    Row(
      children: [
        InkWell(
          onTap: () {
            Navigator.of(context).pushReplacement(
                MaterialPageRoute(builder: (context) => Mainpage()));
          }, 
          splashColor: Colors.brown.withOpacity(0.5),
          child: Container(
            height: 48,
            width: 48,
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/dagger.png'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ],
    ),
  ],
)

方案2：用Material替代蓝色Container #

将蓝色Container换成Material组件，让它提供墨水层，Ink的内容会绘制在这个Material的墨水层之上：

Stack(
  children: [
    Material(
      color: Colors.blue,
      child: const SizedBox(height: 280),
    ),
    Row(
      children: [
        InkWell(
          onTap: () {
            Navigator.of(context).pushReplacement(
                MaterialPageRoute(builder: (context) => Mainpage()));
          }, 
          splashColor: Colors.brown.withOpacity(0.5),
          child: Ink(
            height: 48,
            width: 48,
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/dagger.png'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ],
    ),
  ],
)

方案3：给Row包裹透明Material #

在Row外层加一个透明Material组件，专门提供墨水层，Ink内容会显示在这个透明层之上，不会被蓝色Container遮挡：

Stack(
  children: [
    Container(height: 280, color: Colors.blue),
    Material(
      color: Colors.transparent,
      child: Row(
        children: [
          InkWell(
            onTap: () {
              Navigator.of(context).pushReplacement(
                  MaterialPageRoute(builder: (context) => Mainpage()));
            }, 
            splashColor: Colors.brown.withOpacity(0.5),
            child: Ink(
              height: 48,
              width: 48,
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/dagger.png'),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  ],
)

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