浮動圖片在其容器外顫動

浮動影像

Container(
        clipBehavior: Clip.none,
        child: Stack(
          fit: StackFit.passthrough,
          children: <Widget>[
            //Stack helps to overlap widgets
            Positioned(

              top: 80,
              left: 50, //position of the widget
              child: Container(
                clipBehavior: Clip.none,
                // height: 250,
                // width: 250,
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.orange
                        .withOpacity(0.5) //background color with opacity
                    ),
                child: Image.asset("assests/FT300.png"),
              ),
            ),

            Positioned(
              left: -80,
              top: -50,
              child: Container(
                height: 180,
                width: 220,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.redAccent.withOpacity(0.5),
                ),
              ),
            ),

            Positioned(
              //main content container postition.
              child: Container(
                height: 250,
                alignment: Alignment.center,
                child: Text(
                  "Stacked Containers Together",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            )
          ],
        ),`

我想讓圖片漂浮在它的容器外，如圖我試圖使用堆疊小部件

Clipbehaviour.none

但圖片仍然出現在容器內。

有沒有人遇到過這個或有解決方案？

謝謝

uj5u.com熱心網友回復：

如果您需要小部件成為 Stack 外部的一部分，您需要：

Stack(
  overflow: Overflow.visible,
  children:

uj5u.com熱心網友回復：

由于不推薦使用溢位，因此給定代碼段的第一個解決方案是

Stack(
        clipBehavior: Clip.none,
        children:

完整片段更新：

Container(
      clipBehavior: Clip.none,
      color: AppRepoColors().appRedColor(),
      child: Stack(
        clipBehavior: Clip.none,
        children: <Widget>[
          //Stack helps to overlap widgets
          Positioned(

            top: 0,
            left: 50, //position of the widget
            child: Container(
              clipBehavior: Clip.none,
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.orange
                      .withOpacity(0.5) //background color with opacity
              ),
              child: Image.asset("assests/FT300.png"),
            ),
          ),

          Positioned(
            left: -80,
            top: -50,
            child: Container(
              height: 180,
              width: 220,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.redAccent.withOpacity(0.5),
              ),
            ),
          ),

          Positioned(
            //main content container postition.
            child: Container(
              height: 250,
              alignment: Alignment.center,
              child: Text(
                "Stacked Containers Together",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
                textAlign: TextAlign.center,
              ),
            ),
          )
        ],
      ),
    ),

標籤：扑 镖

上一篇：具有回呼函式的ChipsChoice-顫振

下一篇：Flutter未找到任何材質小部件