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

ops/2024/9/22 21:36:23/
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.ppmy.cn/ops/26096.html

相关文章

算法~本质

仅做一些笔记 数据结构分为数组和链表,数据结构的目的是提升增删改查的效率。算法的本质是基于这两种数据结构进行高效穷举。(1.如何穷举?--递归/dp。2.如何聪明地穷举?--并查集/贪心/KMP) 单链表--双指针 数组--二…

分享一份物联网 SAAS 平台架构设计

一、架构图**** 二、Nginx**** 用于做服务的反向代理。 三、网关**** PaaS平台所有服务统一入口,包含token鉴权功能。 四、开放平台**** 对第三方平台开放的服务入口。 五、MQTT**** MQTT用于设备消息通信、内部服务消息通信。 六、Netty**** Socket通信设…

Windows操作系统安全精讲视频课程

Windows操作系统安全精讲视频课程 1.1IT运维职位需要学习的技能.mp4 1-2利用缓存的网络凭据入侵服务器.mp4 1-3信息安全包括哪些方面.mp4 1-4管理本地用户账户和组.mp4 1-5创建检查删除计算机上隐藏的账户.mp4 1-6用户账户控制(UAC)详解.mp4 1-7使用win…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-9.1-LED灯(模仿STM32驱动开发实验)

前言: 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM(MX6U)裸机篇”视频的学习笔记,在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

搭建基础镜像(centos+jdk)

搭建基础镜像(centosjdk) 1. 目录结构1.1 应用目录2.2 镜像目录 2. 编写Dockerfile2.1 设置工作目录2.2 解决时间同步问题(设置时区)2.3 核心逻辑2.4 设置环境变量 3. 构建镜像3.1 构建镜像3.2 导出镜像 1. 目录结构 1.1 应用目录…

触发器的查看和删除

Oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 如果想查看当前所有的触发器信息,可以使用数据字典 user_triggers,这个数据字典有很多字段可以查看所有触发器的名称、类型、表名、拥有者等信息。 …

Python 与 TensorFlow2 生成式 AI(三)

原文:zh.annas-archive.org/md5/d06d282ea0d9c23c57f0ce31225acf76 译者:飞龙 协议:CC BY-NC-SA 4.0 第七章:使用 GAN 进行风格转移 神经网络在涉及分析和语言技能的各种任务中正在取得进步。创造力是人类一直占有优势的领域&…

uniapp小程序订阅通知

服务 开通订阅服务 const tmplIds ref([tsdasdadasdfgdrtwexQHdEsjZV])//换成自己的 function confirm(){uni.requestSubscribeMessage({tmplIds: tmplIds.value,success: (res) > {// console.log(res)let auth_notice res[tmplIds.value[0]] accept ? 1 : 2 //1是接…