尧图网站建设 
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），仅供参考 Flet 中的 CubeGrid 加载动画控件：从属性到实现原理详解
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），仅供参考