如何避免堆叠的小部件被扩展的小部件剪裁？

Question

当 Stack 小部件位于 Column 内且靠近 Expanded 小部件时，Stack 小部件溢出的项目会被 Expanded 小部件剪裁（见下文）。如何解决这个问题？为什么前导小部件的 Z-index 值不高于下一个小部件？

代码：

ADD Configuration...

Answer 1

您需要稍微重新排列小部件，将 Stack 放在列之外：

    return Scaffold(
        body: Stack(children:[
Column(
      children: [
            Container(
              height: 120,
              decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(color: Colors.black87.withOpacity(0.5), spreadRadius: 1, blurRadius: 4)
                ],
                color: Colors.black87,
              ),
            ),
        Expanded(
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(bgUrl),
                fit: BoxFit.cover
              )
            ),
          ),
        )
      ],
    ),
            Positioned(
              top: 60,
              left: 0,
              right: 0,
              child: Center(
                child: Container(
                  height: 120,
                  width: 120,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(60.0),
                    boxShadow: [
                      BoxShadow(
                          color: Colors.black87.withOpacity(0.3),
                          spreadRadius: 1,
                          blurRadius: 4,
                          offset: Offset(0, 1))
                    ],
                    image: DecorationImage(
                      image: NetworkImage(imageUrl),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
            ),
],),
        );
  }