Flutter – BorderRadius 小工具

简介

Flutter 中的 BorderRadius 是一个非常有用的小工具，用于定义边界的圆角效果。通过 BorderRadius，开发人员可以轻松地将矩形控件的边界修饰为任意形状的圆角边界，从而为 UI 设计提供更多样化的选择。

使用方法

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
  ),
)

在上述代码中，我们使用一个 Container 控件来展示如何使用 BorderRadius。通过设置 borderRadius 属性，我们将边界的圆角半径设置为 10，这样我们就得到了一个具有圆角效果的蓝色正方形。你可以根据需要自由设置圆角半径的值。

自定义圆角

除了通过 BorderRadius.circular 方法来设置圆角半径外，Flutter 还提供了其他自定义圆角的方法。

水平方向不同的圆角半径

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.green,
    borderRadius: BorderRadius.horizontal(
      left: Radius.circular(20),
      right: Radius.elliptical(30, 50),
    ),
  ),
)

在上述代码中，我们使用了 BorderRadius.horizontal 方法来设置水平方向上的不同圆角半径。对于左边角，我们使用 Radius.circular 方法设置圆角半径为 20，对于右边角，我们使用 Radius.elliptical 方法设置圆角半径为 30 和 50（椭圆形圆角）。

垂直方向不同的圆角半径

Container(
  width: 100,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.orange,
    borderRadius: BorderRadius.vertical(
      top: Radius.circular(40),
      bottom: Radius.elliptical(50, 30),
    ),
  ),
)

在上述代码中，我们使用了 BorderRadius.vertical 方法来设置垂直方向上的不同圆角半径。对于顶部角，我们使用 Radius.circular 方法设置圆角半径为 40，对于底部角，我们使用 Radius.elliptical 方法设置圆角半径为 50 和 30（椭圆形圆角）。

结论

通过使用 Flutter 的 BorderRadius 小工具，我们可以轻松地为矩形控件添加圆角效果，从而为应用程序的用户界面带来更多样化的外观。无论是创建圆形头像还是添加独特形状的按钮，BorderRadius 都是你的好帮手。

希望本文能帮助你更好地理解和使用 Flutter 的 BorderRadius。祝你编写出漂亮且富有创意的应用程序！