## DecoratedBox DecoratedBox可以在其子widget繪制前(或后)繪制一個裝飾Decoration（如背景、邊框、漸變等）。DecoratedBox定義如下： ``` const DecoratedBox({ Decoration decoration, DecorationPosition position = DecorationPosition.background, Widget child }) ``` - decoration：代表將要繪制的裝飾，它類型為Decoration，Decoration是一個抽象類，它定義了一個接口 `createBoxPainter()`，子類的主要職責是需要通過實現它來創建一個畫筆，該畫筆用于繪制裝飾。 - position：此屬性決定在哪里繪制Decoration，它接收DecorationPosition的枚舉類型，該枚舉類兩個值： - background：在子widget之后繪制，即背景裝飾。 - foreground：在子widget之上繪制，即前景。 #### BoxDecoration 我們通常會直接使用`BoxDecoration`，它是一個Decoration的子類，實現了常用的裝飾元素的繪制。 ``` BoxDecoration({ Color color, //顏色 DecorationImage image,//圖片 BoxBorder border, //邊框 BorderRadiusGeometry borderRadius, //圓角 List<BoxShadow> boxShadow, //陰影,可以指定多個 Gradient gradient, //漸變 BlendMode backgroundBlendMode, //背景混合模式 BoxShape shape = BoxShape.rectangle, //形狀 }) ``` 各個屬性名都是自解釋的，詳情讀者可以查看API文檔，我們看一個示例： ``` 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),), ) ) ``` 效果如下：  怎么樣，通過BoxDecoration，我們實現了一個漸變按鈕的外觀，但此示例還不是一個標準的按鈕，因為它還不能響應點擊事件，我們將在本章末尾來實現一個完整的GradientButton。