1、不廢話，先爆照看效果
?
?
?
?
?
?
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測試代碼
@overrideWidget 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測試代碼
@overrideWidget 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測試代碼
@overrideWidget 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,),),),),);}
}?
