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

talk_8

已于 2023-12-02 11:17:06 修改

阅读量368

点赞数 3

分类专栏：一起Talk Flutter吧文章标签：移动开发flutter 阴影效果 card

于 2023-11-25 23:55:12 首次发布

本文链接：https://blog.csdn.net/talk_8/article/details/134622576

版权

一起Talk Flutter吧专栏收录该内容

707 篇文章 19 订阅

订阅专栏

文章目录

1. 概念介绍
2. 实现方法
- 2.1 环绕效果
- 2.2 立体效果
3. 示例代码
4. 内容总结

我们在上一章回中介绍了"自定义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,),
    ),
  ],
),