flutter3.0学习笔记

RoundedRectangleBorder详解

Preview
  • RoundedRectangleBorder

RoundedRectangleBorder

RoundedRectangleBorder 用于创建带圆角的矩形边框。它通常与 ShapeDecoration 一起使用来绘制一个圆角的盒子。其构造

const RoundedRectangleBorder({
    super.side,
    this.borderRadius = BorderRadius.zero,
}) 

例子:

Container(
  width: 150,
  height: 75,
  decoration:   ShapeDecoration(
      color: Colors.white,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
          side: const BorderSide(
            width: 5,
            color: Colors.blue,
          )
      )
  ),

),

image.png 使用加法运算符 (+) 添加 2 个 ShapeBorder 以创建关联边框:

Container(
  width: 150,
  height: 75,
  decoration:   ShapeDecoration(
      color: Colors.white,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
          side: const BorderSide(
            width: 5,
            color: Colors.blue,
          )
      )+RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
          side: const BorderSide(
            width: 2,
            color: Colors.red,
          )
      )
  ),

),

image.png

大致跟ContinuousRectangleBorder一样。