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'),
    ),
  ),
)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python中的动态数据可视化Bokeh库实战

👽发现宝藏 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 Python 中的动态数据可视化Bokeh库实战 在数据科学和可视化领域,动态数据可视化…

windows下安装onlyoffice

文章目录 1、 安装ErLang2、 安装rabbitmq3、 安装postgresql4、 安装onlyoffice(社区版) 1、 安装ErLang 下载地址:https://erlang.org/download/otp_win64_24.2.exe opt_wind64_24.2.exe 直接运行,一步一步安装 2、 安装rabbitmq 下载地址&#xf…

【笔记】Simulink与Workbench交互+自定义m函数封装为Simulink模块

以如下三角函数为例,说明建模方法 ya*sin(b*2*pi*uc);0.总模型总代码 总模型 总代码: clc clear close allt_all10; a10; b1; c0;%pi/2; delta_t0.01; simOutsim(test240430); out_tsimOut.tout; out_y1simOut.yout{1}.Values; out_y2simOut.yout{2}.…

C++-10

1.C一个程序,实现两个类,分别存放输入的字符串中的数字和字母,并按各自的顺序排列, 类中实现-一个dump函数,调C用后输出类中当前存放的字符串结果。 例如,输入1u4y2a3d,输出:存放字母的类,输出a…

机器人正反向运动学(FK和IK)

绕第一个顶点可以沿Z轴转动,角度用alpha表示 绕第二个点沿X轴转动,角度为Beta 第三个点沿X轴转动,记作gama 这三个点构成姿态(pose) 我们记第一个点为P0,画出它的本地坐标系,和世界坐标系一样红…

无人机+三维建模:倾斜摄影技术详解

无人机倾斜摄影测量技术是一项高新技术,近年来在国际摄影测量领域得到了快速发展。这种技术通过从一个垂直和四个倾斜的五个不同视角同步采集影像,从而获取到丰富的建筑物顶面及侧视的高分辨率纹理。这种技术不仅能够真实地反映地物情况,还能…

设计模式 --6组合模式

文章目录 组合模式应用场景组合模式概念组合模式结构图透明方式和安全方式什么时候使用组合模式公司管理系统使用 组合模式来构架组合模式的好处 组合模式应用场景 整体和部分可以被一致性对待 比如人力资源部 财务部的管理功能可以复用于分公司的功能 可以引入一种 树状的结构…

【webrtc】MessageHandler 2: 基于线程的消息处理:以PeerConnectionClient为例

PeerConnectionClient 前一篇 nullaudiopoller 并么有场景线程,而是就是在当前线程直接执行的, PeerConnectionClient 作为一个独立的客户端,默认的是主线程。 PeerConnectionClient 同时维护客户端的信令状态,并且通过OnMessage实现MessageHandler 消息处理。 目前只处理一…

AI大模型日报#0430:疑似GPT4.5模型刷屏、上交实现「蛋白质功能定向进化」、微软紧急撤回WizardLM-2

导读: 欢迎阅读《AI大模型日报》,内容基于Python爬虫和LLM自动生成。目前采用“文心一言”生成了今日要点以及每条资讯的摘要。 《AI大模型日报》今日要点: 在AI大模型领域,多项研究进展和行业应用动态引发关注。一夜之间&#x…

Gateway Predicate断言(谓词)

是什么 Spring Cloud Gateway匹配路由作为Spring WebFlux HandlerMapping基础设施的一部分。 Spring Cloud Gateway包含许多内置的路由谓词工厂。 所有这些谓词都匹配HTTP请求的不同属性。 您可以使用逻辑 and 语句来联合收割机组合多个路由谓词工厂。 Predicate就是为了实现一…

sum函数搭配group by /having的案例说明

记录一些常用的函数及用法 --查询份额大于1w的投资人信息。 聚合数据的筛选:当你需要基于聚合函数(如 SUM(), AVG(), MAX(), MIN(), COUNT() 等)的结果来过滤记录时,使用 HAVING 子句。 组合条件:HAVING 子句可以使用…

Nginx配置Https缺少SSL模块

1、Linux下Nginx配置https nginx下载和安装此处就忽略,可自行百度 1.1、配置https 打开nginx配置文件 vim /opt/app/nginx/conf/nginx.conf相关https配置 server {listen 443 ssl; #开放端口server_name echarts.net;#域名#redirect to https#ssl on; #旧版#ssl证…

ubuntu 利用阿里网盘API实现文件的上传和下载

文章目录 背景脚本初始化 阿里云盘API工具 aligo安装aligoaligo教程实战parse.py 演示上传文件上传文件夹下载文件下载文件夹 背景 最近在用ubuntu系统做实验,而ubuntu 系统的文件上传和下载操作很麻烦; 于是便打算使用阿里网盘的API 进行文件下载与上传…

VitePress 构建的博客如何部署到 Netlify 平台?

VitePress 构建的博客如何部署到 Netlify 平台? 前言 之前写了篇文章【使用 Vitepress 构建博客并部署到 github 平台】,有个老哥说 github page 访问太慢了,希望放到 Netlify 平台上面。 咱也没部署过,就试了一下,发…

JAVA面试专题-Redis

你在最近的项目中哪些场景使用了Redis 缓存 缓存穿透 缓存穿透:查询一个不存在的数据,mysql查询不到数据也不好直接写入缓存,导致每次请求都查数据库。 解决方案一:缓存空数据,即使查询返回的数据为空,也把…

C#应用程序实现多屏显示

前言 随着业务发展,应用程序在一些特定场景下,只在一个显示器上展示信息已经不能满足用户需求。我们如何把主屏运行程序中多个窗体移动到各个扩展屏幕位置显示呢?C# 是通过什么方式来实现的,下面介绍 C# 使用 Screen 类的方式来实…

vue+elementUI实现点击左右箭头切换按钮功能

原本是可以用el-tabs做的,就像下面的样式,但是领导说不行 最后用button和element里面的el-carousel(走马灯)结合了一下 长这样 感觉还不错 可以自己改样式 代码如下: <div class"drawer-carousel"><el-carousel arrow"always" :loop"false…

Linux基础part-5

1、Linux用户与用户组管理 1、用户是什么&#xff1f; 实现资源分派&#xff08;区分和管理系统资源的访问权限&#xff0c;将不同的资源分配给不同的用户&#xff09;实现认证pam和授权&#xff08;用户身份通常通过用户名和密码进行认证&#xff0c;认证成功后系统将授予用…

开源、轻量、易用的服务器实时监控工具:哪吒探针

本文首发于只抄博客&#xff0c;欢迎点击原文链接了解更多内容。 前言 哪吒探针是一个开源、轻量、易用的服务器监控、运维工具&#xff0c;它有以下几个特点&#xff1a; 一键安装&#xff1a;可以一键安装面板与 Agent&#xff0c;并且支持 Linux、Windows、MacOS、OpenWRT…

scikit-learn:Python中的机器学习-1

简介&#xff1a;问题设置 什么是机器学习&#xff1f; 机器学习是关于构建具有可调参数的程序&#xff0c;这些参数可以自动调整&#xff0c;以便通过适应先前看到的数据来改善其行为。机器学习可以被认为是人工智能的一个子领域&#xff0c;因为这些算法可以被视为构建模块…