Flutter – BorderRadius小部件

在Flutter中，可以使用BorderRadius小部件来为容器或部件添加圆角。BorderRadius提供了多种方式来设置圆角，以适应各种应用场景。

基本用法

创建一个带有圆角的容器，可以使用Container组件和BorderRadius小部件。例如，要创建一个具有8个像素圆角的红色容器，可以使用以下代码：

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.circular(8),
  ),
);

这将创建一个100 x 100像素的红色正方形容器，并将其四个角转换为8像素半径的圆角。

圆形容器

要创建圆形容器，可以使用BorderRadius.circular构造函数和相等的宽和高。例如，以下代码会创建一个100像素直径的圆形容器：

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.circular(50),
  ),
);

自定义圆角

BorderRadius还提供了其他构造函数，可以根据需要自定义圆角。以下是一些示例：

圆形顶部

BorderRadius.only(
  topLeft: Radius.circular(50),
  topRight: Radius.circular(50),
)

四个不同的圆角半径

BorderRadius.only(
  topLeft: Radius.circular(15),
  topRight: Radius.circular(30),
  bottomLeft: Radius.circular(45),
  bottomRight: Radius.circular(60),
)

给一个角添加圆角

BorderRadius.only(
  topLeft: Radius.circular(30),
)

总结

BorderRadius小部件是Flutter中非常强大和灵活的部件。使用它，可以轻松地为容器和部件添加圆角和其他自定义形状，以适应任何应用程序需求。

若要了解更多细节，请参阅Flutter圆角（BorderRadius）详解。