flutter 绘制边框和圆角 BoxDecoration

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 组件 用于绘制圆角
去玩吧

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值