ContinuousRectangleBorder详解

ContinuousRectangleBorder

ContinuousRectangleBorder在直边和圆角之间创建一个具有平滑连续过渡的矩形边框。其构造：

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

例子：

Container(
    width: 150,
    height: 50,
    decoration:  ShapeDecoration(
        color: Colors.white,
        shape:ContinuousRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
          side: const BorderSide(
            width: 5.0,
            color: Colors.green
          )
        )
    ),
),

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

 Container(
    width: 150,
    height: 50,
    decoration:  ShapeDecoration(
        color: Colors.white,
        shape:ContinuousRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
          side: const BorderSide(
            width: 5.0,
            color: Colors.green
          )
        )+ContinuousRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
            side: const BorderSide(
                width: 10.0,
                color: Colors.red
            )
        )
    ),
),

borderRadius属性: borderRadius - 提供矩形的 4 个角半径值。 例子：

Container(
    width: 150,
    height: 75,
    decoration:  const ShapeDecoration(
        color: Colors.white,
        shape: ContinuousRectangleBorder(
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.zero,
            topLeft: Radius.zero,
            bottomRight: Radius.zero,
            topRight: Radius.circular(45.0)
          ),
          side: BorderSide(
            width: 5,
            color: Colors.blue,
          )
        )
    ),

),