2、Decoration介绍
Flutter的Decoration可以设置：背景色 背景图 边框 圆角 阴影 渐变色 的等属性，有点像android里面的shape，Decoration 是基类，它的子类有下面这些
BoxDecoration:
实现边框、圆角、阴影、形状、渐变、背景图像
ShapeDecoration:
实现四边分别指定颜色和宽度、底部线、矩形边色、圆形边色、体育场（竖向椭圆）、 角形（八边角）边色
FlutterLogoDecoration:
Flutter图片
UnderlineTabindicator:
下划线
这里先介绍常用的 BoxDecoration，构造方法
const BoxDecoration({ this.color,//背景色 this.image,//图片 this.border,//描边 this.borderRadius,//圆角大小 this.boxShadow,//阴影 this.gradient,//渐变色 this.backgroundBlendMode,//图像混合模式 this.shape = BoxShape.rectangle,//形状,BoxShape.circle和borderRadius不能同时使用 })
boxShadow 阴影
color - 阴影颜色
offset - 阴影相偏移量
blurRadius - 高斯模糊数值
spreadRadius - 阴影膨胀量，这个值我是真不知有啥用，没场景啊，一般不写这个值
gradient渐变
支持2种渐变：LinearGradient线性渐变 和 RadialGradient扫描渐变
LinearGradient ：
begin - 渐变开始的位置
end - 渐变结束的位置
colors - 渐变颜色,是数组
stops - 值列表，装有0.0到1.0的数值
tileMode - 平铺模式
shape形状
rectangle是矩形，BoxShape.circle是圆形，BoxShape.circle和borderRadius不能一起使用
3、代码测试
效果1测试代码
@override Widget build(BuildContext context) { return MaterialApp( title: 'open url', home: Scaffold( appBar: AppBar( // Here we take the value from the MyHomePage object that was created by // the App.build method, and use it to set our appbar title. title: Text('hello flutter'), ), body: Center( child: DecoratedBox( // padding: EdgeInsets.all(16), // padding: EdgeInsets.fromLTRB(10, 20, 30, 40), // padding: EdgeInsets.only(left: 10, right: 30), decoration: BoxDecoration( // 背景色 color: Colors.lightBlueAccent, // 边框， border: Border.all(color: Colors.yellowAccent, style: BorderStyle.solid, width: 5), // 背景图 image: new DecorationImage( image: new NetworkImage( 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1484037605,2864708693&fm=11&gp=0.jpg'), fit: BoxFit.cover ), borderRadius: BorderRadius.all(Radius.circular(30)), boxShadow:[ BoxShadow( color: Colors.redAccent, offset: Offset(20, 20), blurRadius: 10, ), ] ), child: Container( height: 200, width: 200, ), ), ), ), ); } }
效果2测试代码
@override Widget build(BuildContext context) { return MaterialApp( title: 'open url', home: Scaffold( appBar: AppBar( // Here we take the value from the MyHomePage object that was created by // the App.build method, and use it to set our appbar title. title: Text('hello flutter'), ), body: Center( child: DecoratedBox( // padding: EdgeInsets.all(16), // padding: EdgeInsets.fromLTRB(10, 20, 30, 40), // padding: EdgeInsets.only(left: 10, right: 30), decoration: BoxDecoration( // 背景色 gradient: LinearGradient(colors:[Colors.blue, Colors.green]), //背景渐变 color: Colors.lightBlueAccent, // 背景图 borderRadius: BorderRadius.all(Radius.circular(3)), boxShadow: [ //阴影 BoxShadow( color:Colors.black54, offset: Offset(2.0,2.0), blurRadius: 4.0 ) ] ), child: Padding( padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0), child: Text("chenyu", style: TextStyle(color: Colors.white), ), ) ), ), ), ); } }
效果3测试代码
@override Widget build(BuildContext context) { return MaterialApp( title: 'open url', home: Scaffold( appBar: AppBar( // Here we take the value from the MyHomePage object that was created by // the App.build method, and use it to set our appbar title. title: Text('hello flutter'), ), body: Center( child: DecoratedBox( // padding: EdgeInsets.all(16), // padding: EdgeInsets.fromLTRB(10, 20, 30, 40), // padding: EdgeInsets.only(left: 10, right: 30), decoration: BoxDecoration( // 背景色 border: Border.all( color: Colors.yellowAccent, style: BorderStyle.solid, width: 5), // 背景图 image: new DecorationImage( image: new NetworkImage( 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1484037605,2864708693&fm=11&gp=0.jpg'), fit: BoxFit.cover ), shape: BoxShape.circle, ), child: Container( width: 200, height: 200, ), ), ), ), ); } }
