1. CircleBorder
CircleBorder 用于在可用空间内创建尽可能大的圆形边框,CircleBorder 通常与 ShapeDecoration 一起使用来绘制圆形。
Flutter的其他边框示例:
如果可用空间是一个矩形,CircleBorder 会在矩形的中心画一个尽可能大的圆。
CircleBorder构造函数
const CircleBorder(
{BorderSide side: BorderSide.none}
)
示例
示例1:
Container(
width: 150,
height: 300,
child: Center(
child: Text(
"GO",
style: TextStyle(fontSize: 50)
)
),
decoration: ShapeDecoration(
color: Colors.white,
shape: CircleBorder (
side: BorderSide(
width: 10,
color: Colors.blue
)
)
)
)
运行上面示例代码,得到以下结果:
示例2:
使用加法运算符 (+) 添加 2 个 ShapeBorder 以创建关联边框。
Container(
width: 150,
height: 300,
child: Center(
child: Text(
"GO",
style: TextStyle(fontSize: 50)
)
),
decoration: ShapeDecoration(
color: Colors.white,
shape: CircleBorder (
side: BorderSide(
width: 10,
color: Colors.blue
)
) + CircleBorder (
side: BorderSide(
width: 20,
color: Colors.green
)
)
)
)
运行上面示例代码,得到以下结果:
示例3:
例如,创建一个简单的头像:
Container(
width: 200,
height: 200,
child: Center(
child: Image.network("https://www.yiibai.com/images/boy-128.png")
),
decoration: ShapeDecoration(
color: Colors.white,
shape: CircleBorder (
side: BorderSide(
width: 10,
color: Colors.blue
)
)
)
)
side属性
side属性 - 提供与边框相关的参数,例如:color, width, style。
BorderSide side: BorderSide.none
BorderSide构造函数
const BorderSide (
{Color color: const Color(0xFF000000),
double width: 1.0,
BorderStyle style: BorderStyle.solid}
)