Flutter BorderRadius 组件的使用详解

24 min read

Flutter 中的 BorderRadius 组件用于设置 Widget（Text, Container等）的边框的圆角属性。在 Flutter 中，所有的边框都可以通过 BorderRadius 来实现圆角效果，不需要单独设置圆角属性。

Flutter 提供了一些便捷的方法来创建 BorderRadius 对象，并使用 BorderRadius 对象来实现圆角边框效果。

常用属性

BorderRadius 有以下常用的属性：

  1. BorderRadius.all()：设置所有边的圆角半径。
  2. BorderRadius.circular()：设置所有边的圆角半径，圆角半径大小为半径大小的一半。
  3. BorderRadius.horizontal()：仅设置水平方向的圆角半径。
  4. BorderRadius.vertical()：仅设置垂直方向的圆角半径。
  5. BorderRadius.only()：设置特定方向的圆角半径，可以设置单独的圆角半径。

使用方法

在 Widget（如 Container）的 decoration 属性中使用 BorderRadius 对象实现圆角效果。

Container(
  decoration: BoxDecoration(
    color: Colors.grey,
    borderRadius: BorderRadius.circular(10.0),
  ),
  child: Text('Flutter'),
);

上面的示例代码设置了一个具有圆角效果的 Container，其圆角半径为 10.0。

也可以使用 BorderRadius.all() 属性来设置所有的边的圆角半径：

Container(
  decoration: BoxDecoration(
    color: Colors.grey,
    borderRadius: BorderRadius.all(Radius.circular(10.0)),
  ),
  child: Text('Flutter'),
);

设置特定方向的圆角半径：

Container(
  decoration: BoxDecoration(
    color: Colors.grey,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(10.0),
      bottomRight: Radius.circular(10.0),
    ),
  ),
  child: Text('Flutter'),
);

使用 horizontal() 或 vertical() 属性设置水平或垂直方向的圆角半径：

Container(
  decoration: BoxDecoration(
    color: Colors.grey,
    borderRadius: BorderRadius.horizontal(
      left: Radius.circular(10.0),
      right: Radius.circular(10.0),
    ),
  ),
  child: Text('Flutter'),
);

Container(
  decoration: BoxDecoration(
    color: Colors.grey,
    borderRadius: BorderRadius.vertical(
      top: Radius.circular(10.0),
      bottom: Radius.circular(10.0),
    ),
  ),
  child: Text('Flutter'),
);