我們在上一章回中介紹了"自定義SlideImageSwitch組件"相關的內容，本章回中將介紹兩種陰影效果.閑話休提，讓我們一起Talk Flutter吧。

1. 概念介紹

我們在本章回中將介紹如何實現兩種陰影效果，一種是環繞在組件周圍的陰影效果，呈發散形狀，該效果可以讓組件有種發光的效果，類似燈或者太陽；另外一種是只出現
在組件下方的陰影效果，該效果可以讓組件呈現出立體的效果。具體的效果可以參考下面的示例圖片，圖片中黃色區域就是陰影：

2. 實現方法

總體來講陰影效果都是通過組件實現的，只是不同的陰影效果使用不同的組件，針對這兩種陰影效果，我們分別介紹它們的實現方法。

2.1 環繞效果

環繞陰影效果通過Container組件實現，該組件配合BoxDecoration組件可以在其它組件周圍添加陰影，Container組件主要負責把組件和陰影組合在一起，通過它
的decoration屬性和child屬性實現組合功能。真正負責陰影效果的是BoxDecoration組件，它通過boxShadow屬性可以組合多個BoxShadow陰影組件，
在BoxShadow組件中可以使用它的屬性控制陰影的顏色，范圍和位置。

• color屬性：主要用來控制陰影的顏色；
• offset屬性：主要用來控制陰影的范圍；
• blurRadius屬性：主要用來控制陰影的范圍；

2.2 立體效果

立體陰影效果通過Card組件實現，該組件通過自己的屬性既可以把陰影效果和其它組件組合在一起，又可以直接控制陰影的效果，下面是相關的屬性：

• child屬性：主要用來把陰影效果和組件組合在一起；
• shadowColor屬性：主要用來控制陰影的顏色；
• elevation屬性：主要用來控制陰影的大小；

3. 示例代碼

///演示兩種陰影效果:BoxDecoration控制的效果在周圍，呈發散形狀。對應180的內容
Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [///正常的陰影,陰影效果在組件周圍四個方向Container(width: 100,height: 100,decoration: const BoxDecoration(color: Colors.blue,boxShadow:[ BoxShadow(color: Colors.yellow,blurRadius: 24.0,),],),),///在正常的陰影的基礎通過offset控制陰影的位置Container(width: 100,height: 100,decoration: const BoxDecoration(color: Colors.blue,boxShadow:[ BoxShadow(color: Colors.yellow,///控制陰影的位置offset: Offset(0, 10),///控制陰影的大小blurRadius: 24.0,),],),),///card的陰影效果只在下方位置，有立體效果，無法控制陰影的位置const Card(color: Colors.blue,shadowColor: Colors.yellow,///控制陰影的大小elevation: 24,child: SizedBox(width: 100,height: 100,),),],
),

上面的示例代碼演示了如何實現兩種陰影效果，它與上一小節中的實現方法保持一致。在演示環繞陰影效果時一個示例保持默認的位置，另外一個示例調整的陰影的位置，
不過調整后陰影效果仍然出現在組件周圍，而不會單獨出現在某一個邊上。此外，我推薦大家自己動手去實踐，通過調整陰影的顏色，位置等內容來體會一下陰影效果。

4. 內容總結

最后，我們對本章回的內容做一個全面的總結：

• 本章回主要介紹了環繞和立體兩種陰影效果；
• 環繞陰影效果主要通過Container組件實現；
• 立體陰影效果主要通過Card組件實現；
• 可以調整陰影效果的顏色，范圍和位置；
  看官們，與"兩種陰影效果"相關的內容就介紹到這里，歡迎大家在評論區交流與討論!