Flutter：容器颜色溢出边框

Question

我需要制作一个带有圆角边框、颜色和轮廓的容器，但是背景颜色溢出了轮廓颜色。如何解决这个问题？

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 21,
        constraints: BoxConstraints(
          minWidth: 21,
        ),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.white, width: 2),
          borderRadius: BorderRadius.circular(21),
          color: Colors.pink,
        ),
        child: Align(
            child: Text(
          "1",
          style: TextStyle(
              color: Colors.white, fontWeight: FontWeight.bold, fontSize: 12),
        )));
  }
}

结果：（最明显的在左边）

- user3808307

---

问题不在这个小部件上。你能发布一些其他的代码吗？ - tsg

@tsg 这就是全部的代码。我是在Dartpad上完成的（截图来自Dartpad，没有其他代码）。 - user3808307

看起来由于抗锯齿处理，边框透明像素处可以看到背景。 - spkersten

@spkersten 有什么解决方法吗？尝试了不同的剪辑行为，但问题仍然存在。 - user3808307

我现在正在将两个圆放在一个堆栈中，但如果有更优雅的方法，我想知道。 - user3808307

Answer 1

它……看起来像是一个错误？我认为你可以向Flutter的GitHub报告这个问题。

如果您只是想要一个解决方法，您可以尝试将背景颜色（粉色）移动到小部件的较低层。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 21,
      constraints: BoxConstraints(
        minWidth: 21,
      ),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.white, width: 2),
        borderRadius: BorderRadius.circular(21),
      ),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(21),
          color: Colors.pink,
        ),
        child: Align(
          child: Text(
            "1",
            style: TextStyle(
              color: Colors.white, fontWeight: FontWeight.bold, fontSize: 12,
            ),
          ),
        ),
      ),
    );
  }
}

- yellowgray