前言

• Decoration是一個背景裝飾對象允蜈，相當于Android中的shape.xml
• 今天，carson將全面介紹Decoration的使用蒿柳，包括其作用饶套、定義 & 使用，希望你們會喜歡垒探。

示意圖

目錄

1. 定義

一個背景裝飾對象妓蛮，相當于Android中的shape.xml

2. 作用

定制各種各樣的背景（邊框、圓角圾叼、陰影蛤克、形狀、漸變夷蚊、背景圖像）

3. 類型

Flutter Decoration的類型主要有4種：

類型1：BoxDecoration

a. 特點

實現(xiàn)邊框构挤、圓角、陰影惕鼓、形狀筋现、漸變、背景圖像

b. 屬性說明

 const BoxDecoration({
    this.color, // 底色
    this.image, // 圖片
    this.border, // 邊色
    this.borderRadius, // 圓角度
    this.boxShadow, // 陰影
    this.gradient, // 漸變
    this.backgroundBlendMode, // 混合Mode
    this.shape = BoxShape.rectangle,  // 形狀
  })

c. 使用示例

decoration: new BoxDecoration(
  border: new Border.all(color: Color(0xFFFF0000), width: 0.5), // 邊色與邊寬度
  color: Color(0xFF9E9E9E), // 底色
  borderRadius: new BorderRadius.circular((20.0)), // 圓角度
  shape: BoxShape.rectangle, // 默認值是矩形
  // shape: BoxShape.circle, // 圓形箱歧，使用圓形時不可以使用borderRadius

  // 陰影：此處采用兩層陰影說明
  boxShadow: [BoxShadow(color: Color(0x99FFFF00), 
    offset: Offset(5.0, 5.0),  // 陰影位置由offset決定
    blurRadius: 10.0, // 陰影模糊層度由blurRadius大小決定（大就更透明更擴散）
    spreadRadius: 2.0), // 陰影模糊大小由spreadRadius決定
    BoxShadow(color: Color(0x9900FF00), offset: Offset(1.0, 1.0)), BoxShadow(color: Color(0xFF0000FF))],

  // 漸變
    // 類型1：環(huán)形
      gradient: RadialGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)],radius: 1, tileMode: TileMode.mirror)
    // 類型2：掃描式
    // gradient: SweepGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], startAngle: 0.0, endAngle: 1*3.14)
    // 類型3：線性
    // gradient: LinearGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], begin: FractionalOffset(1, 0), end: FractionalOffset(0, 1))
  
  // 背景圖像
  image: new DecorationImage(
        image: new AssetImage('graphics/background.png'), // 加載本地圖片夫否，還有其他加載方式，如網(wǎng)絡(luò)叫胁、文件等
        centerSlice: new Rect.fromLTRB(10.0, 20.0, 30.0, 40.0),// 設(shè)置圖片大小
        fit: BoxFit.fill // 設(shè)置填充方式
  ),
),

類型2：ShapeDecoration

a. 特點

實現(xiàn)四個邊凰慈，分別指定顏色、寬度驼鹅、底部線微谓、矩形邊色森篷、圓形邊色等

b. 屬性說明

const ShapeDecoration({
  this.color, // 底色
  this.image, // 圖片
  this.gradient, // 漸變
  this.shadows, // 陰影
  @required this.shape, // 形狀
})

此處的屬性除了shape，其余與BoxDecoration相同豺型，所以此處主要講解shape屬性

c. 具體使用

decoration: new ShapeDecoration(
  // 統(tǒng)一四邊顏色和寬度
  shape: Border.all(color: Color(0xFF00FFFF),style: BorderStyle.solid,width: 2)

  // 四個邊分別指定顏色 & 寬度仲智，當只給bottom時與UnderlineInputBorder一致效果
  // shape: Border(top: b, bottom: b, right: b, left: b)

  // 設(shè)置矩形邊色
  // shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10)), side: BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))
  
  // 設(shè)置圓形邊色
  // shape: CircleBorder(side: BorderSide(color: Color(0xFFFFFF00), style: BorderStyle.solid, width: 2))
  
  // 設(shè)置豎向橢圓邊色（類似體育場）
  // shape: StadiumBorder(side: BorderSide(width: 2, style: BorderStyle.solid, color: Color(0xFF00FFFF))
  
  // 設(shè)置角形（八邊角）邊色
  // shape: BeveledRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10)), side: BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))
),

類型3：UnderlineTabindicator

a. 特點

下劃線，可控制下劃高底 & 左右邊距

b. 屬性說明

const UnderlineTabIndicator({
  this.borderSide = const BorderSide(width: 2.0, color: Colors.white), // 控制線的長度 & 顏色
  this.insets = EdgeInsets.zero, // 控制下劃高底姻氨，左右邊距
})

c. 具體使用

decoration: new UnderlineTabIndicator(
  borderSide: BorderSide(width: 2.0, color: Colors.white), 
  insets: EdgeInsets.fromLTRB(0,0,0,10)
),

類型4：FlutterLogoDecoration

a. 特點

實現(xiàn)Flutter logo 圖片

b. 屬性構(gòu)造

const FlutterLogoDecoration({
  this.lightColor = const Color(0xFF42A5F5), // Colors.blue[400]
  this.darkColor = const Color(0xFF0D47A1), // Colors.blue[900]
  this.textColor = const Color(0xFF616161),
  this.style = FlutterLogoStyle.markOnly,
  this.margin = EdgeInsets.zero,
})

在日常開發(fā)中钓辆，基本不會用到，所以此處不作過多講解肴焊。

4. 總結(jié)

• 本文全面介紹了Flutter Decoration的使用
• 接下來推出的文章前联，我將繼續(xù)講解Flutter的相關(guān)知識，包括使用語法娶眷、實戰(zhàn)等似嗤，感興趣的讀者可以繼續(xù)關(guān)注我的博客哦：Carson_Ho的Android博客

請點贊！因為你們的贊同/鼓勵是我寫作的最大動力届宠！

相關(guān)文章閱讀
Android開發(fā)：最全面烁落、最易懂的Android屏幕適配解決方案
Android開發(fā)：史上最全的Android消息推送解決方案
Android開發(fā)：最全面、最易懂的Webview詳解
Android開發(fā)：JSON簡介及最全面解析方法!
Android四大組件：Service服務(wù)史上最全面解析
Android四大組件：BroadcastReceiver史上最全面解析

歡迎關(guān)注Carson_Ho的簡書豌注！

不定期分享關(guān)于安卓開發(fā)的干貨伤塌，追求短、平轧铁、快寸谜，但卻不缺深度。