/** 装饰器,可以用来修饰其他的组件,和Android里面的shape很相似
const BoxDecoration({
this.color,//背景色
this.image,//图片
this.border,//描边
this.borderRadius,//圆角大小
this.boxShadow,//阴影
this.gradient,//过度效果
this.backgroundBlendMode,
this.shape = BoxShape.rectangle,//形状,BoxShape.circle和borderRadius不能同时使用
})
*/
body: ListView(
children: <Widget>[
Container(
width: 100.0,
height: 100.0,
margin: EdgeInsets.all(20.0),
decoration: new BoxDecoration(
color: Color(0x6600ff00),
border: Border.all(
color: Color(0xff0000ff)
),
borderRadius: BorderRadius.circular(10.0),
),
),
Container(
width: 100.0,
height: 100.0,
margin: EdgeInsets.all(20.0),
decoration: new BoxDecoration(
image: DecorationImage(image: NetworkImage(
"http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg")),
),
),
Container(
width: 100.0,
height: 100.0,
margin: EdgeInsets.all(20.0),
decoration: new BoxDecoration(
color: Color(0xffffffff),
boxShadow: [
BoxShadow(
color: Color(0xffff0000),
offset: Offset(2.0, 3.0),
blurRadius: 6.0 /*,spreadRadius:2.0*/)
],
gradient: LinearGradient(
colors: [
Color(0xff00ff00),
Color(0xffffffff),
Color(0xff00ff00)
]
)
),
),
Align(
alignment: Alignment.center,
child: Container(
width: 100.0,
height: 100.0,
margin: EdgeInsets.all(20.0),
decoration: new BoxDecoration(
color: Color(0xffffffff),
border: Border.all(
color: Color(0xff0000ff)
),
// borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: NetworkImage(
"http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
fit: BoxFit.fill
),
shape: BoxShape.circle,
),
),
)
],
)
网友评论