1、不廢話，先爆照看效果

?

?

?

?

?

?

2、Decoration介紹

Flutter的Decoration可以設(shè)置：背景色 背景圖 邊框 圓角 陰影 漸變色 的等屬性，有點(diǎn)像android里面的shape，Decoration 是基類，它的子類有下面這些

• BoxDecoration:實(shí)現(xiàn)邊框、圓角、陰影、形狀、漸變、背景圖像
• ShapeDecoration:實(shí)現(xiàn)四邊分別指定顏色和寬度、底部線、矩形邊色、圓形邊色、體育場（豎向橢圓）、 角形（八邊角）邊色
• FlutterLogoDecoration:Flutter圖片
• UnderlineTabindicator:下劃線

這里先介紹常用的 BoxDecoration，構(gòu)造方法

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 - 高斯模糊數(shù)值
• spreadRadius - 陰影膨脹量，這個值我是真不知有啥用，沒場景啊，一般不寫這個值

gradient漸變
支持2種漸變：LinearGradient線性漸變 和 RadialGradient掃描漸變

• LinearGradient ：
• begin - 漸變開始的位置
• end - 漸變結(jié)束的位置
• colors - 漸變顏色,是數(shù)組
• stops - 值列表，裝有0.0到1.0的數(shù)值
• 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,),),),),);} }

?

?

總結(jié)

以上是生活随笔為你收集整理的Flutter之Decoration的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。