文章目录
- 概念介绍
- 实现方法
- 示例代码
我们在上一章回中介绍了如何在页面中添加图片相关的内容,本章回中将介绍如何给组件添加阴影.闲话休提,让我们一起Talk Flutter吧。
概念介绍
我们在本章回中介绍的阴影类似影子,只是它不像影子那么明显,通常是在组件右下角显示一小部分,用来突出立体效果。在Flutter中我们可以使用BoxShadow组件来
实现阴影效果,不过我们通常会不单独使用使用它,而是和BoxDecoration组件一起配合使用,本章回中将介绍如何使用BoxShadow组件给其它组件添加阴影。
实现方法
在介绍添加阴影的方法前,我们先介绍一下BoxShadow组件的属性,通过这些属性可以控制阴影效果。
- offset属性:主要用来控制阴影的偏移值,正值表示向下和向右偏移,负值向上和左偏移
- color属性:主要用来控制阴影的颜色;
- spreadRadius属性:主要用来控制阴影展开的大小,值越大阴影越大;
- blurRadius属性:主要用来控制阴影模糊效果的大小,值越大越明显;
上面是BoxShadow组件的常用属性,不过只掌握这些还不行,我们还需要把它绑定到个某个组件上,绑定方法如下:
- 创建Container组件对象;
- 创建BoxDecoration对象并且把它赋值给Container组件的decoration属性;
- 创建BoxShadow对象,并且把它赋值给BoxDecoration组件的boxShadow属性;
- 创建任意一个组件对象,并且把它赋值给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组件添加了阴影效果,因为使用了两个阴影对象,所以会产生混合阴影效果。我在这里就不演示程序的运行结果了,建议大家自己动手去实
践,修改一下颜色,也可以修改阴影的大小,真正体验一下阴影效果。
看官们,与"如何给组件添加阴影"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!