Menú
使用 tolyui_mediax 实现媒体预览。适用于图片九宫格展示、全屏预览、手势缩放、视频播放、Hero 动画等场景。
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
GitHub Release 发布操作规范。在需要发布版本、上传安装包到 GitHub Release 时激活，确保使用正确的命令和流程。
确认/删除等交互弹框统一使用 showTolyPopPicker 底部弹出样式。在需要弹出确认框、删除确认、操作选择时激活，确保交互风格一致。
后端服务启动与数据库操作规范。在需要启动后端服务、运行 API 测试、执行数据库迁移或遇到连接错误时激活，确保使用正确的命令和流程。
功能归档规范。在归档功能版本、更新功能网、创建存档快照时激活，确保节点编号正确、网络图完整。
Flutter Widget/Page 组件代码评审技能。在需要审查组件代码质量、发现设计问题时激活，确保输出结构化的问题清单和改进建议。
Flutter Widget/Page 组件重构执行技能。在需要对组件执行拆分、提取、简化时激活，确保按正确手法重构并验证通过。
| name | flutter-mediax-usage |
| description | 使用 tolyui_mediax 实现媒体预览。适用于图片九宫格展示、全屏预览、手势缩放、视频播放、Hero 动画等场景。 |
| metadata | {"author":"toly","version":"0.1.0","tags":["mediax","image","video","preview","zoom","hero","gallery","flutter"]} |
tolyui_mediax_core: 0.1.0 | tolyui_mediax_ui: 0.1.0 | tolyui_zoompager: 0.1.0
检查项目是否包含 tolyui_mediax_ui 依赖：
| 概念 | 说明 |
|---|---|
| MediaSource | sealed class，数据源（Network/File/Asset/Memory） |
| MediaMeta | sealed class，元信息（ImageMeta/VideoMeta） |
| MediaSourceResolver | 图片渲染解析器（注入网络图片加载方案） |
| VideoPlayerResolver | 视频播放器工厂（注入具体播放器实现） |
| MediaPreviewPage | 全屏预览页面 |
| ImageViewer | 可缩放图片查看器 |
| ZoomPageView | 手势感知的 PageView（缩放与翻页联动） |
| PreviewConfig | 预览配置（纯 Dart 数据类） |
1. 实现 Resolver → 继承 DefaultMediaSourceResolver，覆写 resolveNetwork
2. 注入 Provider → MaterialApp 顶层包裹 MediaSourceProvider
3. 构建 MediaMeta → ImageMeta / VideoMeta 描述媒体数据
4. 展示图片 → MediaImageView / MediaImageTile
5. 全屏预览 → push MediaPreviewPage
实现网络图片加载方案，注入到 Widget tree。
#[[file:references/resolver.md]]
用 MediaSource 和 MediaMeta 描述媒体资源。
#[[file:references/data_model.md]]
使用 MediaImageView 展示单张图片（自动通过 Resolver 加载）。
#[[file:references/image_view.md]]
使用 MediaPreviewPage 实现全屏图片/视频预览。
#[[file:references/preview.md]]
注入 VideoPlayerResolver 实现视频播放。
#[[file:references/video.md]]
| API | 作用 |
|---|---|
MediaSourceProvider(resolver:, child:) | 注入图片解析器 |
VideoPlayerProvider(resolver:, child:) | 注入视频播放器 |
MediaImageView(source:, fit:) | 渲染单张图片 |
MediaImageTile(meta:, heroTag:) | 带 Hero 的图片 tile |
MediaPreviewPage(items:, itemBuilder:) | 全屏预览页 |
ImageViewer(mediaBuilder:, meta:) | 可缩放图片 |
VideoViewer(meta:, autoPlay:) | 视频查看器 |
DragDismissWrapper(child:, onDismiss:) | 下拉关闭手势 |
ZoomPageView(controller:, itemBuilder:) | 手势 PageView |
PreviewConfig(...) | 预览配置 |