第二百五十二回

2024-01-08 02:04
文章标签 二百五十 二回

本文主要是介绍第二百五十二回,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 概念介绍
  • 实现方法
  • 示例代码

我们在上一章回中介绍了如何在页面中添加图片相关的内容,本章回中将介绍如何给组件添加阴影.闲话休提,让我们一起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组件添加了阴影效果,因为使用了两个阴影对象,所以会产生混合阴影效果。我在这里就不演示程序的运行结果了,建议大家自己动手去实
践,修改一下颜色,也可以修改阴影的大小,真正体验一下阴影效果。
看官们,与"如何给组件添加阴影"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

这篇关于第二百五十二回的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/581983

相关文章

二百五十九、Java——采集Kafka数据,解析成一条条数据,写入另一Kafka中(一般JSON)

一、目的 由于部分数据类型频率为1s,从而数据规模特别大,因此完整的JSON放在Hive中解析起来,尤其是在单机环境下,效率特别慢,无法满足业务需求。 而Flume的拦截器并不能很好的转换数据,因为只能采用Java方式,从Kafka的主题A中采集数据,并解析字段,然后写入到放在Kafka主题B中 二 、原始数据格式 JSON格式比较正常,对象中包含数组 {     "deviceNo":

第四百九十二回

文章目录 1. 概念介绍2. 使用方法2.1 SegmentedButton2.2 ButtonSegment 3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 我们在上一章回中介绍了"SearchBar组件"相关的内容,本章回中将介绍SegmentedButton组件.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章回中介绍的

每天一个数据分析题(二百五十八)

表结构数据分析工具不自己产生数据而是通过获取其他数据源数据进行分析,表结构数据分析工具获取其他数据源的方式是? A. 引用 B. 应用 C. 复制 D. 汇总 题目来源于CDA模拟题库 点击此处获取答案

每天一个数据分析题(二百五十四)

在大数据时代背景下,我们使用的数据主要包含两种类别,一种称为结构化数据,另一种称为非结构化数据。请问以下哪个选项属于非结构化数据? A. 利润表 B. 短视频 C. 产品库存表 D. 产品进货表 题目来源于CDA模拟题库 点击此处获取答案

一起talk C栗子吧(第一百三十二回:C语言实例--从内存的角度看进程和线程)

各位看官们,大家好,上一回中咱们说的C程序内存布局的例子,这一回咱们说的例子是:从内存的角度看进程和线程。闲话休提,言归正转。让我们一起talk C栗子吧! 看官们,我们刚刚介绍完C程序的内存布局,我们趁热打铁,从内存的角度来分析一下进程和线程。 不管是进程还是线程,他们都会加载到内存中才能运行,因此他们在内存中的布局和其它C程序的内存布局完全相同。进程和线程的内存布局也分为代码区,数据

一起Talk Android吧(第三百零二回:TextView显示长文字)

各位看官们,大家好,上一回中咱们说的是Android中如何正确地退出应用程序的例子,这一回咱们说的例子是TextView显示长文字。闲话休提,言归正转。让我们一起Talk Android吧! 看官们,我们在本系列内容的第五十九回章回中介绍过TextView,不过只介绍了它的基本用法,时间比较长,大家如果忘记的话可以点击这里查看。本章回中我们再谈TextView,主要是介绍如何让它显示长文

第三百九十二回

文章目录 1. 概念介绍2. 方法与细节2.1 实现方法2.2 具体细节 3. 示例代码4. 内容总结 我们在上一章回中介绍了"如何混合选择多个图片和视频文件"相关的内容,本章回中将介绍如何通过相机获取图片文件.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 我们在前面章回中介绍的选择图片或者视频文件的方式都是通过文件窗口进行的,本章回中将介绍如何通过相

第三百八十二回

文章目录 1. 概念介绍2. 使用方法3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 我们在上一章回中介绍了"如何修改按钮的形状"相关的内容,本章回中将介绍NavigationBar组件.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章回中介绍的NavigationBar组件主要用来做底部导航栏,它和我们在前面章回中介绍的Bo

第三百六十二回

文章目录 1. 概念介绍2. 使用方法3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 我们在上一章回中介绍了"如何创建垂直方向的Switch"相关的内容,本章回中将介绍SlideSwitch组件.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 我们在上一章回中提到过SlideSwitch组件,当时只提到它可以通过属性来控制开关的方向,没

第三百零二回

文章目录 1. 概念介绍2. 实现方法2.1 使用Steam实现2.2 使用Timer实现 3. 示例代码4. 内容总结 我们在上一章回中介绍了"如何实现每隔一段时间执行某项目任务"相关的内容,本章回中将介绍如何实现倒计时功能.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 倒计时功能估计大家都熟悉,经常用在一些节目开始或者开奖活动中。程序中也会用到倒计