颤振边界半径方面

Posted 2023-03-28

【中文标题】颤振边界半径方面

【英文标题】：Flutter border radius aspect

【发布时间】：2021-10-01 11:58:05

【问题描述】：

有人知道如何做软边界半径，比如：

Flutter 有没有可能，我不知道怎么做。

【参考方案1】：

您可以通过在Container 中使用decoration 的borderRadius 属性来实现此目的。

例如：

Column(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
     Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.all(Radius.elliptical(20, 10)),
      ),
    ),
    Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.all(Radius.circular(20)),
      ),
    ),
  ],
),

会产生这个结果

另一方面，如果你想为边框设置不同的颜色，你可以试试这个，在decoration属性的border属性中设置颜色Container：

Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Container(
          height: 200,
          width: 200,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(20)),
            border: Border.all(
              color: Colors.red,
            ),
          ),
          child: Center(
            child: Text('Content...'),
          ),
        ),
      ],
    ),
),

结果是

【讨论】：

谢谢，但找到了我想要的自定义 ClipPath :)

【参考方案2】：

您可以使用 ClipRect。

ClipRRect(
    // Change border radius and type(.zero, .roundrect, or absolute values) to get your desired effect
    borderRadius: BorderRadius.circular(8.0),
    child: Container(color: Colors.grey),
)

【讨论】：

效果不一样。与屏幕截图相比，半径太圆了。

使用 BorderRadius.circular、roundrect 或零，或者您可以指定值。

谢谢，但找到了我想要的自定义 ClipPath :)