Flutter 小部件堆栈未显示顶层

发布于04月03日

我像往常一样制作了Stack小部件，但墨水井小部件没有出现在蓝色Container的顶部.在这个实验中，我将其他小部件放在合适的位置，一切都正常.我做错什么了？以下是代码的一部分:

          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: Ink(
                    height: 48,
                    width: 48,
                    decoration: const BoxDecoration(
                      image: DecorationImage(
                        image:
                        AssetImage('assets/dagger.png'),
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ),
              ],
            ),

这里我将容器设置为透明的，您可以看到墨水井在那里，位于容器的下面:

Screenshot

推荐答案

您可以将InkWell包装到Positioned，并使用Stack设置位置，然后将InkWell包装为Material小部件.这是为了确保InkWell具有可以处理TAP事件的父级:

Stack(
  children: [
    Container(height: 280, color: Colors.blue,),
    Positioned(
      top: 0,
      left: 0,
      child: Material(
        color: Colors.transparent,
        child: 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,
              ),
            ),
          ),
        ),
      ),
    ),
  ],
),

快乐的编码...