Decoration Class介紹
Decoration是個窗口小部件(widget)挣郭，可以在子widget的繪制前后對其進行裝飾粹庞，Decoration的定義如下：
DecoratedBox({Key key, @required Decoration decoration, DecorationPosition position: DecorationPosition.background, Widget child })
-
decoration: 裝飾器接口，Decoration是個抽象接口困食，BoxDecoration是它其一個具體實現(xiàn)類蛇尚，Decoration裝飾器的繪制最終會由BoxPainter來完成，實現(xiàn)一個Decoration裝飾器可以通過createBoxPainter方法來獲取一個BoxPainter弛车，最終通過BoxPainter來進行繪制。 -
position: 是個枚舉類型酸舍，用來控制裝飾器在哪里繪制帅韧，取值有background跟foreground，前者代表是在背景繪制啃勉，后者是在前景繪制
BoxDecoration介紹
BoxDecoration是Decoration的一個實現(xiàn)類忽舟，BoxDecoration提供了背景顏色、邊框淮阐、陰影叮阅、圓角、顏色漸變泣特、形狀等等裝飾能力浩姥，BoxDecoration的定義如下
BoxDecoration({
Color color,
DecorationImage image,
BoxBorder border,
BorderRadiusGeometry borderRadius,
List<BoxShadow> boxShadow,
Gradient gradient,
BlendMode backgroundBlendMode,
BoxShape shape = BoxShape.rectangle,
})
-
color： 背景顏色 -
image：背景圖片，會繪制在背景顏色上面 -
border： 邊框状您，會繪制在背景顏色背景圖片上面 -
borderRadius： 邊框圓角 -
boxShadow： 背景陰影 -
gradient： 填充漸變顏色 -
backgroundBlendMode： 背景混合模式 -
shape： 形狀
DecoratedBox使用
下面直接給出一個完整的例子
import 'package:flutter/material.dart';
/**
* Created by nls on 2019/7/20.
* Nothing.
*/
class DecoratedBoxDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primaryColor: Colors.blue),
home: HomeWidget(),
);
}
}
class HomeWidget extends StatefulWidget {
@override
State createState() {
return HomeState();
}
}
class HomeState extends State<HomeWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("TransformDemo"),),
body: Container(
color: Colors.amberAccent,
alignment: Alignment.center,
child: DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(colors:[Colors.red,Colors.orange[700]]), //背景漸變
borderRadius: BorderRadius.circular(3.0), //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("Login", style: TextStyle(color: Colors.white),),
)
)
),
);
}
}
效果如下：
