Flet 中的 CubeGrid 加载动画控件从属性到实现原理详解【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址: https://gitcode.com/gh_mirrors/fl/fletCubeGrid立方体网格是 Flet 生态中flet-spinkit扩展包提供的 30 款动画加载控件之一以一个 3×3 的立方体网格按波浪节奏缩放、渐隐的方式呈现加载状态。本文以 CubeGrid 官方文档 为核心骨架结合 flet-spinkit 源码 与 官方示例 深入讲解其属性、使用方式与底层实现帮助读者在 Flet 应用中快速落地这一加载动画并理解它背后的 Python→Flutter 调用链。CubeGrid 是什么CubeGrid 是flet-spinkit扩展包中的一个动画加载控件视觉形态为 3×3 共 9 个立方体小方块组成的网格动画以“波浪”形式依次缩放并渐隐scale and fade in a wave。它继承自ft.LayoutControl因此与 Flet 的布局体系完全兼容可以直接放入Row、Column、Container等任意布局控件中。该控件基于 Flutter 开源动画库flutter_spinkit的SpinKitCubeGrid组件封装而来。在 Flet 生态中它主要用于替代静态进度指示器为数据加载、页面刷新、异步任务等待等场景提供更生动的视觉反馈。安装与引入flet-spinkit是独立的 Python 扩展包需要先安装才能使用 CubeGrid。官方文档SpinKit 索引页提供了两种安装方式# 使用 uv推荐自动写入依赖 uv add flet-spinkit # 使用 pip pip install flet-spinkit # 之后需手动将包加入 requirements.txt 或 pyproject.toml包本身仅依赖flet见 pyproject.toml要求 Python 3.10并以 Apache-2.0 协议开源。安装后在代码中引入import flet_spinkit as spins import flet as ft之后即可通过spins.CubeGrid(...)创建控件。CubeGrid 属性详解CubeGrid 在 spinkit.py 源码 中定义如下ft.control(SpinKitCubeGrid) class CubeGrid(ft.LayoutControl): A 3x3 grid of cubes that scale and fade in a wave. color: Optional[ft.ColorValue] None The color of the spinner. size: Optional[ft.Number] None The size of the spinner in pixels. Defaults to 50. duration: Optional[ft.DurationValue] None The duration of one animation cycle.三个属性的作用与取值说明如下属性类型默认值说明colorft.ColorValueFlet 主题主色动画颜色支持任意 Flet 颜色值sizeft.Number50控件尺寸逻辑像素决定整个 3×3 网格的边长durationft.DurationValue1200ms一个完整动画周期时长其中两点值得说明color默认值Python 侧声明为Optional真正的默认值在 Flutter 端解析。在 spinkit.dart 中color取widget.control.getColor(color, context)若未设置则回退到Theme.of(context).primaryColor即 Flet 主题主色。duration默认值同样由 Flutter 端兜底。createSpinKit中对SpinKitCubeGrid分支使用duration ?? const Duration(milliseconds: 1200)见 spinkit.dart因此一个动画周期默认 1.2 秒。属性类型速查duration使用 Flet 的ft.DurationValue类型可直接传ft.Duration或整数字符串例如spins.CubeGrid( colorft.Colors.PURPLE, size64, durationft.Duration(milliseconds800), # 加快动画节奏 )最小可运行示例将 CubeGrid 放入页面即可展示加载状态import flet as ft import flet_spinkit as spins def main(page: ft.Page): page.title CubeGrid Demo page.horizontal_alignment ft.CrossAxisAlignment.CENTER page.vertical_alignment ft.MainAxisAlignment.CENTER page.add( ft.Column( [ spins.CubeGrid(colorft.Colors.BLUE, size60), ft.Text(数据加载中…, size14), ], horizontal_alignmentft.CrossAxisAlignment.CENTER, spacing16, ) ) if __name__ __main__: ft.run(main)运行时建议配合异步任务使用例如在网络请求、文件解析等耗时操作完成前展示 CubeGrid操作结束后从页面移除或替换为实际内容。官方示例中的用法仓库的 spinkit_showcase/main.py 将全部 30 个动画控件集中展示其中 CubeGrid 以(CubeGrid, spins.CubeGrid)的形式注册并以cls(colorcolor, size50)统一渲染第 58 行SPINNERS [ ... (CubeGrid, spins.CubeGrid), ... ] ft.Container( contentft.Column( [ ft.Container( contentcls(colorcolor, size50), alignmentft.Alignment.CENTER, expandTrue, ), ft.Text(name, size11, text_alignft.TextAlign.CENTER), ], horizontal_alignmentft.CrossAxisAlignment.CENTER, spacing8, ), bgcolorft.Colors.SURFACE_CONTAINER_HIGHEST, border_radius12, padding12, )这一模式展示了 CubeGrid 的两种典型用法放在 Container 中居中通过alignmentft.Alignment.CENTER让动画在固定尺寸容器内居中适合局部加载区域作为 GridView 网格单元与ft.GridViewruns_count4, max_extent160组合实现多动画并排预览的效果。属性调整实战spinkit_propsspinkit_props/main.py 演示了color、size、duration三类通用属性的调节方式同样适用于 CubeGrid# 颜色对比 labeled(spins.RotatingCircle(colorft.Colors.BLUE, size50), BLUE) # 尺寸对比20 → 70 像素 labeled(spins.ThreeBounce(colorft.Colors.BLUE, size20), 20) # 动画周期对比400ms → 4000ms labeled( spins.Pulse(colorft.Colors.BLUE, size50, durationft.Duration(milliseconds400)), 400ms, )其中labeled()辅助函数将动画放入 80×80 的ft.Container中并附加文字标签第 16-33 行是展示控件属性差异的标准模板可直接套用于 CubeGrid 的调试。底层实现Python 如何驱动 Flutter 动画CubeGrid 的动画实际渲染发生在 Flutter 侧其完整调用链为Python 侧spins.CubeGrid(...)通过ft.control(SpinKitCubeGrid)装饰器注册为 Flet 控件类型属性经 Flet 协议序列化后发送给客户端扩展注册extension.dart 中createWidget将SpinKitCubeGrid类型分派到SpinKitControl控件构建spinkit.dart 的createSpinKit工厂函数将类型映射为flutter_spinkit的SpinKitCubeGrid组件并传入解析后的color、size、duration动画渲染由flutter_spinkit库完成 3×3 网格的波浪缩放与渐隐动画。属性解析细节spinkit.dartfinal color widget.control.getColor(color, context) ?? Theme.of(context).primaryColor; final size widget.control.getDouble(size, 50.0)!; final duration widget.control.getDuration(duration);即color缺省时取主题主色size缺省为50.0duration缺省由各动画分支决定CubeGrid 为 1200ms。最终控件通过LayoutControl包装后接入 Flet 布局树。从源码结构看createSpinKit函数同时服务于普通控件渲染与启动页boot screen两条路径注释见 spinkit.dart未知类型会回退到SpinKitRotatingCircle因此误传类型名也不会崩溃。作为启动页动画使用CubeGrid 也可以作为应用启动页boot screen动画。在pyproject.toml中配置[tool.flet.boot_screen] name spinkit [tool.flet.boot_screen.spinkit] spinner CubeGrid # 任意 SpinKit 动画名去掉 SpinKit 前缀 spinner_color_light #7c4dff spinner_color_dark #b388ff spinner_size 60 bgcolor_light #ffffff bgcolor_dark #0d0d12 prepare_message Preparing your app… startup_message Starting up…spinner选项大小写不敏感默认值为WanderingCubes写成CubeGrid即可启用立方体网格动画。完整的选项表含theme_mode、fade_out_duration等见 SpinKit 索引文档。该启动页是 FletcreateBootScreen扩展钩子 的一个完整真实示例其 Flutter 实现位于 boot_screen.dart其中第 20 行即注册了SpinKitCubeGrid为可用动画。平台支持与注意事项flet-spinkit官方声明支持 Windows、macOS、Linux、iOS、Android 与 Web 全平台见 README。使用 CubeGrid 时注意动画控件是纯粹的自绘组件无需额外资源文件主题切换浅色/深色通过color与 Flet 主题联动在 Web 端使用时需确保 Flet 客户端正确加载flet-spinkit扩展Web 端使用 Python/Pyodide 运行时扩展包需要一并打包若同时配置了启动页动画与页面内动画两者互不影响——启动页由 extension.dart 中的createBootScreen独立分派。总结CubeGrid 是flet-spinkit中最具辨识度的网格类加载动画之一3×3 立方体按波浪节奏缩放渐隐仅需color、size、duration三个可选属性即可接入 Flet 应用既可作为页面内加载指示器也可配置为应用启动页动画。理解其 Python 属性声明spinkit.py与 Flutter 端解析逻辑spinkit.dart的对应关系是进一步定制和排查问题的基础。【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址: https://gitcode.com/gh_mirrors/fl/flet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
企业数字化 ERP 产品动态
相关推荐
NVIDIA Xavier TRM硬件寄存器深度解析与实战调试指南 简介：本资源是NVIDIA官方发布的Xavier系列SoC技术参考手册（TRM）PDF文档，面向嵌入式AI系统工程师、机器人与自动驾驶领域开发者，以及需要深度掌握Jetson Xavier硬件架构与底层编程的进阶技术人员。手册全面覆盖Xavier S… · 2026/9/23 15:15:41
微信昵称性能优化：3招解决百万级并发下的卡顿难题 微信昵称性能优化：3招解决百万级并发下的卡顿难题 昨天刚把项目升级到微信开放平台最新 SDK，一跑起来我就懵了。原本丝滑的用户信息同步接口，现在直接报错，提示字段缺失。更离谱的是，为了适配新版 API，我顺手把获取 微信昵称… · 2026/9/23 15:15:41
非理想Buck变换器设计：寄生参数解析与效率损耗计算 简介：一份关于非理想Buck变换器建模与平均电流模式控制设计的学术论文PDF，面向电力电子、DC-DC变换器领域的工程师和研究生。文章以实际元件寄生参数为切入点，建立包含寄生电阻、电感电流纹波和开关损耗的小信号交流模型，推导出平… · 2026/9/23 15:15:41
显示器对比面试必问：3个核心指标拆解底层渲染原理 显示器对比面试必问：3个核心指标拆解底层渲染原理 看了一堆教程还是不会写项目？别急，先看看你电脑屏幕是不是在“骗”你。很多转行做前端或图形开发的伙伴，面试时被问到【显示器对比】，往往只能答出分辨率和刷新率，一旦深入问到色彩空间映射或子像素渲… · 2026/9/23 15:56:33
深信服智慧校园云机房部署指南：aDesk桌面云与超融合实战 简介：这份PPT资源面向学校信息化管理者、机房运维人员及教育行业方案设计者，系统讲解如何用桌面云替代传统PC机房，解决软硬件升级困难、故障率高、课程切换繁琐等痛点。内容围绕教师、学生、管理员三类角色展开：教师可移动备课、一… · 2026/9/23 15:56:33
欧盟车牌识别实战：534张VOC数据转YOLO格式训练全流程 简介：534张欧盟车牌图像数据集面向车牌检测与OCR字符识别任务，适合计算机视觉初学者、算法工程师及自动驾驶研发人员用于模型训练、算法验证与数据集制作流程练习。压缩包共1070个文件，包含534张jpg原图与一一对应的534个xml标注文件… · 2026/9/23 15:56:33
如何把视频变小避坑指南：3招搞定体积压缩 如何把视频变小避坑指南：3招搞定体积压缩 很多后端或全栈工程师在开发时都遇到过这种尴尬：代码逻辑跑通了，单元测试也全绿，结果一部署到测试环境，前端上传视频直接报错“文件过大”。你翻遍文档，发现服务器 Nginx 配置里… · 2026/9/23 15:56:33
隐式扩散重新模糊增强源码解析：从条件生成到扩散采样实战 简介：本资源面向计算机相关专业的毕业设计、期末大作业与课程实训场景，提供一套基于隐式扩散的重新模糊增强方法完整Python实现，帮助学习者理解扩散模型在图像去模糊与质量增强中的落地方式。压缩包共96个文件，约60.2MB࿰… · 2026/9/23 15:56:26
揭秘游戏软件开发公司底层优化：手写实现让帧率翻倍 揭秘游戏软件开发公司底层优化：手写实现让帧率翻倍 看了一堆教程还是不会写项目？这大概是很多刚入行或者想进阶的开发者的痛点。视频里跑得飞起，自己上手就卡壳，尤其是面对大型商业项目时，那种无力感特别强。很多培训机构教你“怎么调用库”，但很少教你… · 2026/9/23 15:56:01
3招搞定手机怎么下载微信面试难题实战项目解析 3招搞定手机怎么下载微信面试难题实战项目解析 面试被问“手机怎么下载微信”背后的原理，90%的人答不上来。别笑，这看似弱智的问题，实则是考察你对移动应用分发机制、安全校验及网络协议理解的试金石。我带过不少校招新人，他们背了八股文，却连一个A… · 2026/9/23 0:00:03
你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 面试被问“高并发下如何保证消息不丢失”，你张口就是“用Redis”，结果面试官追问“如果Redis宕机了怎么办”，你瞬间卡壳。这种场景太常见了，很多新手在背八股文时，只记住了技术名词… · 2026/9/23 0:00:29
