系列：鸿蒙开发从入门到专家 · 第 83 篇
智慧屏不是手机的放大版。用户距离屏幕两米以上，操作主要靠遥控器或语音，单次停留时间长但切换成本高。HarmonyOS NEXT 在 TV 场景下提供了分布式媒体会话、投播、跨端迁移等能力，让手机和智慧屏可以各司其职。本篇聚焦智慧屏应用的设计原则和关键技术点。
一、智慧屏场景的特殊性
和手机相比，智慧屏有几个明显差异：
观看距离远：文字和按钮需要更大，信息层级要更扁平。
输入方式受限：遥控器方向键、语音、手机触控，几乎没有精确点击。
并行场景多：用户可能在吃饭、聊天，注意力是碎片化的。
设备协同强：手机搜片、电视播放；手机扫码登录、电视展示二维码。
因此智慧屏应用更适合"内容消费 + 轻量控制"，而不是复杂的表单填写或长时间交互。
二、焦点导航与遥控器适配
智慧屏上最重要的交互模型是焦点（Focus）。ArkUI 提供了 onFocus、onBlur、focusable 等基础能力，开发者需要保证每个可交互组件都能被遥控器方向键到达。
@Entry
@Component
struct TvHomePage {
@State currentIndex: number = 0;
build() {
Column() {
List() {
ListItem() {
Text('电影')
.fontSize(24)
.focusable(true)
.backgroundColor(this.currentIndex === 0 ? '#007DFF' : '#FFFFFF')
.onFocus(() => this.currentIndex = 0)
}
ListItem() {
Text('电视剧')
.fontSize(24)
.focusable(true)
.backgroundColor(this.currentIndex === 1 ? '#007DFF' : '#FFFFFF')
.onFocus(() => this.currentIndex = 1)
}
}
.listDirection(Axis.Horizontal)
.height(60)
}
.width('100%')
.height('100%')
.backgroundColor('#000000')
}
}
2.1 焦点设计原则
焦点状态必须清晰可见，建议用放大、边框、颜色变化组合提示。
避免过深的层级，三级菜单对遥控器来说已经比较吃力。
页面初始化时把焦点放在最可能点击的入口上，减少用户按键次数。
长列表要支持快速滚动，比如按住方向键加速、按字母索引跳转。
三、跨设备投播与媒体会话
手机端搜片、电视端播放，是智慧屏最常见的协同模式。HarmonyOS NEXT 通过 AVSessionKit 和 AVCastPicker 提供投播能力。
3.1 创建媒体会话
import { avSession } from '@kit.AVSessionKit';
let session: avSession.AVSession;
async function createSession(ctx: Context) {
session = await avSession.createAVSession(ctx, 'my_player', 'video');
await session.activate();
await session.setAVMetadata({
assetId: 'video_001',
title: '示例影片',
artist: '导演名',
mediaImage: 'app.media.poster',
filter: avSession.ProtocolType.TYPE_CAST_PLUS_STREAM | avSession.ProtocolType.TYPE_DLNA
});
}
3.2 选择投播设备
import { AVCastPicker } from '@kit.AVSessionKit';
@Builder
function CastPicker() {
AVCastPicker({
onSessionCreate: (session) => {
console.info('cast session created');
},
onSessionDestroy: () => {
console.info('cast session destroyed');
}
})
}
AVCastPicker 会自动发现支持投播的智慧屏、2in1 设备或 DLNA 设备，开发者不需要自己管理设备发现逻辑。
3.3 状态同步
投播过程中，手机端可以作为遥控器控制播放：
session.getAVCastController().then(controller => {
controller.sendControlCommand({
command: avSession.AVCastControlCommandType.PLAY
});
});
建议在手机端保留一个简洁的遥控面板，而不是把完整播放页搬过去。
四、服务流转：从手机到智慧屏
除了媒体投播，HarmonyOS NEXT 还支持把正在运行的 UIAbility 迁移到智慧屏继续执行，常用于文档展示、游戏、会议等场景。
在 module.json5 中声明 Ability 可迁移：
{
"abilities": [
{
"name": "ReaderAbility",
"srcEntry": "./ets/reader/ReaderAbility.ets",
"continuable": true,
"launchType": "standard"
}
]
}
发起迁移：
import { common } from '@kit.AbilityKit';
function continueToTv(context: common.UIAbilityContext, targetDeviceId: string, data: object) {
context.continueAbility({
deviceId: targetDeviceId,
parameters: data
});
}
目标端在 onCreate 或 onNewWant 中接收迁移参数并恢复状态。需要注意：迁移不是简单复制页面状态，核心数据要通过 Want 显式传递，图片、缓存等需要重新加载。
五、智慧屏的内容呈现
5.1 海报墙设计
海报比例常用 2:3 或 16:9，焦点时放大 1.05-1.1 倍。
行与行之间留出足够间距，避免焦点移动时误触相邻项。
文字叠加在海报下方或深色渐变遮罩上，保证可读性。
5.2 播放页
进度条要支持快进/快退，遥控器左右键小步进、上下键大步进。
暂停、选集、清晰度、倍速等操作集中在播放控制条。
语音入口放在明显位置，支持"播放下一集""跳到第 8 集"等指令。
六、测试与调试
智慧屏真机调试成本高，可以先在 DevEco Studio 的 TV 模拟器上验证布局和焦点；真机阶段重点关注：
不同分辨率电视的适配（1080P、4K）。
遥控器方向键的焦点路径是否符合预期。
投播设备发现失败时的降级提示。
长时间播放后的内存和功耗表现。
七、小结
智慧屏开发的关键是"为大屏和弱交互重新设计"，而不是把手机的页面直接搬上去。焦点导航、媒体投播、跨端迁移是三个必须掌握的能力。落地时建议先用核心播放链路跑通，再逐步完善内容推荐、会员、搜索等模块。
下一篇进入车机开发，看看座舱场景下又有哪些不同的设计约束。
参考阅读
华为开发者联盟：AVSession Kit 开发指南
华为开发者联盟：智慧屏应用开发指南
HarmonyOS 设计规范：智慧屏 UX