第三百六十回

文章目录

  • 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组件实现;
  • 可以调整阴影效果的颜色,范围和位置;
    看官们,与"两种阴影效果"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/696485.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式-创建型模式-原型模式

原型模式(Prototype Pattern):使用原型实例指定创建对象的种类,并且通过克隆这些原型创建新的对象。原型模式是一种对象创建型模式。原型模式其实就是从一个对象再创建另外一个可定制的对象,而且不需知道任何创建的细节…

微信小程序开发学习笔记——2.8媒体组件image的src三种引入方式

>>跟着b站up主“咸虾米_”学习微信小程序开发中,把学习记录存到这方便后续查找。 课程连接: https://www.bilibili.com/video/BV19G4y1K74d?p11 image:https://developers.weixin.qq.com/miniprogram/dev/component/image.html 一…

如何在Python中执行Shell脚本?

Python执行Shell命令 1、背景概述2、Python集成Shell及数据交互 1、背景概述 Python作为一种强大的脚本语言,其易用性和灵活性使得它成为自动化任务的理想选择。在Python中执行Shell脚本可以实现一些操作系统级的功能,使程序更加灵活、易理解和易维护 在…

Redis-内存管理

Redis是基于内存存储的,非关系型,键值对数据库。因此,对Redis来说,内存空间的管理至关重要。那Redis是如何内存管理的呢? 一、最大内存限制 Redis 提供了 maxmemory 参数允许用户设置 Redis 可以使用的最大内存大小。…

js设计模式:依赖注入模式

作用: 在对象外部完成两个对象的注入绑定等操作 这样可以将代码解耦,方便维护和扩展 vue中使用use注册其他插件就是在外部创建依赖关系的 示例: class App{constructor(appName,appFun){this.appName appNamethis.appFun appFun}}class Phone{constructor(app) {this.nam…

Elastic Search:构建语义搜索体验

当你逐步熟悉 Elastic 时,你将使用 Elasticsearch Relevance Engine™ (ESRE),该引擎旨在为 AI 搜索应用程序提供支持。 借助 ESRE,你可以利用一套开发人员工具,包括 Elastic 的文本搜索、向量数据库和我们用于语义搜索的专有转换…

ngnix网站服务详解

一 Nginx的简介 1 Nginx: ①Nginx 是开源、高性能、高可靠的 Web 和反向代理服务器,而且支持热部署,几乎可以做到 7 * 24 小时不间断运行,即使运行几个月也不需要重新启动,还能在不间断服务的情况下对软件版本进行热…

2月22日作业,按键中断LED灯控制

1.使用GPIO子系统&#xff0c;编写LED驱动&#xff0c;应用程序测试 mychrdev.c #include <linux/init.h> #include <linux/module.h> #include <linux/fs.h> #include <linux/uaccess.h> #include <linux/io.h> #include <linux/of.h> …

微软Azure OpenAI的 GPT 接口使用小结

直接使用OpenAI的 GPT服务&#xff0c;在国内环境使用上会一些相关问题&#xff0c;微软提供了OpenAI的服务&#xff0c;基本上可以满足的相关的需要。下面提供一些简单的使用操作&#xff0c;来让你快速使用到 GPT 的服务。 前提&#xff1a;注册Azure的账户&#xff0c;并绑…

OpenCV中的normalize函数以及NORM_MINMAX、NORM_INF、NORM_L1、NORM_L2具体应用介绍

在OpenCV中&#xff0c;normalize函数用于将图像或矩阵的值规范化到一个特定的范围内。这在图像处理中非常有用&#xff0c;比如在调整图像的对比度、准备数据进行机器学习处理时。规范化可以提高不同图像之间的可比性&#xff0c;或是为了满足特定算法对数据范围的要求。 nor…

数的反码和补码表示

2.反码 反码的表示方法是: 正数的反码是其本身负数的反码是在其原码的基础上,符号位不变&#xff0c;其余各个位取反 [1][000000011原[000000011反[-1][10000001]原[11111110]反 3.补码 补码的表示方法是: 正数的补码就是其本身 负数的补码是在其原码的基础上,符号位不变,其余各…

36、IO进程线程/进程和线程之间的通信练习

一、使用有名管道完成两个进程的相互通信(提示&#xff1a;可以使用多进程或多线程完成)。 代码1&#xff1a;创建两个有名管道文件 #include<myhead.h>int main(int argc, const char *argv[]) {if(mkfifo("./mingtohua",0664)-1)//创建小明向小华发信息的管…

Stable Diffusion 绘画入门教程(webui)-ControlNet(深度Depth)

上篇文章介绍了线稿约束&#xff0c;这篇文章介绍下深度Depth 文章目录 一、选大模型二、写提示词三、基础参数设置四、启用ControlNet 顾名思义&#xff0c;就是把原图预处理为深度图&#xff0c;而深度图可以区分出图像中各元素的远近关系&#xff0c;那么啥事深度图&#xf…

c/c++ | 字符串函数总结 | 为什么总喜欢纠结sizeof 和strlen 呢?

其实时间长了&#xff0c;稍微研究后&#xff0c;再来品味&#xff0c;别有一番滋味 总是看着混乱&#xff0c;但是静下来看&#xff0c;还是能琢磨透的&#xff0c;只是看着复杂&#xff0c;本质是两套风格&#xff0c;然后又要有交集&#xff0c;所以就看起来复杂 // 首先字符…

目标管理SMART原则

SMART原则是一种目标管理方法&#xff0c;它包括以下五个要素&#xff1a; 具体性&#xff08;Specific&#xff09;&#xff1a;目标应该是明确的&#xff0c;具体地说明要达成的行为标准。例如&#xff0c;一个目标可能描述为“减少客户投诉率”&#xff0c;而不是“增强客户…

本机防攻击简介

定义 在网络中&#xff0c;存在着大量针对CPU&#xff08;Central Processing Unit&#xff09;的恶意攻击报文以及需要正常上送CPU的各类报文。针对CPU的恶意攻击报文会导致CPU长时间繁忙的处理攻击报文&#xff0c;从而引发其他业务的中断甚至系统的中断&#xff1b;大量正常…

惠尔顿 网络安全审计系统 任意文件读取漏洞复现

0x01 产品简介 惠尔顿网络安全审计产品致力于满足军工四证、军工保密室建设、国家涉密网络建设的审计要求&#xff0c;规范网络行为&#xff0c;满足国家的规范&#xff1b;支持1-3线路的internet接入、1-3对网桥&#xff1b;含强大的上网行为管理、审计、监控模块&#xff1b…

【2024软件测试面试必会技能】Requests(5):Requests模块_设置代理

设置代理 代理&#xff08;英语&#xff1a;Proxy&#xff09;&#xff0c;也称网络代理&#xff0c;是一种特殊的网络服务&#xff0c;英文全称是&#xff08;Proxy Server&#xff09;&#xff0c;其功 能就是代理网络用户去取得网络信息。形象的说&#xff1a;它是网络信息…

正向代理和反向代理释义

代理 客户端 代理 服务端 对客户端而言&#xff0c;代理是服务端&#xff1b;对服务端而言&#xff0c;代理是客户端。这个很好理解吧&#xff0c;以祖孙三代关系为例&#xff0c;爸爸在儿子面前是爸爸&#xff0c;爸爸在爷爷面前是儿子。 无论是正向代理还是反向代理&#…

Android14 InputManager-ANR原理

目标窗口查找时&#xff0c;作为派发目标的窗口必须已经准备好接收新的输入事件&#xff0c;否则判定窗口处于未响应状态&#xff0c;终止事件的派发过程&#xff0c;并在一段时间后再试。倘若5s后窗口仍然未准备好接收输入事件&#xff0c;将导致ANR。直接引发ANR的原因有很多…