Flutter BorderRadius.only 示例

在Flutter中，BorderRadius是用于给一个widget的角落添加圆角效果的类。通常，我们使用BorderRadius.circular（radius）来添加12个角的圆角效果。但有时我们只需要添加部分角的圆角效果，那么就需要使用BorderRadius.only。

BorderRadius.only的语法

BorderRadius.only({
  topLeft: Radius.zero,
  topRight: Radius.zero,
  bottomLeft: Radius.zero,
  bottomRight: Radius.zero,
})

• topLeft - 左上角的圆角半径
• topRight - 右上角的圆角半径
• bottomLeft - 左下角的圆角半径
• bottomRight - 右下角的圆角半径

示例

假设我们有一个Container，它的颜色是红色，高度和宽度都为200px，并且它的所有角都有一个20px的圆角。现在我们需要将其左下角和右下角的圆角半径更改为50px，来达到一种城市夜景的展示效果。

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(50),
      bottomRight: Radius.circular(50),
    ),
  ),
);

效果图如下：

总结

在Flutter中，我们可以通过BorderRadius.only来单独设置一个widget的圆角效果。这在实际情况中非常常见，例如展示城市夜景，导航栏外形设计等等。掌握BorderRadius.only的使用可以让我们轻松实现各种形状的widget。