第二百五十二回

发布时间:2024年01月08日


我们在上一章回中介绍了如何在页面中添加图片相关的内容,本章回中将介绍如何给组件添加阴影.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

概念介绍

我们在本章回中介绍的阴影类似影子,只是它不像影子那么明显,通常是在组件右下角显示一小部分,用来突出立体效果。在Flutter中我们可以使用BoxShadow组件来
实现阴影效果,不过我们通常会不单独使用使用它,而是和BoxDecoration组件一起配合使用,本章回中将介绍如何使用BoxShadow组件给其它组件添加阴影。

实现方法

在介绍添加阴影的方法前,我们先介绍一下BoxShadow组件的属性,通过这些属性可以控制阴影效果。

  • offset属性:主要用来控制阴影的偏移值,正值表示向下和向右偏移,负值向上和左偏移
  • color属性:主要用来控制阴影的颜色;
  • spreadRadius属性:主要用来控制阴影展开的大小,值越大阴影越大;
  • blurRadius属性:主要用来控制阴影模糊效果的大小,值越大越明显;
    上面是BoxShadow组件的常用属性,不过只掌握这些还不行,我们还需要把它绑定到个某个组件上,绑定方法如下:
  1. 创建Container组件对象;
  2. 创建BoxDecoration对象并且把它赋值给Container组件的decoration属性;
  3. 创建BoxShadow对象,并且把它赋值给BoxDecoration组件的boxShadow属性;
  4. 创建任意一个组件对象,并且把它赋值给Container组件的child属性;
    从上面的步骤中可以看到,我们通过Container组件的child和boxShadow属性把任意的组件和阴影组件(BoxShadow)绑定到了一起,这就相当于给组件添加了阴影。
    此外,oxShadow属性是List类型,可以存放多个对象,也就是说可以把多个阴影对象赋值给该属性,这样就可以实现是混合阴影的效果。

示例代码

介绍完给组件添加阴影的方法后,我们通过具体的代码来演示:

Container(
  width: 60,
  height: 60,
  child:Text("hello"),
  decoration: const BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.green,
    ///可以组合多个BoxShadow,实现混合颜色的效果
    boxShadow: [
      BoxShadow(
        ///控制阴影的偏移值,正值向下和向右偏移,负值向上和左偏移
        offset: Offset(6, 6),
        ///控制出阴影颜色
        color: Colors.red,
        ///控制阴影展开的大小,值越大阴影越大
        spreadRadius: 1.0,
        ///控制模糊的大小
        blurRadius: 8.0,
      ),
      BoxShadow(
        offset: Offset(6, 6),
        color: Colors.black38,
        spreadRadius: 1.0,
        blurRadius: 8.0,
      )
    ]
  ),
);

在上面的代码中,我们给Text组件添加了阴影效果,因为使用了两个阴影对象,所以会产生混合阴影效果。我在这里就不演示程序的运行结果了,建议大家自己动手去实
践,修改一下颜色,也可以修改阴影的大小,真正体验一下阴影效果。
看官们,与"如何给组件添加阴影"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

文章来源:https://blog.csdn.net/talk_8/article/details/135445976
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。