Flutter 中容器的圆角边框 - Dart

在 Flutter 中，容器是一种非常常见的组件，往往用于包裹其他组件，加入颜色、边距等等。容器还可以添加圆角边框，下面我们就来介绍一下如何在 Flutter 中给容器添加圆角边框。

圆角边框的基本元素

先来看一下圆角边框的基本元素，实际上一个圆角边框包含以下几个元素：

• 边框线颜色
• 边框线粗细
• 边框线样式
• 圆角程度

在 Flutter 中，我们可以通过调用 BoxDecoration 的 borderRadius 属性来控制容器的圆角程度。例如，如果我们要让一个容器的四个角都是圆形的，可以这样写：

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.0), // 设置圆角程度
    border: Border.all(color: Colors.red, width: 1.0), // 设置边框
  ),
  child: ... // 容器内部的组件
)

上面的代码中，我们首先通过 BoxDecoration 的 borderRadius 属性设置了圆角程度为 10.0，之后又通过 Border 的 all 属性设置了边框颜色为红色，线宽为 1.0。

圆角边框的高级用法

除了基本元素以外，我们还可以通过 BoxDecoration 的 borderRadius 属性和 BorderSide 的 style、width、color 属性来进行更高级的控制。下面列举一些示例：

圆角不对称

我们可以在设置 borderRadius 属性时分别指定四个角的大小，从而使得四个角不对称：

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20.0),
      topRight: Radius.circular(10.0),
      bottomLeft: Radius.circular(30.0),
      bottomRight: Radius.circular(5.0),
    ),
    border: Border.all(color: Colors.red, width: 1.0),
  ),
  child: ... // 容器内部的组件
)

在上面的代码中，我们通过 BorderRadius.only 指定了四个角的大小，从而使得它们不对称。

双重边框

我们可以在 Border 中连续添加多个边框，从而实现双重边框的效果：

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.0),
    border: Border(
      top: BorderSide(width: 2.0, color: Colors.red),
      left: BorderSide(width: 2.0, color: Colors.blue),
      right: BorderSide(width: 2.0, color: Colors.yellow),
      bottom: BorderSide(width: 2.0, color: Colors.green),
    )
  ),
  child: ... // 容器内部的组件
)

在上面的代码中，我们首先通过 BorderRadius.circular 指定了圆角程度，随后在 Border 中连续添加了四个边框，从而形成了双重边框的效果。

总结

通过本文的介绍，我们了解了如何在 Flutter 中给容器添加圆角边框，以及如何进行更高级的控制。如果你对 Flutter 还不熟悉，建议先查阅一些 Flutter 入门资料，再来学习本文的内容。