Question

在开发类似于通知程序UI的聊天气泡时，我在圆形上遇到了不必要的轮廓问题。

 Stack(
   overflow: Overflow.visible,
   children: <Widget>[
         Positioned(
             child: Image.asset(
                      "assets/v2/small/messenger-icon.png",
                      width: 28,
                      fit: BoxFit.cover,
         )),
         Positioned(
             top: -2,
             right: -2,
             child: Container(
                       width: 12,
                       height: 12,
                       decoration: BoxDecoration(
                              color: MyColors.accentColor,
                              borderRadius: BorderRadius.circular(8),
                              border: Border.all(
                                  color: Colors.white,
                                  width: 1,
                                  style: BorderStyle.solid)),
                        ),
              )
   ],
)

一切正常，但是白色轮廓上有多余的MyColors.accentColor圆形线。

Answer 1

这是因为边框本身是容器装饰上方的覆盖物。
可能的解决方法是使用2个容器。
上面的一个带有边框，下面的一个带有边框。

Positioned(
                top: -2,
                right: -2,
                child: Container(
                  width: 12,
                  height: 12,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(
                      color: Colors.white,
                      width: 1,
                      style: BorderStyle.solid,
                    ),
                  ),
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.purpleAccent,
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
              ),

Answer 2

两个大小相差1像素的容器是解决方案

Stack(
    overflow: Overflow.visible,
    children: <Widget>[
      Positioned(
          child: Image.asset(
        "assets/mes1.png",
        width: 280,
        fit: BoxFit.cover,
      )),
      Positioned(
        top: -2,
        right: -2,
        child: Container(
          width: 121,
          height: 121,
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(121),
              border: Border.all(
                  color: Colors.white, width: 1, style: BorderStyle.solid)),
          child: Container(
            width: 120,
            height: 120,
            decoration: BoxDecoration(
                color: Colors.deepOrange,
                borderRadius: BorderRadius.circular(120),
                border: Border.all(
                    color: Colors.deepOrange,
                    width: 1,
                    style: BorderStyle.solid)),
          ),
        ),
      )
    ],
  )

颤振：圆形边框显示多余的轮廓

2 个答案: