当前位置:   article > 正文

flutter 绘制边框和圆角 BoxDecoration_flutter boxdecoration

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/341764
推荐阅读
相关标签
  

闽ICP备14008679号