Menu
使用 tolyui_mediax 实现媒体预览。适用于图片九宫格展示、全屏预览、手势缩放、视频播放、Hero 动画等场景。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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(...) | 预览配置 |