文章目录前言这份案例在演示什么完整代码isFullscreen 为什么是这篇的总开关为什么这篇用条件渲染来区分小窗和全屏为什么全屏时常常要保留退出入口说明区里的 5 个点分别在提醒什么关键代码单独讲解State isFullscreen: boolean falseButton(进入全屏).objectFit(ImageFit.Contain)小白最容易踩的坑1. 只把播放器变大没处理其他界面元素2. 忘了退出路径3. 全屏后比例策略没想清楚这份代码能怎么改成真实业务动手改一改写在最后前言很多人理解“视频全屏”就是点一下按钮把视频区域变大。但真实页面里的全屏切换从来不只是尺寸变化。一旦进入全屏用户对播放器的期待会立刻变化。控制条布局、横竖屏方向、状态栏显隐、沉浸感、退出方式这些都得一起跟上。这份案例虽然是一个轻量演示但它已经把全屏切换最关键的交互骨架搭了出来。对于刚接触视频播放器的开发者来说这是一块很值得先理顺的能力。这份案例在演示什么页面围绕一个状态值展开StateisFullscreen:booleanfalse这个状态控制了播放器的两种显示模式普通小窗播放全屏播放状态你可以把这篇理解成一份“全屏模式的切换思路说明书”而不是单纯的尺寸演示。完整代码/** * VideoFullscreenFlow - Video 全屏 * 演示 Video 的全屏模式切换 */import{PRESET_COLORS,generateListItems,PAGE_BG_COLOR,PANEL_BG_COLOR,ACCENT_COLOR,MUTED_TEXT_COLOR}from./typesEntryComponentstruct VideoFullscreenFlow{StateisShow:booleantrueStateisFullscreen:booleanfalsebuild(){Column(){if(this.isShow){Scroll(){Column({space:16}){Text(Video 全屏控制).fontSize(16).fontColor(ACCENT_COLOR).fontWeight(FontWeight.Bold)Column(){Text(全屏模式:${this.isFullscreen?ON:OFF}).fontSize(13).fontColor(this.isFullscreen?#6BCB77:#FF6B6B).fontWeight(FontWeight.Bold).margin({bottom:10})Column(){if(this.isFullscreen){Column(){Text(全屏播放中).fontSize(20).fontColor(#FFFFFF).fontWeight(FontWeight.Bold)Text(16:9 比例).fontSize(14).fontColor(#FFFFFFCC)Row({space:8}){Text(▶).fontSize(14).fontColor(#FFFFFF)Text(进度: 01:23 / 05:00).fontSize(12).fontColor(#FFFFFFCC)}.margin({top:12})Button(退出全屏).onClick((){this.isFullscreenfalse}).fontSize(12).backgroundColor(#00000060).margin({top:12})}.width(100%).height(240).backgroundColor(#222222).borderRadius(8).justifyContent(FlexAlign.Center)}else{Column(){Text(小窗播放).fontSize(14).fontColor(#FFFFFF)}.width(100%).height(160).backgroundColor(#333333).borderRadius(8).justifyContent(FlexAlign.Center)Button(进入全屏).onClick((){this.isFullscreentrue}).fontSize(12).backgroundColor(ACCENT_COLOR).margin({top:8})}}}.backgroundColor(PANEL_BG_COLOR).padding(12).borderRadius(12)Column({space:6}){Text(全屏切换实现).fontSize(14).fontColor(ACCENT_COLOR).fontWeight(FontWeight.Bold)Text(.fullScreen(true/false) 切换全屏).fontSize(12).fontColor(#333333)Text(.onFullscreenChange(callback) 监听变化).fontSize(12).fontColor(#333333)Text(.objectFit(ImageFit.Contain) 保持比例).fontSize(12).fontColor(#333333)Text(全屏时隐藏状态栏: window.setWindowSystemBarProperties()).fontSize(12).fontColor(#333333)Text(横竖屏: .orientation(Orientation.Landscape)).fontSize(12).fontColor(#333333)}.width(100%).backgroundColor(#E8F4FD).padding(14).borderRadius(12)}.width(100%)}}Text(Video 全屏切换 - 从小窗播放进入沉浸式观看).fontSize(12).fontColor(MUTED_TEXT_COLOR).margin({top:12})}.width(100%).height(100%).backgroundColor(PAGE_BG_COLOR).padding(16)}}isFullscreen为什么是这篇的总开关这篇最核心的不是按钮而是状态值本身StateisFullscreen:booleanfalse它决定了播放器当前处于哪一种观看模式。在真实业务里全屏状态通常会进一步影响播放器尺寸控制栏布局页面其他区域是否隐藏状态栏和导航栏显隐横竖屏方向所以全屏切换绝不是“顺手加个按钮”这么简单它更像是播放器场景切换。为什么这篇用条件渲染来区分小窗和全屏案例里最关键的一段是if(this.isFullscreen){...全屏布局...}else{...普通布局...}这种写法的好处是非常直白。你能很清楚地看到当进入全屏后页面不只是高度变大而是整套视觉表达都更偏“观看模式”。比如这里的全屏态里多了更大的标题文案更明确的进度信息独立的退出全屏按钮这说明全屏页面通常要提供更强的播放主导感。为什么全屏时常常要保留退出入口全屏是沉浸式但不能把用户困住。案例里专门在全屏态里放了Button(退出全屏).onClick((){this.isFullscreenfalse})这行代码看着简单但它代表一个基本交互原则任何进入沉浸模式的能力都必须给用户明确、低成本的退出路径。说明区里的 5 个点分别在提醒什么案例最后那块配置说明其实很有价值它不是凑数而是在提醒你全屏实现通常牵扯的几个维度能力作用.fullScreen(true/false)切换全屏状态.onFullscreenChange(...)监听用户或系统触发的全屏变化.objectFit(...)保证画面比例不乱window.setWindowSystemBarProperties()处理状态栏显隐.orientation(...)控制横竖屏策略也就是说真正的全屏能力往往是“状态 窗口 方向 画面比例”一起配合。关键代码单独讲解State isFullscreen: boolean false它是这篇里最重要的视图切换状态。Button(进入全屏)普通态下的入口要明显不然用户不会主动切换观看模式。.objectFit(ImageFit.Contain)全屏时尤其重要。进入更大容器后如果缩放策略不对视频很容易被裁掉或拉伸变形。小白最容易踩的坑1. 只把播放器变大没处理其他界面元素这样看起来像放大了卡片不像真正的全屏。2. 忘了退出路径用户进入全屏后找不到回退方式体验会很糟。3. 全屏后比例策略没想清楚结果画面被裁切或者留边不符合预期。这份代码能怎么改成真实业务场景改法在线课程播放器全屏后切横屏并保留章节入口影视播放页全屏时隐藏页面其他信息区短视频详情页点击画面进入沉浸式观看产品演示页全屏后改成更大的控制条和时间显示动手改一改给全屏态补一个顶部标题栏。进入全屏后隐藏页面底部说明文案。给普通态和全屏态分别设置不同的控制栏布局。再补一个状态模拟横屏和竖屏切换效果。写在最后视频全屏切换真正难的地方从来不是“怎么放大”而是“进入全屏以后播放器应该进入一种什么样的观看状态”。这是两件完全不同的事。如果你把这篇里的状态切换和界面变化想明白了后面再去接真实的全屏 API会顺手很多。因为你的思路已经从“放大播放器”升级成“切换播放场景”了。