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

devtools/2024/9/23 9:34:10/
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/devtools/26381.html

相关文章

代码随想录算法训练营第14天 | 144. 二叉树的前序遍历 | 145. 二叉树的后序遍历 | 94. 二叉树的中序遍历

144. 二叉树的前序遍历 解1: 递归 void preorder(struct TreeNode* root, int *array, int *idx) {if (root ! NULL) {array[(*idx)] root->val;preorder(root->left, array, idx);preorder(root->right, array, idx);} }int* preorderTraversal(struct TreeNode* …

云计算知识点-03

云计算知识点-03 简述云计算概念和特征。 指的是通过网络“云”将巨大的数据计算处理程序分解成无数个小程序,然后,通过多部服务器组成的系统进行处理和分析这些小程序得到结果并返回给用户。 云计算的特点 云计算除不常见的超大规模、高可扩展性和按需服…

【IR 论文】DPR — 最早提出使用嵌入向量来检索文档的模型

论文:Dense Passage Retrieval for Open-Domain Question Answering ⭐⭐⭐⭐⭐ EMNLP 2020, Facebook Research Code: github.com/facebookresearch/DPR 文章目录 一、论文速读二、DPR 的训练2.1 正样本和负样本的选取2.2 In-batch negatives 技巧 三、实验3.1 数据…

Web前端开发 小实训(一) 成绩分类统计

用于学生web前端开发课程实训练习,掌握基本语法和数据类型 实训目的 使用分支语句,完成分数统计与等级对比,通过输入框输入分数,可以根据分数多少划分等级。 参考思路: 分析题目:根据输入分数进行等级划分。 操作过…

Visual studio 2019 编程控制CH341A芯片的USB设备

1、硬件 买了个USB可转IIC、或SPI、或UART的设备,主芯片是CH341A 主要说明USB转SPI的应用,绿色跳线帽选择IIC&SPI,用到CS0、SCK、MOSI、MISO这4个引脚 2、软件 2.1、下载CH341A的驱动 点CH341A官网https://www.wch.cn/downloads/CH34…

经典网络解读——Efficientnet

论文:EfficientNet: Rethinking Model Scaling for Convolutional Neural Networks(2019.5) 作者:Mingxing Tan, Quoc V. Le 链接:https://arxiv.org/abs/1905.11946 代码:https://github.com/tensorflow/t…

torch.cuda.is_available()返回flase 问题排查

查看torch版本是否为GPU版本 import torch print(torch.__version__)如果不是GPU版本下载GPU版本 查看cuda版本 nvcc --version下载cuda对应的cuda版本 nvcc: NVIDIA (R) Cuda compiler driver Copyright (c) 2005-2022 NVIDIA Corporation Built on Wed_Sep_21_10:41:10_P…

『FPGA通信接口』DDR(3)DDR3颗粒读写测试

文章目录 前言1.配套工程简介2.测试内容与策略3. 测试程序分析4.程序结果分析5.一个IP控制两颗DDR36.传送门 前言 以四颗MT41K512M16HA-125AIT颗粒为例,介绍如何在一块新制板卡上做关于DDR3的器件测试。前面两篇介绍了什么是DDR,并介绍了xilinx给出的FPG…