|
flutter BoxDecoration源码常用属性如下
const BoxDecoration({
this.color, // 底色
this.image, // 背景图
this.border, // 边框颜色
this.borderRadius, // 圆角大小
this.boxShadow, // 阴影
this.gradient, // 渐变
this.shape = BoxShape.rectangle, // 形状
})
请看效果：
请看代码：
Container(
margin: EdgeInsets.only(left: 15,top: 15),
padding: EdgeInsets.only(left: 12, right: 12, top: 5, bottom: 5),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 1),//边框
borderRadius: BorderRadius.all(//圆角
Radius.circular(20.0),
),
),
child: Text(
‘全边框全圆角’,
style: TextStyle(
color: Colors.red,
),
),
),
Container(
margin: EdgeInsets.only(left: 15,top: 15),
padding: EdgeInsets.only(left: 12, right: 12, top: 5, bottom: 5),
decoration: BoxDecoration(
border: Border(left: BorderSide(color: Colors.green,width: 10),right:BorderSide(color: Colors.green,width: 10),top:BorderSide(color: Colors.red,width: 1),bottom: BorderSide(color: Colors.red,width: 1) ),
),
child: Text(
‘左右绿10，上下红1’,
style: TextStyle(
color: Colors.red,
),
),
),
Container(
margin: EdgeInsets.only(left: 15,top: 15),
padding: EdgeInsets.only(left: 12, right: 12, top: 5, bottom: 5),
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(topLeft: Radius.circular(10),topRight: Radius.circular(10)),
),
child: Text(
‘左上右上圆角10’,
style: TextStyle(
color: Colors.red,
),
),
),
另外。flutter 单独有ClipRRect 组件 用于绘制圆角
去玩吧 |
转播
