平板大屏 UI 适配——横屏、多列、分屏全支持
大屏的优势
相比手机的 6~7 英寸屏幕,平板(通常 10~13 英寸)在追番时有明显优势:
- 更舒适的观看距离:屏幕大了但不用凑得很近
- 同时展示更多内容:多列布局、分屏多任务
- 外接键盘支持:完整的快捷键操作
- 更高的分辨率:通常支持 2K 甚至 4K 输出
Baka 的 Flutter 框架天然支持响应式布局,平板上会自动切换到大屏模式。
自动响应式布局
Baka 会根据屏幕宽度自动调整布局:
| 屏幕宽度 | 布局模式 | 说明 |
|---|---|---|
| < 600px(手机) | 单列 | 传统移动端布局 |
| 600~1000px(大屏手机/小平板) | 双列网格 | 封面 2 列显示 |
| 1000~1440px(平板) | 多列网格 + 侧栏 | 3~4 列封面,抽屉导航 |
| > 1440px(大平板/桌面) | 侧栏导航 + 多列网格 | 侧栏固定,内容区 4~6 列 |
主界面的大屏适配
侧栏导航
大屏下导航从底部标签栏改为左侧固定侧栏:
┌──────┬────────────────────────────┐
│ Logo │ 搜索框(占满内容区) │
│ │ │
│ 首页 │ 番剧封面网格(4~6 列) │
│ 搜索 │ │
│ 收藏 │ │
│ 下载 │ │
│ 设置 │ │
│ │ │
└──────┴────────────────────────────┘
优势:
- 导航始终可见,不用来回切换
- 内容区完整展示,不被导航栏挤压
- 更接近桌面应用的交互习惯
封面网格
大屏下封面会以更大的网格展示:
- 手机上 2~3 列
- 平板上 4~6 列
- 大平板 / 桌面可能 6~8 列
每个封面卡片也会更大,显示更多文字信息(番剧名、集数、更新时间等)。
播放界面的大屏优化
全屏沉浸式体验
平板全屏播放时:
- 视频占满屏幕(留少量安全边距)
- 控制栏在底部(手势友好)
- 弹幕在视频上层
- 可以分屏(配合系统分屏功能)
分屏多任务
iPadOS:Baka 支持 Slide Over 和 Split View,可以同时:
- 左边 Baka 看番
- 右边 Safari 查资料 / B 站看评论
- 或同时打开两个 Baka 播放不同番剧
Android 平板:大多数支持分屏模式,Baka 可以在半屏或自由窗口模式下运行。
触发方式:从屏幕边缘滑入分屏,或在多任务界面长按 Baka 图标选择"分屏"。
外接显示器
平板还可以外接显示器使用:
- USB-C / Lightning 转 HDMI 输出
- Baka 会检测到外部显示器
- 可以在显示器上全屏播放,平板上继续操作其他 App
- 部分平板支持触摸输入同时在显示器上操作
外接键盘与触控板
完整快捷键支持
接了键盘后,平板上的 Baka 快捷键与桌面版一致:
| 快捷键 | 功能 |
|---|---|
Space | 播放/暂停 |
← → | 快进/快退 |
Page Up/Down | 上/下一集 |
J # V | 字幕/音轨切换 |
Ctrl + F | 搜索 |
Ctrl + 1/2/3 | 侧栏导航切换 |
触控板手势
部分平板支持触控板(如 iPad Magic Keyboard):
- 双指滚动:列表上下翻页
- 捏合:封面网格缩放
- 右键:弹出上下文菜单
- 拖动:移动可拖动元素
平板 vs 手机的体验差异
| 维度 | 手机 | 平板 |
|---|---|---|
| 导航 | 底部标签栏 | 侧栏(大屏) |
| 封面展示 | 2~3 列 | 4~6 列 |
| 播放 | 全屏独占 | 可分屏多任务 |
| 键盘 | 虚拟键盘 | 外接物理键盘 |
| 投屏 | 常用 | 大屏本身已经够大,但投到电视也方便 |
| 同步 | 与平板自动同步 | 与手机自动同步 |
大屏适配的局限性
部分功能在大屏上可能存在差异:
- 迷你模式:平板上通常不支持 Mini 模式(窗口化功能受系统限制)
- 拖动调整窗口:iPadOS 对窗口自由大小有限制
- 多窗口:iPadOS 16+ 支持,但不如桌面版灵活
这些限制更多来自操作系统而非 Baka 本身,随系统更新会逐步改善。