Flutter實(shí)戰(zhàn) 裝飾容器DecoratedBox

DecoratedBox可以在其子組件繪制前(或后)繪制一些裝飾（Decoration），如背景、邊框、漸變等。DecoratedBox定義如下：

const DecoratedBox({
  Decoration decoration,
  DecorationPosition position = DecorationPosition.background,
  Widget child
})

• decoration：代表將要繪制的裝飾，它的類型為Decoration。Decoration是一個(gè)抽象類，它定義了一個(gè)接口 createBoxPainter()，子類的主要職責(zé)是需要通過實(shí)現(xiàn)它來創(chuàng)建一個(gè)畫筆，該畫筆用于繪制裝飾。

• position：此屬性決定在哪里繪制Decoration，它接收DecorationPosition 的枚舉類型，該枚舉類有兩個(gè)值：

• background：在子組件之后繪制，即背景裝飾。
• foreground：在子組件之上繪制，即前景。

#BoxDecoration

我們通常會(huì)直接使用BoxDecoration類，它是一個(gè) Decoration 的子類，實(shí)現(xiàn)了常用的裝飾元素的繪制。

BoxDecoration({
  Color color, //顏色
  DecorationImage image,//圖片
  BoxBorder border, //邊框
  BorderRadiusGeometry borderRadius, //圓角
  List<BoxShadow> boxShadow, //陰影,可以指定多個(gè)
  Gradient gradient, //漸變
  BlendMode backgroundBlendMode, //背景混合模式
  BoxShape shape = BoxShape.rectangle, //形狀
})

各個(gè)屬性名都是自解釋的，詳情讀者可以查看 API 文檔。下面我們實(shí)現(xiàn)一個(gè)帶陰影的背景色漸變的按鈕：

 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),),
  )
)

運(yùn)行后效果如圖5-9所示：

怎么樣，通過BoxDecoration我們實(shí)現(xiàn)了一個(gè)漸變按鈕的外觀，但此示例還不是一個(gè)標(biāo)準(zhǔn)的按鈕，因?yàn)樗€不能響應(yīng)點(diǎn)擊事件，我們將在后面“自定義組件”一章中實(shí)現(xiàn)一個(gè)完整功能的GradientButton。另外，上面的例子中使用了LinearGradient類，它用于定義線性漸變的類，F(xiàn)lutter 中還提供了其它漸變配置類，如RadialGradient、SweepGradient，讀者若有需要可以自行查看 API 文檔。