flutter - 卡borderOnForeground 未按预期工作

Question

代码：

Card(
  color: Colors.blue,
  borderOnForeground: false, // doesn't do anything on true also
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(300)),
  child: Container(
    width: 200,
    height: 200,
    color: Color(0x30FF0C5C),
    child: Text(
      "|||||||",
      style: TextStyle(fontSize: 40),
    ),
  ),
)

文档说：

borderOnForeground：是否在[child]前面绘制[shape]边框。默认值是true。如果为 false，则边框将绘制在 [child] 的后面。

输出：

问题：

我希望白色垂直线在默认情况下（何时borderOnForeground: true）位于蓝色圆圈内，但它不会这样做，也不会将其设置为false. 那么borderOnForeground实际上是做什么的呢？

笔记：

我知道有很多方法可以实现我所要求的使用ClipRRect等ClipOval。我不是在寻找那些解决方案，我只是想知道是什么borderOnForeground？

标签： flutterdart

Answer 1

问题是你没有边框（就像在 CSS 中一样），这就是为什么true看起来false一样。要查看差异，请添加粗边框：

shape: RoundedRectangleBorder(
  borderRadius: BorderRadius.all(
    Radius.circular(300.0),
  ),
  side: BorderSide(
    color: Colors.red,
    width: 20.0,
  ),
),

如果您将borderOnForeground: false卡片的孩子的部分设置在红色边框下方，现在将在它上方。