flutter-mediax-usage
使用 tolyui_mediax 实现媒体预览。适用于图片九宫格展示、全屏预览、手势缩放、视频播放、Hero 动画等场景。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
القائمة
使用 tolyui_mediax 实现媒体预览。适用于图片九宫格展示、全屏预览、手势缩放、视频播放、Hero 动画等场景。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
GitHub Release 发布操作规范。在需要发布版本、上传安装包到 GitHub Release 时激活,确保使用正确的命令和流程。
确认/删除等交互弹框统一使用 showTolyPopPicker 底部弹出样式。在需要弹出确认框、删除确认、操作选择时激活,确保交互风格一致。
后端服务启动与数据库操作规范。在需要启动后端服务、运行 API 测试、执行数据库迁移或遇到连接错误时激活,确保使用正确的命令和流程。
功能归档规范。在归档功能版本、更新功能网、创建存档快照时激活,确保节点编号正确、网络图完整。
Flutter Widget/Page 组件代码评审技能。在需要审查组件代码质量、发现设计问题时激活,确保输出结构化的问题清单和改进建议。
Flutter Widget/Page 组件重构执行技能。在需要对组件执行拆分、提取、简化时激活,确保按正确手法重构并验证通过。
استنادا إلى تصنيف SOC المهني
| 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(...) | 预览配置 |