Flet 的 FadingFour 加载指示器：基于 flet-spinkit 的动画 Spinner 使用指南

前端跨平台桌面应用移动开发【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址https://gitcode.com/gh_mirrors/fl/flet点击查看免费下载FadingFour 是 Flet 扩展包flet-spinkit提供的 30 个动画加载指示器Spinner之一四个圆点按方阵排列、依次淡入淡出构成经典的旋转加载动效。本文将围绕该控件的类定义、三个核心属性color、size、duration、渲染层的实现原理、示例用法与测试验证展开帮助你直接在 Flet 应用中用纯 Python 代码接入这套基于 Flutterflutter_spinkit的动画体系。FadingFour 在 Flet 生态中的定位flet-spinkit是一个 Flet 扩展包提供了 30 个动画加载指示器控件全部构建在 Flutter 的flutter_spinkit包之上。这些控件以ft.control(SpinKit...)装饰器注册为 Flet 自定义控件Python 端属性经 Flet 协议下发到 Flutter 端渲染。FadingFour的 Python 类定义位于 spinkit.pyft.control(SpinKitFadingFour) class FadingFour(ft.LayoutControl): Four dots arranged in a square that fade in sequence. 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.从源码结构看FadingFour继承自ft.LayoutControl即它属于布局型控件可像普通容器一样放入Row、Column、Container等任意布局中并参与间距、对齐、滚动等布局计算。整个 SpinKit 家族在spinkit.py中采用完全一致的类结构RotatingPlain、Wave、WanderingCubes、Pulse等 30 个控件均为此模式因此掌握FadingFour的用法后即可举一反三。安装与引入在 Flet 项目中启用flet-spinkituv add flet-spinkit或使用 pippip install flet-spinkit使用 pip 安装后需要手动将该包加入requirements.txt或pyproject.toml以保证依赖可复现。安装完成后在应用中引入import flet_spinkit as spinsFadingFour已从包根导出见init.py可直接通过spins.FadingFour访问。属性详解FadingFour共有三个可配置属性均为可选参数省略时使用 Flutter 端默认值属性类型默认值说明colorft.ColorValue主题 primary 色圆点的填充颜色支持 Flet 颜色常量如ft.Colors.BLUE或十六进制色值sizeft.Number50逻辑像素整个加载指示器的外接尺寸durationft.DurationValue1200ms一个完整动画周期的时长color控制四个圆点的颜色。若未指定Flutter 端会回退到主题主色Theme.of(context).primaryColor因此它能自动适配应用的明暗主题。传入ft.Colors.BLUE、ft.Colors.RED等常量即可快速换色。size指示器的整体尺寸逻辑像素。spinkit_props示例中对ThreeBounce展示了 20、30、40、50、70 的梯度效果FadingFour同理——尺寸越大四个圆点的间距与半径等比放大。duration一个动画周期四个圆点依次淡入淡出一遍的时长。类型为ft.DurationValue传入方式spins.FadingFour(colorft.Colors.BLUE, size50, durationft.Duration(milliseconds1800))Flutter 端渲染代码位于 spinkit.dartcase SpinKitFadingFour: return SpinKitFadingFour( color: color, size: size, duration: duration ?? const Duration(milliseconds: 1200), );即FadingFour的默认周期为 1200ms与Wave、FadingCircle、CubeGrid等多数 SpinKit 动画一致。若想放缓动画节奏可传入更大的duration反之传入更小值让指示器显得更急促。渲染原理从 Python 属性到 Flutter 动画在 Flutter 端spinkit.dart 中的SpinKitControl负责把 Flet 下发的控件属性解析为flutter_spinkit的配置color通过widget.control.getColor(color, context)读取未设置时取主题主色size通过getDouble(size, 50.0)读取默认 50duration通过getDuration(duration)读取未设置时由createSpinKit按各动画类型给出推荐默认值。解析完成后createSpinKit依据控件类型字符串如SpinKitFadingFour创建对应的flutter_spinkitWidget最后包裹在LayoutControl中参与页面布局。这也是 30 个 SpinKit 控件共享的同一套渲染管线——类型字符串与 Python 类装饰器ft.control(SpinKitFadingFour)一一对应实现了 Python 控件名到 Flutter Widget 的精确映射。在 Flet 应用中使用 FadingFour基础用法import flet as ft import flet_spinkit as spins def main(page: ft.Page): page.title FadingFour Demo page.add( ft.Row( [ spins.FadingFour(colorft.Colors.BLUE, size50), ft.Text(加载中…, size16), ], alignmentft.MainAxisAlignment.CENTER, ) ) if __name__ __main__: ft.run(main)组合展示参照官方 Showcase仓库在 spinkit_showcase/main.py 提供了一个完整的 GridView 展示页将 30 个 SpinKit 控件含FadingFour逐格陈列每格附带控件名称与居中展示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, )该示例展示了把加载指示器嵌入Container/Column的标准做法用alignmentft.Alignment.CENTER让动画在卡片内居中expandTrue让动画占满可用空间。FadingFour同样适用于这种展示场景。属性对照示例spinkit_props/main.py 演示了如何系统化对比属性差异其模式可迁移到FadingFourcolor同一动画分别用BLUE、RED、GREEN等颜色渲染对比观感sizeThreeBounce取 20/30/40/50/70 梯度展示尺寸对布局的影响durationPulse取 400ms/700ms/1000ms/2000ms/4000ms直观感受动画快慢。按同样的sectionlabeled辅助函数组织页面即可快速试出适合FadingFour的颜色、尺寸与周期组合。与其他 SpinKit 控件的异同FadingFour属于方阵四圆点依次淡入型动画。仓库中与之同族四元素方阵布局的还有FadingCube四个小方块组成大立方体淡入的同时伴随旋转FadingGrid3×3 圆点阵按螺旋顺序淡入FoldingCube四个方块折叠展开默认周期 2400msWanderingCubes两个方块互相环绕旋转默认周期 1800ms。属性接口上三者完全一致color/size/duration区别仅在动画形态与默认周期。若你希望指示器更静纯淡入淡出FadingFour是最直接的选择若想要更复杂的形态可参考 index.md 中完整的 30 控件列表。集成测试佐证仓库在 test_spinkit.py 中为 SpinKit 家族编写了基于flet.testing的异步集成测试。其中test_all_controls_render将全部 30 个控件含FadingFour放入可滚动Column渲染验证每个控件都能正常构建其余测试分别验证了自定义duration、wave_type、item_count、line_width、border_width等属性的传参链路。这为FadingFour的color/size/duration属性下发与渲染链路提供了自动化验证也说明该控件可在 Flet 测试框架下按相同模式编写断言。延伸SpinKit Boot Screen除了作为页面内控件flet-spinkit还提供名为spinkit的启动屏boot screen在打包后的应用启动期间显示动画加载器。在pyproject.toml中配置即可例如[tool.flet.boot_screen] name spinkit [tool.flet.boot_screen.spinkit] spinner FadingFour # 任意 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选项可直接指定FadingFour从而让应用启动动画与页面内加载动画保持视觉一致。该启动屏是createBootScreen扩展钩子的完整实战示例相关源码位于 boot_screen.dart具体配置说明参见 publish/index.md 与 user-extensions.md。小结FadingFour是flet-spinkit中最具代表性的纯淡入淡出型加载动画之一Python 端以ft.control(SpinKitFadingFour)注册暴露color、size、duration三个属性Flutter 端通过createSpinKit工厂函数映射到flutter_spinkit的SpinKitFadingFourWidget。无论是页面内临时加载态、按钮提交反馈还是打包应用的启动屏只需几行纯 Python 代码即可接入。对照仓库中的 spinkit_showcase 与 spinkit_props 示例你还可以把FadingFour的形态、配色与节奏调校到与品牌风格完全一致。赞分享前端跨平台桌面应用移动开发【免费下载链接】fletBuild realtime web, mobile and desktop apps in Python only. No frontend experience required.项目地址https://gitcode.com/gh_mirrors/fl/flet点击查看免费下载相关推荐Flet ThreeInOut 加载动画控件基于 flet-spinkit 的三点进出式 Spinner 使用指南Flet ThreeInOut 加载动画控件基于 flet spinkit 的三点进出式 Spinner 使用指南 ThreeInOut 是 Flet 扩展包前端跨平台桌面应用移动开发Flet 中的 Ring 加载动画控件基于 flet-spinkit 的圆环 Spinner 完整使用指南Flet 中的 Ring 加载动画控件基于 flet spinkit 的圆环 Spinner 完整使用指南 Ring 是 Flet 扩展包 flet spin前端跨平台桌面应用移动开发flet-spinkit 扩展包实战为 Flet 应用添加 30 种动画加载指示器flet spinkit 扩展包实战为 Flet 应用添加 30 种动画加载指示器 Flet 生态提供了 flet spinkit 扩展包仅靠 Python前端跨平台桌面应用移动开发创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考