前言

文章結(jié)構(gòu)

Gradient Property
TileMode property
RadialGradient
Image Property
centerSlice Property
ColorFilter Property
fit Property
repeat Property
matchTextDirection Property
Border Property
borderRadius Property
boxShadow Property
shape Property
Padding Property

介紹：

BoxDecoration類提供了多種繪制盒子的方法丽柿。

這個盒子有邊框悯森、主體、陰影組成璃弄。

盒子的形狀可能是圓形或者長方形诚纸。如果是長方形，borderRadius屬性可以控制邊界的圓角大小谷炸。

盒子的主體部分在layers層繪制北专。盒子的最底層是color層，在color層上面是gradient層旬陡。color層和gradient層都是填充整個盒子逗余。最后是image層，它的對齊方式右DecorationImage類控制季惩。

邊框在主體上層繪制，陰影在主體下層繪制腻格。

這里我們在一個空的container中画拾，使用boxDecoration的color屬性
代碼如下：

//Colors
class BoxDecoration_Colors_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.purple
        ),
        child: FlutterLogo(
          size: 200.0,
        ),
      ),
    );
  }
}

效果圖如下：

圖1 Colors使用

注意:
如果你使用了decoration屬性，就不能再使用color屬性菜职。這個color參數(shù)只是“decoration: new BoxDecoration(color:color)”的簡寫青抛。因此，以下代碼運行會提示錯誤：

child: Container(
        //二者不能同時出現(xiàn)
        decoration: BoxDecoration(
          color: Colors.purple
        ),
        color: Colors.green,
      ),

一酬核、Gradient Property

在填充整個盒子模型時蜜另，會使用到漸變屬性。

如果使用了漸變屬性嫡意，color屬性將不會有效果举瑰。

這個漸變在image圖層下面繪制。

漸變屬性的值可以是LinearGradient類或者RadialGradient類蔬螟。

這里將詳細(xì)介紹LinearGradient和RadialGradient此迅。

LinearGradient有5個重要屬性：

begin(漸變開始的位置)
end(漸變結(jié)束的位置)
colors(漸變顏色,是數(shù)組)
stops(值列表，裝有0.0到1.0的數(shù)值)
tileMode(漸變平鋪模式，指定在開始和結(jié)束以外的區(qū)域平鋪模式)

代碼如下：

//Gradient Property
class Gradient_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.purple,
          gradient: LinearGradient(
              colors: [Colors.red, Colors.cyan],
          )
        ),
        child: FlutterLogo(
          size: 200.0,
        ),
      ),
    );
  }
}

效果圖如下：

圖2 Gradient屬性

如果我們沒有添加begin和start屬性耸序，這個漸變將會使用默認(rèn)屬性忍些，從左向右繪制。

這里我們嘗試添加begin和end屬性坎怪，你將使用Alignment類的兩個屬性罢坝。
代碼如下：

//Gradient Property
//begin和end屬性
class Gradient_Property_beginAndEnd_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        decoration: BoxDecoration(
            color: Colors.purple,
            gradient: LinearGradient(
              colors: [Colors.red, Colors.cyan],
              begin: Alignment.centerRight,
              end: Alignment.centerLeft
            ),
        ),
        child: FlutterLogo(
          size: 200.0,
        ),
      ),
    );
  }
}

效果圖如下：

圖3 Gradient屬性

記住它是一個線性漸變。因此如果begin是bottomRight搅窿，end是bottomLeft嘁酿，那么這個漸變將從右向左繪制。以下設(shè)置效果一樣：

begin: Alignment.centerRight & end: Alignment.centerLeft

begin: Alignment.topRight & end: Alignment.topLeft

同樣你可以使用Alignment類中的坐標(biāo)系屬性X和Y戈钢。
更多關(guān)于Alignment類詳情查看Flutter之Container用法詳解痹仙。
代碼如下；

//Gradient Property
//begin和end屬性
class Gradient_Property_beginAndEnd_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        decoration: BoxDecoration(
            color: Colors.purple,
            gradient: LinearGradient(
              colors: [Colors.red, Colors.cyan],
              begin: Alignment.centerRight,
              //end: Alignment.centerLeft
              end: Alignment(-1.0, -1.0)//效果同上
            ),
        ),
        child: FlutterLogo(
          size: 200.0,
        ),
      ),
    );
  }
}

效果圖如下：

圖4 Gradient屬性

二殉了、TileMode property

在開始和結(jié)束之前开仰，此漸變應(yīng)如何平鋪該區(qū)域以外的平面。

TileMode值：

TileMode.clamp
TileMode.mirror
TileMode.repeated

圖5 TileMode數(shù)值

TileMode.clamp 是默認(rèn)的渲染方式

代碼如下：

//TileMode property
//TileMode.clamp
class TileMode_Clamp_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.purple,
          gradient: LinearGradient(
              colors: [Colors.red, Colors.cyan],
              begin: Alignment.centerRight,
              end: Alignment(0.8,0.0),
              tileMode: TileMode.clamp
          )
        ),
        child: FlutterLogo(
          size: 200.0,
        ),
      ),
    );
  }
}

效果圖如下：

圖6 TileMode.clamp屬性

TileMode.mirror

代碼如下：

//TileMode property
//TileMode.mirror
class TileMode_Mirror_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.purple,
          gradient: LinearGradient(
              colors: [Colors.red, Colors.cyan],
              begin:Alignment.centerRight,
              end: Alignment(0.8,0.0),
              tileMode: TileMode.mirror
          ),
        ),
        child: FlutterLogo(
          size: 200.0,
        ),
      ),
    );
  }
}

效果圖如下：

圖7 TileMode.mirror

TileMode.repeated

代碼如下：

//TileMode property
//TileMode.repeated
class TileMode_Repeated_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.purple,
          gradient: LinearGradient(
              colors: [Colors.red, Colors.cyan],
              begin: Alignment.centerRight,
              end: Alignment(0.8,0.0),
              tileMode: TileMode.repeated
          )
        ),
        child: FlutterLogo(
          size: 200.0,
        ),
      ),
    );
  }
}

效果圖如下：

圖8 TileMode.repeated

Stops

一個從0.0到1.0的值列表薪铜，數(shù)值表示梯度方向上的分割比例众弓。

如果Stops不為空，那么它必須與colors中顏色個數(shù)保持一致隔箍，否則運行異常谓娃。

如果第一個數(shù)值不為0，此時會默認(rèn)一個stop位置0.0蜒滩，顏色和colors中第一個顏色相同滨达。

如果最后一個數(shù)值不為1.0，此時會默認(rèn)一個stop位置1.0俯艰，顏色和colors中最后一個顏色相同捡遍。

stops值列表中的數(shù)據(jù)必須是升序。如果stops值列表有一個數(shù)據(jù)小于前一個數(shù)據(jù)值竹握，那么這個數(shù)據(jù)會被默認(rèn)等于前面的數(shù)據(jù)值画株。

如果stops是空的，那么stops里面默認(rèn)存放一組均勻分布的點啦辐，并且第一個點是0.0谓传，最后一個點是1.0。

代碼如下：

//Gradient Property
//Stops屬性
class Stops_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.purple,
          gradient: LinearGradient(
              colors: [Colors.red,Colors.cyan,Colors.purple,Colors.lightGreenAccent],
              begin:Alignment.centerRight,
              end: Alignment.centerLeft,
              tileMode: TileMode.clamp,
              stops: [0.3,0.5,0.6,0.7]//要與上面數(shù)組顏色個數(shù)一致芹关，否則顯示不出來
          ),
        ),
        child: FlutterLogo(
          size: 200.0,
        ),
      ),
    );
  }
}

效果圖如下：

圖9 stops屬性

三续挟、RadialGradient

徑向漸變有5個重要屬性

center(漸變的中心)
radius(漸變的半徑，浮點型侥衬，具體數(shù)值需要乘以盒子的寬度)
colors(漸變顏色,是數(shù)組)
stops(值列表庸推，裝有0.0到1.0的數(shù)值)
tileMode(漸變平鋪模式常侦，指定在圓環(huán)以外的區(qū)域平鋪模式)

代碼如下：

//RadialGradient
class RadialGradient_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.purple,
          gradient: RadialGradient(
              colors: [Colors.red, Colors.cyan, Colors.purple, Colors.lightGreenAccent],
              center: Alignment(-0.7, -0.6),
              radius: 0.2,
              tileMode: TileMode.clamp,
              stops: [0.3, 0.5, 0.6, 0.7]
          )
        ),
        child: FlutterLogo(
          size: 200.0,
        ),
      ),
    );
  }
}

效果圖如下：

圖10 RadialGradient

同線性漸變一樣，Center屬性用Alignment類取值贬媒，取值范圍是0.0到1.0聋亡。

如果在寬度是200.0的盒子上繪制徑向漸變，那么radius是0.5际乘，就代表100.0坡倔。

圖10

四、Image Property

在color層和gradient層上方繪制圖像脖含。image屬性的值是DecorationImage類罪塔。

DecorationImage類包含以下屬性：

image
alignment(更多細(xì)節(jié)查看Flutter之Container用法詳解)
centerSlice
colorFilter
fit
matchTextDirection
repeat

image

這個圖片被繪制到圖層中。通常养葵，這個圖片將是AssetImage(應(yīng)用程序內(nèi)部提供的圖片)或者NetworkImage(用于從網(wǎng)絡(luò)獲取的圖片)征堪。
代碼如下：

//Image Property
class Image_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.purple,
          gradient: RadialGradient(
              colors: [Colors.red, Colors.cyan, Colors.purple, Colors.lightGreenAccent],
              center: Alignment(0.0, 0.0),
              radius: 0.5,
              tileMode: TileMode.clamp,
              stops: [0.3, 0.5, 0.9, 1.0]
          ),
          image: DecorationImage(
            image: NetworkImage("http://jlouage.com/images/author.jpg"),
        ),
      ),
      child: FlutterLogo(
        size: 200.0,
      ),
     ),
    );
  }
}

效果圖如下：

圖11 Image

從上面圖片可以看出，這個圖片是繪制在color層和gradient層上方关拒。

五佃蚜、centerSlice Property

centerSlice與Android Studio中的9補丁png相同。這是一種用于縮放圖像的技術(shù)着绊，使得4個角保持不縮放谐算，但是四個邊在一個軸上縮放，中間在兩個軸上縮放归露。

圖12 centerSlice Property

這個centerSlice類的數(shù)值是Rect類洲脂。我們需要從左邊和頂邊，寬度和高度構(gòu)造一個矩形剧包。
讓我們開始了解我們圖片的大小恐锦。

圖13

Width = 320 & the Height = 190

我們需要使用Rect.fromLTWH(double left, double top, double width, double height)類來獲取數(shù)據(jù)。

我們的centerSlice是圖片中間的綠色矩形疆液。要創(chuàng)建它踩蔚，我們需要知道橙色矩形的寬度，把它放在左邊的值和紫色矩形的高度枚粘，并把它作為最高值。

圖14

Rect.fromLTWH(50.0, 50.0, double width, double height)

所以我們告訴Rect類從左邊移動50飘蚯，從圖片頂部移動50馍迄，然后從上面標(biāo)記的黃點開始繪制矩形。

圖15

在上圖中局骤，矩形的寬度為220攀圈，高度為90，因此最終的類值應(yīng)為Rect.fromLTWH(50.0, 50.0, 220.0, 90.0)

代碼如下:

//centerSlice Property
//關(guān)聯(lián)問題:
//https://github.com/flutter/flutter/issues/16098
class centerSlice_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage("images/9_patch_scaled_320x190.jpeg"),
              centerSlice: new Rect.fromLTWH(50.0, 50.0, 220.0, 90.0),
              fit: BoxFit.fill,
          )
        ),
        child: Container(
          //color: Colors.yellow,
          width: 110.0,
          height: 110.0,
        ),
      ),
    );
  }
}

效果圖如下:

圖16

我們可以看出4個紅色的區(qū)域沒有縮放÷退Γ現(xiàn)在增加container的子控件的寬和高赘来。

代碼如下:

//centerSlice Property
//關(guān)聯(lián)問題:
//https://github.com/flutter/flutter/issues/16098
class centerSlice_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage("images/9_patch_scaled_320x190.jpeg"),
              centerSlice: new Rect.fromLTWH(50.0, 50.0, 220.0, 90.0),
              fit: BoxFit.fill,
          )
        ),
        child: Container(
          //color: Colors.yellow,

          //width: 110.0,
          //height: 110.0,
          width: 350.0,
          height: 450.0,
        ),
      ),
    );
  }
}

效果圖如下：

圖17

六现喳、ColorFilter Property

在繪制圖像之前應(yīng)用于圖像的濾色器。這個屬性值是 ColorFilter類犬辰，方法是ColorFilter.mode嗦篱。

ColorFilter.mode()有兩個參數(shù)，第一個是濾色鏡幌缝，第二個是blend mode(混合模式)灸促。

我們將會使用下面的圖片，并且在上面應(yīng)用不同的ColorFilter涵卵。

圖18

BlendMode.src

我們將用Colors.red.withOpacity(0.5)和多種混合模式浴栽。下面我們將使用BlendMode.src。這將刪除目標(biāo)圖像轿偎，僅繪制源圖像典鸡。這里目標(biāo)圖像是image，源圖像是Container(最里層的)坏晦。
代碼如下：

//ColorFilter Property
class ColorFilter_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: double.infinity,
        height: double.infinity,
        //color: Colors.white,
        color: Colors.grey,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image:AssetImage("images/JL-Logo-empty.png"),
                colorFilter: ColorFilter.mode(Colors.red.withOpacity(0.5), BlendMode.src)
            ),
          ),
        ),
      ),
    );
  }
}

效果圖如下：

圖19 BlendMode.src

BlendMode.clear

現(xiàn)在將要使用BlendMode.clear萝玷。這將丟棄源圖像和目標(biāo)圖像，不會留下任何內(nèi)容英遭。

效果圖如下:

圖20 BlendMode.clear

BlendMode.color

獲取源圖像的??色調(diào)和飽和度以及目標(biāo)圖像的亮度间护。
效果是使用源圖像為目標(biāo)圖像著色。
輸出圖像的不透明度的計算方法與srcOver相同挖诸。
在源圖像中完全透明的區(qū)域從目的地獲取其色調(diào)和飽和度汁尺。
簡單來說，就是用當(dāng)前Container顏色給image染色(通俗易懂)多律。
效果圖如下：

圖21 BlendMode.color

BlendMode.colorBurn

將目標(biāo)的倒數(shù)除以源痴突，并反轉(zhuǎn)結(jié)果。
反轉(zhuǎn)組件意味著完全飽和的通道（不透明的白色）被視為值0.0狼荞，通常被視為0.0（黑色辽装，透明）的值被視為1.0。
這個說法有點太專業(yè)相味，自己都有點迷糊了Ｊ盎！丰涉！直接看效果吧拓巧。
效果圖如下：

圖22 BlendMode.colorBurn

BlendMode.colorDodge

將目標(biāo)除以源的倒數(shù)。
反轉(zhuǎn)組件意味著完全飽和的通道（不透明的白色）被視為值0.0一死，通常被視為0.0（黑色肛度，透明）的值被視為1.0。
同樣感覺一頭霧水投慈，看效果圖吧３泄ⅰ９诮尽！
效果圖如下：

圖23 BlendMode.colorDodge

BlendMode.darken

通過從每個顏色通道中選擇最低值來合成源圖像和目標(biāo)圖像加袋。
輸出圖像的不透明度的計算方法與srcOver相同凛辣。
效果圖如下：

圖24 BlendMode.darken

BlendMode.difference

從每個通道的較大值中減去較小的值。
合成黑色沒有效果;合成白色會反轉(zhuǎn)另一幅圖像的顏色锁荔。
輸出圖像的不透明度的計算方法與srcOver相同蟀给。
效果圖如下：

圖25 BlendMode.difference

BlendMode.dst

刪除源圖像，僅繪制目標(biāo)圖像阳堕。
從概念上講跋理，源圖像被丟棄，保持目的地不變恬总。
這對應(yīng)于“目標(biāo)”Porter-Duff運算符前普。
效果圖如下：

圖26 BlendMode.dst

BlendMode.dstATop

將目標(biāo)圖像合成到源圖像上，但僅限于它與源重疊的位置壹堰。
這對應(yīng)于“Destination atop Source”Porter-Duff運算符拭卿。
這本質(zhì)上是dstOver運算符，但輸出的不透明度通道設(shè)置為源圖像的不透明度通道贱纠，而不是圖像的不透明度通道的組合峻厚。
對于源位于頂部而非目標(biāo)的變體，請參閱srcATop谆焊。
效果圖如下：

圖27 BlendMode.dstATop

BlendMode.dstIn

顯示目標(biāo)圖像惠桃，但僅顯示兩個圖像重疊的位置。
源圖像未呈現(xiàn)辖试，僅被視為蒙版辜王。忽略源的顏色通道，只有不透明度才有效罐孝。
要顯示源圖像呐馆，請考慮srcIn。
要反轉(zhuǎn)掩碼的語義（僅顯示目標(biāo)所在的源莲兢，而不是缺少目標(biāo)的位置）汹来，請考慮dstOut。
這對應(yīng)于“源中的目的地”Porter-Duff運算符改艇。
效果圖如下：

圖28 BlendMode.dstIn

BlendMode.dstOut

顯示目標(biāo)圖像收班，但僅顯示兩個圖像不重疊的位置。源圖像未呈現(xiàn)遣耍，僅被視為蒙版。忽略源的顏色通道炮车，只有不透明度才有效舵变。
要顯示源圖像酣溃，請考慮srcOut。
要反轉(zhuǎn)掩碼的語義（僅顯示源存在的目標(biāo)纪隙，而不是缺少的位置）赊豌，請考慮dstIn。
這對應(yīng)于“Destination out Source”Porter-Duff運算符绵咱。
效果圖如下：

圖29 BlendMode.dstOut

BlendMode.dstOver

合成目標(biāo)圖像下的源圖像碘饼。
這與srcOver相反。
這對應(yīng)于“源上的目標(biāo)”Porter-Duff運算符悲伶。
效果圖如下:

圖30 BlendMode.dstOver

BlendMode.exclusion

從兩個圖像的總和中減去兩個圖像的乘積的兩倍艾恼。
合成黑色沒有效果;合成白色會反轉(zhuǎn)另一幅圖像的顏色。
輸出圖像的不透明度的計算方法與srcOver相同麸锉。
效果圖如下：

圖31 BlendMode.exclusion

BlendMode.hardLight

將源圖像和目標(biāo)圖像的組件調(diào)整為有利于源后钠绍，將它們相乘。
具體來說花沉，如果源值較小柳爽，則將其與目標(biāo)值相乘，而目標(biāo)值較小碱屁，它將目標(biāo)值的倒數(shù)乘以源值的倒數(shù)磷脯，然后反轉(zhuǎn)結(jié)果。
反轉(zhuǎn)組件意味著完全飽和的通道（不透明的白色）被視為值0.0娩脾，通常被視為0.0（黑色赵誓，透明）的值被視為1.0。
效果圖如下：

圖32 BlendMode.hardLight

BlendMode.hue

獲取源圖像的??色調(diào)晦雨，以及目標(biāo)圖像的飽和度和亮度架曹。
效果是使用源圖像為目標(biāo)圖像著色。
輸出圖像的不透明度的計算方法與srcOver相同闹瞧。
在源圖像中完全透明的區(qū)域從目的地獲取其色調(diào)绑雄。
效果圖如下：

圖33 BlendMode.hue

BlendMode.lighten

通過從每個顏色通道中選擇最高值來合成源圖像和目標(biāo)圖像。
輸出圖像的不透明度的計算方法與srcOver相同奥邮。
效果圖如下：

圖34 BlendMode.lighten

BlendMode.luminosity

獲取源圖像的??亮度万牺，以及目標(biāo)圖像的色調(diào)和飽和度。
輸出圖像的不透明度的計算方法與srcOver相同洽腺。
在源圖像中完全透明的區(qū)域從目的地獲取其亮度脚粟。
效果圖如下：

圖35 BlendMode.luminosity

BlendMode.modulate

將源圖像和目標(biāo)圖像的顏色分量相乘。
這只能產(chǎn)生相同或較暗的顏色（乘以白色蘸朋，1.0核无，結(jié)果不變;乘以黑色，0.0藕坯，結(jié)果為黑色）团南。
合成兩個不透明圖像時噪沙，這與在投影儀上重疊兩個透明膠片具有相似的效果。
對于也乘以alpha通道的變體吐根，請考慮乘法正歼。
效果圖如下：

圖36 BlendMode.modulate

BlendMode.multiply

將源圖像和目標(biāo)圖像的組件相乘，包括Alpha通道拷橘。
這只能產(chǎn)生相同或較暗的顏色（乘以白色局义，1.0，結(jié)果不變;乘以黑色冗疮，0.0萄唇，結(jié)果為黑色）。
由于Alpha通道也是相乘的赌厅，因此一個圖像中的完全透明像素（不透明度為0.0）會在輸出中產(chǎn)生完全透明的像素穷绵。這與dstIn類似，但顏色組合在一起特愿。
對于將顏色相乘但不會乘以alpha通道的變體仲墨，請考慮調(diào)制。
效果圖如下：

圖37 BlendMode.multiply

BlendMode.overlay

在調(diào)整源圖像和目標(biāo)圖像的組件以使其有利于目標(biāo)之后揍障，將其相乘目养。
具體來說，如果目標(biāo)值較小毒嫡，則將其與源值相乘癌蚁，而源值較小，它將源值的倒數(shù)乘以目標(biāo)值的倒數(shù)兜畸，然后反轉(zhuǎn)結(jié)果努释。
反轉(zhuǎn)組件意味著完全飽和的通道（不透明的白色）被視為值0.0，通常被視為0.0（黑色咬摇，透明）的值被視為1.0伐蒂。
效果圖如下：

圖38 BlendMode.overlay

BlendMode.plus

對源圖像和目標(biāo)圖像的組件求和。
其中一個圖像的像素中的透明度降低了該圖像對相應(yīng)輸出像素的貢獻(xiàn)肛鹏，就好像該圖像中該像素的顏色較暗一樣逸邦。
這對應(yīng)于“Source plus Destination”Porter-Duff運算符。
效果圖如下：

圖39 BlendMode.plus

BlendMode.saturation

獲取源圖像的??飽和度以及目標(biāo)圖像的色調(diào)和亮度在扰。
輸出圖像的不透明度的計算方法與srcOver相同缕减。
在源圖像中完全透明的區(qū)域從目的地獲取飽和度。
效果圖如下：

圖40 BlendMode.saturation

BlendMode.screen

將源圖像和目標(biāo)圖像的分量的倒數(shù)相乘芒珠，并反轉(zhuǎn)結(jié)果桥狡。
反轉(zhuǎn)組件意味著完全飽和的通道（不透明的白色）被視為值0.0，通常被視為0.0（黑色，透明）的值被視為1.0裹芝。
這與調(diào)制混合模式基本相同呈宇，但是在乘法之前將顏色的值反轉(zhuǎn)，并且在渲染之前將結(jié)果反轉(zhuǎn)回來局雄。
這只能產(chǎn)生相同或較淺的顏色（乘以黑色，1.0存炮，結(jié)果不變;乘以白色炬搭，0.0，結(jié)果為白色）穆桂。同樣宫盔，在alpha通道中，它只能產(chǎn)生更多不透明的顏色享完。
這與兩臺同時在同一屏幕上顯示圖像的投影機具有相似的效果灼芭。
效果圖如下：

圖41 BlendMode.screen

BlendMode.softLight

對于低于0.5的源值，使用colorDodge般又，對于高于0.5的源值彼绷，使用colorBurn。
這導(dǎo)致與覆蓋相似但更柔和的效果茴迁。
效果圖如下：

圖42 BlendMode.softLight

BlendMode.srcATop

將源圖像合成到目標(biāo)圖像上寄悯，但僅限于它與目標(biāo)重疊的位置。
這對應(yīng)于“Source atop Destination”Porter-Duff運算符堕义。
這實際上是srcOver運算符猜旬，但輸出的不透明度通道設(shè)置為目標(biāo)圖像的不透明度通道，而不是兩個圖像的不透明度通道的組合倦卖。
對于目標(biāo)位于頂部而非源的變體洒擦，請參閱dstATop。
效果圖如下：

圖43 BlendMode.srcATop

BlendMode.srcIn

顯示源圖像怕膛，但僅顯示兩個圖像重疊的位置熟嫩。目標(biāo)圖像不會渲染，僅將其視為蒙版嘉竟。將忽略目標(biāo)的顏色通道邦危，只有不透明度才有效。
要顯示目標(biāo)圖像舍扰，請考慮dstIn邮弹。
要反轉(zhuǎn)掩碼的語義（僅顯示目標(biāo)不存在的源透典，而不是存在的位置），請考慮srcOut。
這對應(yīng)于“目的地來源”Porter-Duff運算符俄烁。
效果圖如下：

圖44 BlendMode.srcIn

BlendMode.srcOut

顯示源圖像铺坞，但僅顯示兩個圖像不重疊的位置。目標(biāo)圖像不會渲染，僅將其視為蒙版聊疲。將忽略目標(biāo)的顏色通道，只有不透明度才有效沪悲。
要顯示目標(biāo)圖像获洲，請考慮dstOut。
要反轉(zhuǎn)掩碼的語義（僅顯示目標(biāo)所在的源殿如，而不是缺少的位置）贡珊，請考慮srcIn。
這對應(yīng)于“Source out Destination”Porter-Duff運算符涉馁。
效果圖如下：

圖45 BlendMode.srcOut

BlendMode.srcOver

將源圖像合成到目標(biāo)圖像上门岔。
這是默認(rèn)值。它代表了最直觀的情況烤送，其中形狀被繪制在下面的內(nèi)部寒随，透明區(qū)域顯示目標(biāo)層。
這對應(yīng)于“Source over Destination”Porter-Duff運算符帮坚，也稱為Painter算法妻往。
效果圖如下：

圖46 BlendMode.srcOver

BlendMode.xor

將按位xor運算符應(yīng)用于源圖像和目標(biāo)圖像。這會留下重疊的透明度试和。
這對應(yīng)于“Source xor Destination”Porter-Duff運算符蒲讯。
效果圖如下：

圖47 BlendMode.xor

七、fit Property

如何將圖片放在盒子里灰署。fit屬性的值是枚舉類型的BoxFit判帮。

contain
cover
fill
fitHeight
fitWidth
none
scaleDown

代碼如下：

//fit Property
class fit_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage("http://jlouage.com/images/author.jpg"),
                fit: BoxFit.contain
            )
          ),
        ),
      ),
    );
  }
}

contain

在子類寬高比不變的前提下，子類盡可能的大溉箕，充滿父類晦墙。一般情況下，寬度或者高度達(dá)到最大值時肴茄，就會停止縮放晌畅。

圖48 contain

cover

圖像應(yīng)該盡可能小，但覆蓋整個渲染框寡痰。所以小圖片會被放大拉伸抗楔，直至覆蓋整個渲染框。如果圖片大于渲染框拦坠，圖片會顯示部分连躏。

圖49 cover

fill

圖片會去適應(yīng)當(dāng)前渲染框，調(diào)整自身大小贞滨，充滿整個屏幕入热。

圖50 fill

fitHeight

高度要充滿屏幕，無論寬度方向上，圖片是否會溢出勺良。

圖51 fitHeight

fitWidth

寬度要充滿屏幕绰播，無論高度方向上，圖片是否會溢出尚困。

圖52 fitWidth

none

圖片按照原圖展示蠢箩，不進(jìn)行任何縮放，超出父類的部分會被裁剪掉事甜。保證圖片居中顯示忙芒。

圖53 none

scaleDown

調(diào)整圖片，讓圖片居中顯示讳侨。如果需要縮小圖片(同比例縮放)，則與contain相同奏属，否則與none相同跨跨。

圖54 scaleDown

八、repeat Property

noRepeat
repeat
repeatX
repeatY

noRepeat

讓Container未覆蓋部分保持透明囱皿，只會出現(xiàn)一張圖片勇婴。

代碼如下：

//repeat Property
class repeat_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("images/JL-Logo-150.png"),
                repeat: ImageRepeat.noRepeat,
                //repeat: ImageRepeat.repeat,
                //repeat: ImageRepeat.repeatX,
                //repeat: ImageRepeat.repeatY
            )
          ),
        ),
      ),
    );
  }
}

效果圖如下：

圖55 noRepeat

repeat

在x和y方向上重復(fù)圖像，直到填充滿容器嘱腥。

代碼如下：

//repeat Property
class repeat_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("images/JL-Logo-150.png"),
                //repeat: ImageRepeat.noRepeat,
                repeat: ImageRepeat.repeat,
                //repeat: ImageRepeat.repeatX,
                //repeat: ImageRepeat.repeatY
            )
          ),
        ),
      ),
    );
  }
}

效果圖如下：

圖56 repeat

repeatX

沿x方向重復(fù)圖像耕渴，直到水平填充滿容器。

代碼如下：

//repeat Property
class repeat_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("images/JL-Logo-150.png"),
                //repeat: ImageRepeat.noRepeat,
                //repeat: ImageRepeat.repeat,
                repeat: ImageRepeat.repeatX,
                //repeat: ImageRepeat.repeatY
            )
          ),
        ),
      ),
    );
  }
}

效果圖如下：

圖56 repeatX

repeatY

沿y方向重復(fù)圖像齿兔，直到垂直填充滿容器橱脸。

代碼如下：

//repeat Property
class repeat_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("images/JL-Logo-150.png"),
                //repeat: ImageRepeat.noRepeat,
                //repeat: ImageRepeat.repeat,
                //repeat: ImageRepeat.repeatX,
                repeat: ImageRepeat.repeatY
            )
          ),
        ),
      ),
    );
  }
}

效果圖如下：

圖57 repeatY

九、matchTextDirection Property

決定圖片是否根據(jù)TextDirection設(shè)置進(jìn)行變換分苇。它的值是true或false添诉。

這個屬性需要配合Directionality使用。

如果當(dāng)前是TextDirection.ltr医寿，matchTextDirection設(shè)置位true栏赴，那么圖片將從原點的左上方開始繪制(圖片正常繪制的方向)。
如果當(dāng)前是TextDirection.rtl靖秩，matchTextDirection設(shè)置位true须眷，那么圖片將從原點的右上方開始繪制，圖片進(jìn)行反轉(zhuǎn)沟突。
代碼如下：

//matchTextDirection Property
//配合Directionality
class matchTextDirection_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.white,
        child: Directionality(
            textDirection: TextDirection.rtl,
            child: Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage("images/icon1.png"),
                  matchTextDirection: true,
                )
              ),
            )
        ),
      ),
    );
  }
}

效果圖如下：

圖58 matchTextDirection

十花颗、Border Property

在背景color、gradient或image上面繪制邊框惠拭。

Border Property 可以取值為 Border Class捎稚、Border.all、BorderDirectional Class。

其中Border和BorderDirectional可以用于設(shè)置特定邊界邊框今野。
Border.all用于設(shè)置所有邊框葡公。

這里先介紹Border.all屬性，它有3個參數(shù)：

color：設(shè)置顏色
width：邊框?qū)挾?/li>
style：邊界風(fēng)格条霜，這里主要有2個風(fēng)格：BorderStyle.solid 和BorderStyle.none催什。
代碼如下：

//Border Property
class Border_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300.0,
        height: 300.0,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.green,
              width: 5.0,
              style: BorderStyle.solid
            ),
            image: DecorationImage(
               image:AssetImage("images/JL-Logo-150.png")
             )    
          ),
        ),
      ),
    );
  }
}

效果圖如下：

圖59 Border Property

現(xiàn)在我們使用Border Class代替Border.all。Border Class總共有4個參數(shù)top宰睡，bottom蒲凶，left， right拆内。每個參數(shù)的值是BorderSide Class旋圆。
代碼如下：

//Border Property
//Border
class Border_Border_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300.0,
        height: 300.0,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            border: Border(
              top: BorderSide(
                color: Colors.green,
                width: 5.0,
                style: BorderStyle.solid
              )
            ),
            image: DecorationImage(
                image:AssetImage("images/JL-Logo-150.png")
            )
          ),
        ),
      ),
    );
  }
}

效果圖如下：

圖60 Border

現(xiàn)在使用一下BorderDirectional。
BorderDirectional和Border Class類似麸恍，有4個參數(shù)灵巧，但是沒有l(wèi)eft和right，取而代之的是start和end抹沪。
代碼如下：

//Border Property
//BorderDirectional
class Border_BorderDirectional_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 300,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            border: BorderDirectional(
              top: BorderSide(
                color: Colors.green,
                width: 5.0,
                style: BorderStyle.solid
              ),
              start: BorderSide(
                color: Colors.green,
                width: 5.0,
                style: BorderStyle.solid
              )
            ),
            image: DecorationImage(
              image:AssetImage("images/JL-Logo-150.png")
            )    
          ),
        ),
      ),
    );
  }
}

效果圖如下：

圖61 BorderDirectional

十一刻肄、borderRadius Property

如果你想容器四周出現(xiàn)圓角，你可以使用borderRadius融欧。

注意:borderRadius只適用于矩形形狀的盒子敏弃。

對應(yīng)的取值是BorderRadius.all、BorderRadius.only噪馏、BorderRadius.circular麦到、BorderRadius.horizontal、BorderRadius.vertical欠肾。

同樣你可以使用BorderRadiusDirectional代替BorderRadius隅要，但是參數(shù)里面會將left和right替換為start和end。

BorderRadius.all

代碼如下：

//borderRadius Property
//BorderRadius.all
class borderRadius_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300.0,
        height: 300.0,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.green,
              width: 5.0,
              style: BorderStyle.solid
            ),
            borderRadius:BorderRadius.all(Radius.circular(20.0)),
            image: DecorationImage(
                image:AssetImage("images/JL-Logo-150.png")
            )
          ),
        ),
      ),
    );
  }
}

效果圖如下：

圖62 Border.all

現(xiàn)在來使用一下BorderRadius.circular
代碼如下董济；

//borderRadius Property
//BorderRadius.circular
class borderRadius_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300.0,
        height: 300.0,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.green,
              width: 5.0,
              style: BorderStyle.solid
            ),
            //borderRadius:BorderRadius.all(Radius.circular(20.0)),
            borderRadius:BorderRadius.circular(20.0),
            image: DecorationImage(
                image:AssetImage("images/JL-Logo-150.png")
            )
          ),
        ),
      ),
    );
  }
}

效果圖如下：

圖63 BorderRadius.circular

由上面圖可以知道步清，BorderRadius.circular和BorderRadius.all效果一致，不過BorderRadius.circular可以直接輸入浮點型數(shù)據(jù)虏肾。

BorderRadius.horizontal

BorderRadius.horizontal會創(chuàng)建一個水平對稱的邊框半徑廓啊，其中矩形框的左右兩側(cè)具有相同的半徑。
代碼如下：

//borderRadius Property
//BorderRadius.horizontal
class BorderRadius_horizontal_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300.0,
        height: 300.0,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.green,
              width: 5.0,
              style: BorderStyle.solid
            ),
            borderRadius: BorderRadius.horizontal(
              left: Radius.circular(20.0),
              //right: new Radius.circular(20.0),
            ),
            image: DecorationImage(
                image: AssetImage("images/JL-Logo-150.png")
            )
          ),
        ),
      ),
    );
  }
}

效果圖如下：

圖64 BorderRadius.horizontal

BorderRadius.vertical

BorderRadius.vertical會創(chuàng)建一個垂直對稱的邊框半徑封豪，其中矩形的上下兩側(cè)具有相同的半徑
代碼如下：

//borderRadius Property
//BorderRadius.vertical
class BorderRadius_vertical_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300.0,
        height: 300.0,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.green,
              width: 5.0,
              style: BorderStyle.solid
            ),
            borderRadius: BorderRadius.vertical(
              top: Radius.circular(20.0),
              //bottom: new Radius.circular(20.0),
            ),
            image: DecorationImage(
                image: AssetImage("images/JL-Logo-150.png"),
            )  
          ),
        ),
      ),
    );
  }
}

效果圖如下：

圖65 BorderRadius.vertical

BorderRadius.only

BorderRadius.only僅創(chuàng)建包含非零值的邊框半徑谴轮。其它角則是直角。
代碼如下：

//borderRadius Property
//BorderRadius.only
class BorderRadius_only_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300.0,
        height: 300.0,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.green,
              width: 5.0,
              style: BorderStyle.solid
            ),
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20.0),
              //topRight: Radius.circular(20.0),
              bottomRight: Radius.circular(20.0),
              //bottomLeft: Radius.circular(20.0),
            ),
            image: DecorationImage(
                image:AssetImage("images/JL-Logo-150.png")
            )  
          ),
        ),
      ),
    );
  }
}

效果圖如下：

圖66 BorderRadius.only

另外吹埠，你也可以使用Radius.elliptical代替Radius.circular第步。Radius.elliptical有2個參數(shù)(x疮装，y)。
代碼如下：

//borderRadius Property
//Radius.elliptical
class Radius_elliptical_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
          width: 300.0,
          height: 300.0,
          color: Colors.white,
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.green,
                width: 5.0,
                style: BorderStyle.solid
              ),
              borderRadius: BorderRadius.only(
                 topLeft: Radius.elliptical(40.0, 10.0),
                 //topRight: Radius.circular(20.0),
                 bottomRight: Radius.circular(20.0),
                 //bottomLeft: Radius.circular(20.0),
              ),
              image: DecorationImage(
                  image:AssetImage("images/JL-Logo-150.png")
              )
            ),
          ),
        ),
    );
  }
}

效果圖如下：

圖67 Radius.elliptical

十二粘都、boxShadow Property

這個用于設(shè)置盒子的陰影廓推，這個陰影和盒子的形狀保持一致。
boxShadow的值是一個包含BoxShadow的列表翩隧。你可以在列表中使用multiple BoxShadow樊展。

BoxShadow有下面4個參數(shù)

color：陰影的顏色
offset：陰影相對于盒子的偏移量
blurRadius：高斯的標(biāo)準(zhǔn)偏差與盒子的形狀卷積。
spreadRadius：在應(yīng)用模糊之前堆生，框應(yīng)該膨脹的量专缠。

第一個例子我們使用color和offset。
offset參數(shù)的值是一個Offset類淑仆，并且有2個浮點型參數(shù)x和y涝婉。
代碼如下：

//boxShadow Property
//color和offset
class boxShadow_colorAndoffset_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 200.0,
        height: 200.0,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(
              color: Colors.green,
              width: 5.0,
              style: BorderStyle.solid
            ),
            borderRadius: BorderRadius.only(
              topLeft: Radius.elliptical(40.0, 10.0),
              bottomLeft: Radius.circular(20.0),
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.red,
                offset: Offset(20.0, 10.0)
              )
            ],
            image: DecorationImage(
                image:AssetImage("images/JL-Logo-150.png")
            )
          ),
        ),
      ),
    );
  }
}

效果圖如下：

圖68 boxShadow

上圖我們將陰影沿X軸平移20，沿Y軸平移10蔗怠。這個陰影是實體的墩弯。

這里我們添加blurRadius屬性，讓它成為一個真正的陰影蟀淮。
代碼如下：

//boxShadow Property
//blurRadius
class boxShadow_blurRadius_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300.0,
        height: 300.0,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(
              color: Colors.green,
              width: 5.0,
              style: BorderStyle.solid
            ),
            borderRadius: BorderRadius.only(
              topLeft: Radius.elliptical(40.0, 10.0),
              bottomLeft: Radius.circular(20.0),
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.red,
                offset: Offset(20.0, 10.0),
                blurRadius: 20.0,
              )
            ],
            image: DecorationImage(
                image: AssetImage("images/JL-Logo-150.png")
            )
          ),
        ),
      ),
    );
  }
}

效果圖如下：

圖69 blurRadius

現(xiàn)在將陰影進(jìn)一步擴(kuò)散。我們將使用spreadRadius钞澳。
代碼如下：

//boxShadow Property
//spreadRadius
class boxShadow_spreadRadius_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300.0,
        height: 300.0,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(
              color: Colors.green,
              width: 5.0,
              style: BorderStyle.solid
            ),
            borderRadius: BorderRadius.only(
              topLeft: Radius.elliptical(40.0, 10.0),
              bottomLeft: Radius.circular(20.0),
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.red,
                offset: Offset(20.0, 10.0),
                blurRadius: 20.0,
                spreadRadius: 40.0,
              )
            ],
            image: DecorationImage(
                image:AssetImage("images/JL-Logo-150.png")
            )
          ),
        ),
      ),
    );
  }
}

效果圖如下：

圖70 spreadRadius

現(xiàn)在我們使用多種BoxShadow怠惶。
代碼如下：

//boxShadow Property
//multiple BoxShadow
class boxShadow_multipleAndBoxShadow_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300.0,
        height: 300.0,
        color: Colors.white,
        child: Container(
          decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(
                  color: Colors.green,
                  width: 5.0,
                  style: BorderStyle.solid
              ),
              borderRadius: BorderRadius.only(
                topLeft: Radius.elliptical(40.0, 10.0),
                bottomLeft: Radius.circular(20.0),
              ),
              boxShadow: [
                BoxShadow(
                  color: Colors.red,
                  offset: Offset(20.0, 10.0),
                  blurRadius: 20.0,
                  spreadRadius: 40.0,
                ),
                BoxShadow(
                  color: Colors.yellow,
                  offset: Offset(20.0, 10.0),
                  blurRadius: 20.0,
                  spreadRadius: 20.0,
                ),
                BoxShadow(
                  color: Colors.green,
                  offset: Offset(10.0, 5.0),
                  blurRadius: 20.0,
                  spreadRadius: 5.0,
                )
              ],
              image: DecorationImage(
                  image:AssetImage("images/JL-Logo-150.png")
              )
          ),
        ),
      ),
    );
  }
}

效果圖如下：

圖71 multiple BoxShadow

十三、shape Property

用于設(shè)置圖片形狀轧粟。
shape屬性值是枚舉類型的BoxShape策治。

BoxShape.rectangle
BoxShape.circle
注意:如果值是BoxShape.circle，那么borderRadius將無效兰吟。
代碼如下：

//shape Property
class shape_Property_Widget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300.0,
        height: 300.0,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(
              color: Colors.green,
              width: 5.0,
              style: BorderStyle.solid
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.red,
                offset: Offset(20.0, 10.0),
                blurRadius: 20.0,
                spreadRadius: 40.0
              )
            ],
            shape: BoxShape.circle,
            image: DecorationImage(
                image: AssetImage("images/JL-Logo-150.png")
            )
          ),
        ),
      ),
    );
  }
}

效果圖如下：

圖72 shape

十四通惫、Padding Property

請查看Flutter之Container用法詳解。

參考文章

Flutter?—?BoxDecoration Cheat Sheet

Flutter之BoxDecoration用法詳解

前言

介紹：

一酬核、Gradient Property

二殉了、TileMode property

TileMode.clamp 是默認(rèn)的渲染方式

TileMode.mirror

TileMode.repeated

Stops

三续挟、RadialGradient

四、Image Property

image

五佃蚜、centerSlice Property

六现喳、ColorFilter Property

BlendMode.src

BlendMode.clear

BlendMode.color

BlendMode.colorBurn

BlendMode.colorDodge

BlendMode.darken

BlendMode.difference

BlendMode.dst

BlendMode.dstATop

BlendMode.dstIn

BlendMode.dstOut

BlendMode.dstOver

BlendMode.exclusion

BlendMode.hardLight

BlendMode.hue

BlendMode.lighten

BlendMode.luminosity

BlendMode.modulate

BlendMode.multiply

BlendMode.overlay

BlendMode.plus

BlendMode.saturation

BlendMode.screen

BlendMode.softLight

BlendMode.srcATop

BlendMode.srcIn

BlendMode.srcOut

BlendMode.srcOver

BlendMode.xor

七、fit Property

contain

cover

fill

fitHeight

fitWidth

none

scaleDown

八、repeat Property

noRepeat

repeat

repeatX

repeatY

九、matchTextDirection Property

十花颗、Border Property

十一刻肄、borderRadius Property

BorderRadius.all

BorderRadius.horizontal

BorderRadius.vertical

BorderRadius.only

十二粘都、boxShadow Property

十三、shape Property

十四通惫、Padding Property

參考文章