第二百二十二回

2023-12-24 00:15
文章标签 二十二 第二百

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

我们在上一章回中介绍了"自定义可以滑动的刻度尺"样相关的内容,本章回中将介绍"如何给图片添加阴影".闲话休提,让我们一起Talk Flutter吧。

1. 概念介绍

我们在前面章回中介绍了各种阴影,并且介绍了如何绘制阴影,不过还有一个比较特殊的组件没有阴影,该组件是图片,比如我们在绘制阴影时也无法给图片绘制阴影,
我记得在Android原生开发时可以给图片绘制出阴影效果,但是在Flutter中无法给图片绘制出阴影。不过我们可以给图片添加阴影,本章回中将介绍具体的实现方法。

2. 思路与方法

2.1 实现思路

我们在前面的博客中介绍过一种给组件添加阴影的方法,给图片添加阴影可以借用此方法。总体的思路是在图片外层嵌套一个Container组件,然后通过Container组件
来实现阴影效果,该阴影效果会出现在图片周围,相当于在图片上添加了阴影。

2.2 实现方法

有了实现的思路后,我们将介绍具体的实现方法,详细的步骤如下:

  1. 创建Container组件对象,并且把Image组件赋值给它的child属性;
  2. 创建BoxDecoration对象并且把它赋值给Container组件的decoration属性;
  3. 创建BoxShadow对象,并且把它赋值给BoxDecoration组件的boxShadow属性;
  4. 调整BoxShadow组件的相关属性,控制阴影的大小,位置和颜色;

3. 代码与效果

3.1 示例代码

我们按照刚才介绍的实现方法来给图片添加阴影,下面是详细的代码。

///给图片添加阴影 
Widget buildImageShadow() {return Container(decoration: const BoxDecoration(boxShadow: [BoxShadow(color: Colors.redAccent,blurRadius: 16,blurStyle: BlurStyle.solid,),]),child: const Image(width: 160,height: 100,image: AssetImage("images/panda.jpeg"),fit: BoxFit.fill,filterQuality:FilterQuality.high ,),);
}

3.2 运行效果

编译并且运行上面的代码可以得到以下效果图,从图中可以看到图片的周围有一个红色的阴影。这个阴影就是我们通过代码添加的阴影。大家可以自己动手修改BoxShadow
组件的属性,进而调试出不同颜色,不同位置的阴影效果。强烈建议大家自己去实践。030
此外,这种添加方法还有一个缺点:对于纯色的图片添加阴影效果比较好,对于包含不同颜色的图片添加阴影效果不太好,主要原因是:图片中包含多种颜色,而阴影的颜
色无法和图片中的多种颜色保持一致。

4. 内容总结

最后,我们对本章回的内容做一个全面的总结:

  • 在绘制图片时无法绘制阴影,不过可以给图片添加阴影;
  • 给图片添加阴影通过Container组件和BoxShadow组件来实现;
  • BoxShadow组件可以控制阴影的颜色,范围大小,出现位置等属性;
  • 给纯色图片添加阴影的效果比较好,给包含不同颜色的图片添加的阴影效果不太好;
    看官们,与"如何给图片添加阴影"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

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



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

相关文章

【抽代复习笔记】28-群(二十二):四道子群例题

例1:证明,循环群的子群是循环群。 证:设G = (a),H ≤ G。 (1)若H = {e},则H是一阶循环群; (2)设H至少包含2个元素,即设H = {...,a^(-k),a^(-j),a^(-i),a^0,a^i,a^j,a^k,...}, 其中a^i是H中正指数最小的元素,0<i<j<k, 下证a^i是H的生成元: 对任意的a^t∈H(t∈Z),存在q∈Z,使得t = qi

Flink实战案例(二十二):自定义时间和窗口的操作符(三)CoProcessFunction

CoProcessFunction   对于两条输入流,DataStream API提供了CoProcessFunction这样的low-level操作。CoProcessFunction提供了操作每一个输入流的方法: processElement1()和processElement2()。   类似于ProcessFunction,这两种方法都通过Context对象来调用。这个Conte

【Unity 3D】学习笔记二十二:unity游戏脚本(二)

在开发的时候,得获取游戏对象来进行相关的操作。在unity中,获取对象有三种方式:第一,通过对象名称获取。第二,通过标签获取单个游戏对象。第三,通过相谈标签获取多组游戏对象。 通过对象名称获取对象 在hierarchy视图中添加两个cube,一个名为cube,一个名为cube2和sphere游戏对象。然后将sphere对象拖至object中,表示sphere为object的子对象。然后用

【从问题中去学习k8s】k8s中的常见面试题(夯实理论基础)(二十二)

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》:python零基础入门学习 《python运维脚本》: python运维脚本实践 《shell》:shell学习 《terraform》持续更新中:terraform_Aws学习零基础入门到最佳实战 《k8》从问题中去学习k8s 《docker学习》暂未更新 《ceph学习》ceph日常问题解决分享 《日志收集》ELK

前端宝典二十二:ES6必须掌握的功能和源码实现

在前端宝典二十一中,我们已经一起探讨了Promise\ async\ await,并手写了Promise相关的方法all、race、allSettled、any等。 这一讲我们一起来看ES6其他重点的内容 一、let、const let和const的出现,首先是基于var存在的问题,来解决问题的 var存在的问题: 变量提升无法形成词法作用域可以随意篡改变量值、重复声明 1、let与con

二十二、处理字符串

在go语言中提供了strings包,提供了一套完备的字符串处理函数 1、将字符串转为大小写 s := "egg"val := strings.ToUpper(s)val = strings.ToLower(s) 2、查找字符串 func main() {s := "egg"b := "this is my golang"fmt.Println(strings.Index(s, "g"))f

第二百零九节 Java格式 - Java数字格式类

Java格式 - Java数字格式类 以下两个类可用于格式化和解析数字: java.text.NumberFormatjava.text.DecimalFormat NumberFormat 类可以格式化一个数字特定地区的预定义格式。 DecimalFormat 类可以格式化数字以特定区域设置的自定义格式。 NumberFormat类的 getXXXInstance()方法返回格式化

第二百零四节 Java正则表达式教程 - Java正则表达式量词

Java正则表达式教程 - Java正则表达式量词 我们可以指定正则表达式中的字符的次数可以匹配字符序列。 为了使用正则表达式表达一个数字或更多的模式,我们可以使用量词。 下表列出了量词及其含义。 量词含义*零次或更多次+一次或多次?一次或根本不{m}正好m次{m,}至少m次{m,n}至少m,但不超过n次 量词必须遵循字符或字符类。 例子 import java.util.reg

OpenGL学习笔记(二十二)

目录 光照 光照 现实世界的光照是极其复杂的,而且会受到诸多因素的影响,这是以目前我们所拥有的处理能力无法模拟的。因此OpenGL的光照仅仅使用了简化的模型并基于对现实的估计来进行模拟,这样处理起来会更容易一些,而且看起来也差不多一样。这些光照模型都是基于我们对光的物理特性的理解。其中一个模型被称为冯氏光照模型(Phong Lighting Model)。冯氏光照模型的主要结

【尚庭公寓SpringBoot + Vue 项目实战】移动端浏览历史(二十二)

【尚庭公寓SpringBoot + Vue 项目实战】移动端浏览历史(二十二) 文章目录 【尚庭公寓SpringBoot + Vue 项目实战】移动端浏览历史(二十二)1、业务介绍2.接口开发2.1.分页查询浏览历史列表2.2.保存浏览历史 1、业务介绍 浏览历史指的是浏览房间详情的历史,关于浏览历史,有两项工作需要完成,一是提供一个查询浏览历史列表的接口,二是在浏