Flutter笔记:Widgets Easier组件库(2)阴影盒子

Flutter笔记
Widgets Easier组件库(2):阴影盒子

- 文章信息 - Author: 李俊才 (jcLee95)
Visit me at CSDN: https://jclee95.blog.csdn.net
My WebSitehttp://thispage.tech/
Email: 291148484@163.com.
Shenzhen China
Address of this article:https://blog.csdn.net/qq_28550263/article/details/138342794
HuaWei:https://bbs.huaweicloud.com/blogs/426710

组件库地址

  • Pub.Dev:https://pub.dev/packages/widgets_easier
  • GitHub:https://github.com/jacklee1995/widgets_easier

【介绍】:本文介绍 Flutter Widgets Easier组件库中阴影盒子的用法。

flutter-ljc


上一节:《 Widgets Easier组件库(1)使用边框 | 下一节:《 Widgets Easier组件库(3)使用按钮


1. 概述

1.1 关于Widgets Easier

本库是一个 Flutter 组件库,旨在提供用于Flutter开发的组件,使得开发者能够更简单地构建出更丰富地界面效果。项目地址为:

  • https://github.com/jacklee1995/widgets_easier

  • https://pub.dev/packages/widgets_easier

1.2 模块安装

在你的Flutter项目中,运行下面的命令:

flutter pub add widgets_easier

即可安装最新版本的 Widgets Easier 库。

2. 阴影盒子用法

2.1 阴影盒子介绍

受启发于 Element-PlusWidgets Easier 组件库中,提供了特定阴影效果。这些阴影效果能够以组件的方式为其它的组件添加相对应的影音效果。

Element-Plus 类似, 在 Widgets Easier 库中,典型的阴影效果被封装为以下四个组件:BasicShadowLightShadowLighterShadowDarkShadow,每个组件都使用 DecoratedBox 来实现特定的阴影效果。

在这里插入图片描述

2.2 BasicShadow

BasicShadow 是一个提供基本阴影效果的组件。它使用 DecoratedBox 来实现阴影,适用于需要轻微突出显示的元素。这种阴影效果不太强烈,但足以给元素添加一些深度和立体感。

BasicShadow(child: Container(height: 100,width: 100,color: Colors.white,child: const Center(child: Text('BasicShadow'),),),
)

2.3 LightShadow

LightShadow 提供的是比 BasicShadow 更轻的阴影效果。它同样使用 DecoratedBox,阴影更加细微,适合不需要太多突出但又想有细微区分的界面元素。

LightShadow(child: Container(height: 100,width: 100,color: Colors.white,child: const Center(child: Text('LightShadow'),),),
)

2.4 LighterShadow

LighterShadow 是四种阴影中最轻的一种。它几乎不可见,只在必要时提供最轻微的阴影效果,适用于极为细腻的用户界面设计,其中每一个细节都需要精心处理。

LighterShadow(child: Container(height: 100,width: 100,color: Colors.white,child: const Center(child: Text('LighterShadow'),),),
)

2.5 DarkShadow

DarkShadow 提供的是最强烈的阴影效果,使用 DecoratedBox 实现。这种阴影适用于需要明显区分的元素,可以显著提升元素的视觉层次感和吸引用户的注意力。

DarkShadow(child: Container(height: 100,width: 100,color: Colors.white,child: const Center(child: Text('DarkShadow'),),),
)

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

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

相关文章

SpringBoot之自定义注解参数校验

SpringBoot之自定义注解参数校验 为什么要自定义注解 我这里先引入一个例子,就比如我现在要写文章,文章也许写完正要发布,也可以是还没写完正要存草稿,前端往后端发送数据,如果前端的state不是草稿或者已发布状态&…

vue3、element-plus递归实现动态菜单

vue3、element-plus递归实现动态菜单 使用场景:动态菜单为什么使用递归递归在动态菜单中的实现 使用场景:动态菜单 动态菜单是指菜单项的数量和层次结构可能是动态的,通常来自后端或用户输入。这些菜单的特征包括: 多层嵌套&…

笔记-PPT绘图导出高清无失真图片

问题描述:PPT绘图已经用了高清图(jpg、tif格式),但论文图片还是不清晰,打印出来还是有点糊 以下是PPT导出高清不失真图片(emf格式)的具体描述。 目录 一、绘图工具二、操作步骤 一、绘图工具 …

SSH远程登录实操实验!

ssh远程登录协议:默认端口号22 以下实验7-2是服务端,7-1是客户端 服务器的相关信息: 服务名称:sshd 服务端主程序:/usr/sbin/sshd 服务端配置文件:/etc/ssh/sshd_config 客户端相关信息: …

SQL如何利用Bitmap思想优化array_contains()函数

目录 0 问题描述 1 位图思想 2 案例实战 3 小结 0 问题描述 在工作中,我们往往使用array_contains()函数来进行存在性问题分析,如判断某个数是否在某个数组中,但是当表数据量过多,存在大量array_contains()函数时,…

未来已来:深入探索LLAMA3驱动的人工智能革命

大家好!相信大家对于AI(人工智能)的发展已经有了一定的了解,但你是否意识到,到了2024年,AI已经变得如此强大和普及,带来了我们从未想象过的便利和创新呢?让我们一起来看看AI在这个时…

Open CASCADE学习|BRepFill_SectionPlacement

BRepFill_SectionPlacement 是一个与计算机辅助设计(CAD)相关的术语,通常用于指代一个几何对象或操作,它是Open CASCADE Technology(OCCT)中的一个类。Open CASCADE Technology是一个开源的CAD内核&#xf…

HOOPS Exchange导入数据时如何使用CATIA缓存选项?

1、什么是CATIA缓存选项和CGR文件? CATIA V5默认的工作方式是加载几何图形。加载大型程序集时,这可能会导致性能下降,因为所需的内存很重要。 在这种情况下,我们可能需要使用缓存选项。这将生成仅包含曲面细分数据而不包含几何图…

图片懒加载:提升网页性能的秘诀

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

Centos7+Hadoop3.3.4+KDC1.15+Ranger2.4.0集成

一、集群规划 本次测试采用3台虚拟机,操作系统版本为centos7.6。 kerberos采用默认YUM源安装,版本为:1.15.1-55 Ranger版本为2.4.0 系统用户为ranger:ranger IP地址主机名KDCRanger192.168.121.101node101.cc.localKDC masterRanger Admin…

AI图书推荐:将 ChatGPT和Excel融合倍增工作效率

《将 ChatGPT和Excel融合倍增工作效率》( Hands-on ChatGPT in Excel. Enhance Your Excel Workbooks)由Mitja Martini撰写,旨在教授读者如何将ChatGPT与Excel结合使用,以提升工作效率和创造AI增强的Excel工具。它还提供了Excel中…

Apache DolphinScheduler支持Flink吗?

随着大数据技术的快速发展,很多企业开始将Flink引入到生产环境中,以满足日益复杂的数据处理需求。而作为一款企业级的数据调度平台,Apache DolphinScheduler也跟上了时代步伐,推出了对Flink任务类型的支持。 Flink是一个开源的分…