本文主要是介绍第三百六十一回,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
文章目录
- 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,),),],
),
上面的示例代码演示了如何实现两种阴影效果,它与上一小节中的实现方法保持一致。在演示环绕阴影效果时一个示例保持默认的位置,另外一个示例调整的阴影的位置,
不过调整后阴影效果仍然出现在组件周围,而不会单独出现在某一个边上。此外,我推荐大家自己动手去实践,通过调整阴影的颜色,位置等内容来体会一下阴影效果。
4. 内容总结
最后,我们对本章回的内容做一个全面的总结:
- 本章回主要介绍了环绕和立体两种阴影效果;
- 环绕阴影效果主要通过Container组件实现;
- 立体阴影效果主要通过Card组件实现;
- 可以调整阴影效果的颜色,范围和位置;
看官们,与"两种阴影效果"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!
这篇关于第三百六十一回的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!