## 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。
- 緣起
- 起步
- 移動開發技術簡介
- Flutter簡介
- 搭建Flutter開發環境
- 常見配置問題
- Dart語言簡介
- 第一個Flutter應用
- 計數器示例
- 路由管理
- 包管理
- 資源管理
- 調試Flutter APP
- Dart線程模型及異常捕獲
- 基礎Widgets
- Widget簡介
- 文本、字體樣式
- 按鈕
- 圖片和Icon
- 單選框和復選框
- 輸入框和表單
- 布局類Widgets
- 布局類Widgets簡介
- 線性布局Row、Column
- 彈性布局Flex
- 流式布局Wrap、Flow
- 層疊布局Stack、Positioned
- 容器類Widgets
- Padding
- 布局限制類容器ConstrainedBox、SizeBox
- 裝飾容器DecoratedBox
- 變換Transform
- Container容器
- Scaffold、TabBar、底部導航
- 可滾動Widgets
- 可滾動Widgets簡介
- SingleChildScrollView
- ListView
- GridView
- CustomScrollView
- 滾動監聽及控制ScrollController
- 功能型Widgets
- 導航返回攔截-WillPopScope
- 數據共享-InheritedWidget
- 主題-Theme
- 事件處理與通知
- 原始指針事件處理
- 手勢識別
- 全局事件總線
- 通知Notification
- 動畫
- Flutter動畫簡介
- 動畫結構
- 自定義路由過渡動畫
- Hero動畫
- 交錯動畫
- 自定義Widget
- 自定義Widget方法簡介
- 通過組合現有Widget實現
- 實例:TurnBox
- CustomPaint與Canvas
- 實例:圓形漸變進度條(自繪)
- 文件操作與網絡請求
- 文件操作
- Http請求-HttpClient
- Http請求-Dio package
- 實例:Http分塊下載
- WebSocket
- 使用Socket API
- Json轉Model
- 包與插件
- 開發package
- 插件開發:平臺通道簡介
- 插件開發:實現Android端API
- 插件開發:實現IOS端API
- 系統能力調用
- 國際化
- 讓App支持多語言
- 實現Localizations
- 使用Intl包
- Flutter核心原理
- Flutter UI系統
- Element和BuildContext
- RenderObject與RenderBox
- Flutter從啟動到顯示