如何解决颤振堆栈小部件问题

Question

 SizedBox(
                width: ScreenUtil().setWidth(197),
                height: ScreenUtil().setHeight(117),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(ScreenUtil().radius(30)),
                  child: Stack(
                    clipBehavior: Clip.none,
                    fit: StackFit.expand,
                    children: [
                      Image.asset(
                        "assets/images/image2.png",
                        fit: BoxFit.cover,
                      ),
                      Positioned(
                        right: -15,
                        top: -15,
                        child: Container(
                          height: 50,
                          width: 50,
                          decoration: BoxDecoration(
                            color: Colors.orange,
                            borderRadius: BorderRadius.circular(15),
                          ),
                        ),
                      ),
                      Positioned(
                        bottom: 10,
                        left: 12,
                        child: Text("naber lan"),
                      )
                    ],
                  ),
                ),
              )

为什么它不越过边缘?颤振检验员看到外面，但仿真器一样的问题，我能做什么，我能做什么，我应该做什么。

Answer 1

您马上就到了，但是我认为您忽略了cliprect概念，当您在堆栈之外使用它是剪贴器小部件时，您只需将它放在堆栈中即可。

Center(
          child: SizedBox(
            width: 197,
            height: 117,
            child: Stack(
              clipBehavior: Clip.none,
              fit: StackFit.expand,
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(30),
                  child: Image.asset(
                    "assets/images/test.jpg",
                    fit: BoxFit.cover,
                  ),
                ),
                Positioned(
                  right: -15,
                  top: -15,
                  child: Container(
                    height: 50,
                    width: 50,
                    decoration: BoxDecoration(
                      color: Colors.orange,
                      borderRadius: BorderRadius.circular(15),
                    ),
                  ),
                ),
                Positioned(
                  bottom: 10,
                  left: 12,
                  child: Text("naber lan"),
                )
              ],
            ),
          ),
        )

产出：

​

​