flutter3.0学习笔记

CircleBorder详解

Preview
  • CircleBorder

CircleBorder

CircleBorder 用于在可用空间内创建尽可能大的圆形边框,CircleBorder 通常与 ShapeDecoration 一起使用来绘制圆形。 其构造:

//BorderSide.none
const CircleBorder({ super.side }) 

例子:

Container(
  width: 200,
  height: 100,
  decoration: const ShapeDecoration(
    color: Colors.white,
    shape: CircleBorder(
      side: BorderSide(
        width: 6.0,
        color: Colors.red,
      )
    )
  )
),

image.png

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

Container(
  width: 200,
  height: 100,
  decoration:  ShapeDecoration(
    color: Colors.white,
    shape: const CircleBorder(
      side: BorderSide(
        width: 6.0,
        color: Colors.red,
      )
    ) +  const CircleBorder(
        side: BorderSide(
          width: 10.0,
          color: Colors.green,
        )
    )
  )
),

image.png