颤振边界半径方面

时间:2021-07-25 00:24:29

标签: flutter border-radius flutter-design

有人知道如何做软边框半径,就像这样:

enter image description here

Flutter 是否可以实现,我不知道怎么做。

2 个答案:

答案 0 :(得分:0)

您可以使用 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),
)

答案 1 :(得分:0)

您可以通过在 borderRadius 中使用 decorationContainer 属性来实现这一点。

例如:

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)),
      ),
    ),
  ],
),

会产生这个结果

Example using decoration

另一方面,如果你想让边框有不同的颜色,你可以试试这个,在 {{1} 属性的 border 属性中设置颜色}:

decoration

结果是

Example using a border Color