SuperAPI AI 工具集

flutter-add-widget-preview

通用与其它

查看项目

更新于 10-15 21:55

技能介绍

用途:在 Flutter 项目中通过 previews.dart 系统为组件添加交互式预览,适用于新建或更新 UI 组件、界面时隔离渲染 Widget 并实时查看。

主要能力:使用 Flutter Widget Previewer 实时、脱离完整应用上下文渲染组件。可对顶层函数、类中静态方法或无必填参数、返回 Widget/WidgetBuilder 的公开构造函数或工厂方法添加 @Preview 注解;支持自定义注解(继承 Preview)注入主题、包装器等公共属性;可为同一目标添加多个 @Preview 生成多个预览实例,或继承 MultiPreview 封装多预览配置;可重写 transform() 在运行时动态修改预览配置(如根据动态值生成名称)。

使用方式:须导入 package:flutter/widget_previews.dart。实施时先导入该库,识别有效目标,添加 @Preview 注解并配置 name、group、size、theme、brightness 等参数;若多个组件共用配置,可抽取为继承 Preview 的自定义类。在支持的 IDE(Android Studio、IntelliJ、Flutter 3.38+ 的 VS Code)中会随 IDE 自动启动,可在侧栏打开 “Flutter Widget Preview” 标签,并用左下角“按选中文件过滤预览”切换范围;命令行方式为在项目根目录运行 flutter widget-preview start,随后在自动打开的 Chrome 中查看。修改代码或预览配置后预览器自动更新;若改动全局状态(如静态初始化器)点击右下角全局热重启,仅需重置局部组件状态则点击对应预览卡片的单独热重启。

限制:预览器运行于 Web 环境,不可使用原生插件及 dart:io、dart:ffi,存在相关传递依赖的组件会抛异常,需用条件导入在预览模式下模拟或绕过;通过 dart:ui fromAsset 加载资源时须使用基于 package 的路径(如 packages/my_package_name/assets/my_image.png);传给预览注解的回调参数须为公开且常量;对无约束组件应通过 @Preview 的 size 参数设置显式约束,否则默认约束约为视口的一半。其他未提供的信息暂未说明。