第一百八十回 介绍两种阴影效果

我们在上一章回中介绍了"自定义SlideImageSwitch组件"相关的内容，本章回中将介绍两种阴影效果.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在这里说的渐变色边角是在某个矩形区域的边角上使用渐变色效果，这个边角可以是矩形区域四个边角中的任意一个边角。如果大家不理解的话可以参考下面的效果
图。本章回中将介绍如何去实现下面图形中渐变色边角这样的效果。024Edge.png

2. 实现方法

实现方法主要使用上一章回中介绍的放射形状渐变色，下面是详细的实现步骤，请大家参考：

• 创建一个矩形区域，可以用Container容器组件实现；
• 创建放射形状的渐变色效果，使用RadialGradient组件实现；
• 通过BoxDecoration组件把渐变色效果和矩形区域组合在一起；
• 调整渐变色效果的颜色和半径，可以创建出颜色和大小不同的效果；
• 调整渐变色效果中心位置，这样可以在矩形区域的四个边角中切换渐变效果；
  上面介绍的实现方法中只需要完成前三步就可以，最后两个步骤是为了调整渐变效果和边角位置，进而满足不同的需求。

3. 代码与效果

3.1 示例代码

///放射形渐变
Container(
  width: double.infinity,
  height: 100,
  decoration: const BoxDecoration(
      gradient: RadialGradient(
        colors: [Colors.greenAccent,Colors.redAccent,Colors.amberAccent]
      )
  ),
  child: const SizedBox.shrink(),
),
const Spacer(),
Container(
  width: double.infinity,
  height: 100,
  decoration: const BoxDecoration(
      gradient:RadialGradient(
        ///渐变半径：
        radius: 0.3,
        //渐变位置，主要是中心位置
        center: Alignment.center,
        tileMode: TileMode.repeated,
        colors: [Colors.greenAccent,Colors.redAccent,Colors.amberAccent]
      )
  ),
  child: const SizedBox.shrink(),
),

上面的示例代码中添加了相关的注释，这样方便大家理解代码。示例代码创建了两个渐变色背景，一个是默认的放射形状渐变色背景，另外一个是修改了渐变方式的放射形
状渐变色背景。此外，背景的大小可以通过Container组件的width和height属性来控制。

3.2 运行效果

编译并且运行上面的示例代码可以得到下面的运行效果图。图中上方的图形是默认的放射形状渐变色背景效果，下方的图形是修改了渐变方式的放射形状渐变色背景效果。
强烈建议大家自己动手去实践，通过修改RadialGradient组件的属性可以创建出不同的放射形状渐变效果。

4. 内容总结

最后，我们本章回的内容做一个全面的总结：

• 创建渐变色需要使用BoxDecoration组件和RadialGradient组件；
• RadialGradient组件提供了多种属性来控制放射形状渐变效果；
• 使用Container组件可以充当渐变色的背景；
• 把渐变色和背景组合在一下就形成了渐变色背景；

看官们，与"两种阴影效果"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!