Flutter的Container和Decoration
2019-07-26 本文已影响0人
王俏
Container的使用
@override
Widget build(BuildContext context) {
return Container(
color: Colors.grey[100] ,//背景颜色
child: Row(
children: <Widget>[
Container(
child: Icon(Icons.pool, size:32.0, color:Colors.white),
color: Color.fromRGBO(3, 53, 255, 1.0),
padding: EdgeInsets.only(left: 24.0,right: 8.0),//内边距
margin: EdgeInsets.all(8.0),//外边距
width: 90.0,//宽度
height: 90.0,//高度
),
],
),
);
}
Decoration的使用
Widget build(BuildContext context) {
return Container(
// color: Colors.grey[100] ,//背景颜色
decoration: BoxDecoration(
image: DecorationImage(//背景图片 ,不能与背景色同时使用
image: NetworkImage('https://resources.ninghao.org/images/say-hello-to-barry.jpg'),
alignment: Alignment.topCenter,
repeat: ImageRepeat.repeatY,//是否重复
fit: BoxFit.cover,//填充模式
colorFilter: ColorFilter.mode(//颜色滤镜
Colors.indigoAccent[400].withOpacity(0.5),
BlendMode.hardLight//混合模式
),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,//主轴对齐方式,显示居中
children: <Widget>[
Container(
child: Icon(Icons.pool, size:32.0, color:Colors.white),
padding: EdgeInsets.only(left: 24.0,right: 8.0),//内边距
margin: EdgeInsets.all(8.0),//外边距
width: 90.0,//宽度
height: 90.0,//高度
decoration: BoxDecoration(
color: Color.fromRGBO(3, 53, 255, 1.0),//这里添加背景设置的话,尚层Container不能设置color
border: Border.all(
color: Colors.indigoAccent[100],
width: 3.0,
style: BorderStyle.solid,
),
// border: Border(//边框 这里也可以用Border.all()设置四边款统一样式
// top: BorderSide(
// color: Colors.indigoAccent[100],
// width: 3.0,
// style: BorderStyle.solid,
// ),
// bottom: BorderSide(
// color: Colors.red[300],
// width: 3.0,
// style: BorderStyle.solid,
// ),
// left: BorderSide(
// color: Colors.indigoAccent[200],
// width: 3.0,
// style: BorderStyle.solid,
// ),
// right: BorderSide(
// color: Colors.indigoAccent[200],
// width: 3.0,
// style: BorderStyle.solid,
// ),
// ),
// borderRadius: BorderRadius.circular(16.0),//边框圆角 BorderRadius.only(topLeft:16)
boxShadow: [//阴影效果
BoxShadow(
offset: Offset(0, 16.0),//阴影在X轴和Y轴上的偏移
color: Color.fromRGBO(16, 20, 188, 10),//阴影颜色
blurRadius: 25.0 ,//阴影程度
spreadRadius: -9.0, //阴影扩散的程度 取值可以正数,也可以是负数
),
],
shape: BoxShape.circle,//装饰器的形状 如果设置成圆形,不能设置borderRadius
// gradient: RadialGradient( //径向渐变效果RadialGradient 线性渐变效果LinearGradient
// colors: [
// Color.fromRGBO(7, 102, 255, 1.0),
// Color.fromRGBO(3, 28, 128, 1.0),
// ]
gradient: LinearGradient( //径向渐变效果RadialGradient 线性渐变效果LinearGradient
colors: [
Color.fromRGBO(7, 102, 255, 1.0),
Color.fromRGBO(3, 28, 128, 1.0),
],
begin: Alignment.topCenter,
end : Alignment.bottomCenter,
),
),
),
],
),
);
}
背景图
Container(
// color: Colors.grey[100] ,//背景颜色
decoration: BoxDecoration(
image: DecorationImage(//背景图片 ,不能与背景色同时使用
image: NetworkImage('https://resources.ninghao.org/images/say-hello-to-barry.jpg'),
alignment: Alignment.topCenter,
repeat: ImageRepeat.repeatY,//是否重复
fit: BoxFit.cover,//填充模式
colorFilter: ColorFilter.mode(//颜色滤镜
Colors.indigoAccent[400].withOpacity(0.5),
BlendMode.hardLight//混合模式
),
),
),
)
阴影和渐变
Container(
child: Icon(Icons.pool, size:32.0, color:Colors.white),
padding: EdgeInsets.only(left: 24.0,right: 8.0),//内边距
margin: EdgeInsets.all(8.0),//外边距
width: 90.0,//宽度
height: 90.0,//高度
decoration: BoxDecoration(
color: Color.fromRGBO(3, 53, 255, 1.0),//这里添加背景设置的话,尚层Container不能设置color
border: Border.all(
color: Colors.indigoAccent[100],
width: 3.0,
style: BorderStyle.solid,
),
// borderRadius: BorderRadius.circular(16.0),//边框圆角 BorderRadius.only(topLeft:16)
boxShadow: [//阴影效果
BoxShadow(
offset: Offset(0, 16.0),//阴影在X轴和Y轴上的偏移
color: Color.fromRGBO(16, 20, 188, 10),//阴影颜色
blurRadius: 25.0 ,//阴影程度
spreadRadius: -9.0, //阴影扩散的程度 取值可以正数,也可以是负数
),
],
shape: BoxShape.circle,//装饰器的形状 如果设置成圆形,不能设置borderRadius
// gradient: RadialGradient( //径向渐变效果RadialGradient 线性渐变效果LinearGradient
// colors: [
// Color.fromRGBO(7, 102, 255, 1.0),
// Color.fromRGBO(3, 28, 128, 1.0),
// ]
gradient: LinearGradient( //径向渐变效果RadialGradient 线性渐变效果LinearGradient
colors: [
Color.fromRGBO(7, 102, 255, 1.0),
Color.fromRGBO(3, 28, 128, 1.0),
],
begin: Alignment.topCenter,
end : Alignment.bottomCenter,
),
),
)
边框和圆角
image
