文章目錄前言這份案例在演示什么完整代碼isFullscreen 為什么是這篇的總開關(guān)為什么這篇用條件渲染來區(qū)分小窗和全屏為什么全屏?xí)r常常要保留退出入口說明區(qū)里的 5 個(gè)點(diǎn)分別在提醒什么關(guān)鍵代碼單獨(dú)講解State isFullscreen: boolean falseButton(進(jìn)入全屏).objectFit(ImageFit.Contain)小白最容易踩的坑1. 只把播放器變大沒處理其他界面元素2. 忘了退出路徑3. 全屏后比例策略沒想清楚這份代碼能怎么改成真實(shí)業(yè)務(wù)動(dòng)手改一改寫在最后前言很多人理解“視頻全屏”就是點(diǎn)一下按鈕把視頻區(qū)域變大。但真實(shí)頁(yè)面里的全屏切換從來不只是尺寸變化。一旦進(jìn)入全屏用戶對(duì)播放器的期待會(huì)立刻變化?？刂茥l布局、橫豎屏方向、狀態(tài)欄顯隱、沉浸感、退出方式這些都得一起跟上。這份案例雖然是一個(gè)輕量演示但它已經(jīng)把全屏切換最關(guān)鍵的交互骨架搭了出來。對(duì)于剛接觸視頻播放器的開發(fā)者來說這是一塊很值得先理順的能力。這份案例在演示什么頁(yè)面圍繞一個(gè)狀態(tài)值展開StateisFullscreen:booleanfalse這個(gè)狀態(tài)控制了播放器的兩種顯示模式普通小窗播放全屏播放狀態(tài)你可以把這篇理解成一份“全屏模式的切換思路說明書”而不是單純的尺寸演示。完整代碼/** * 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(進(jìn)度: 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(進(jìn)入全屏).onClick((){this.isFullscreentrue}).fontSize(12).backgroundColor(ACCENT_COLOR).margin({top:8})}}}.backgroundColor(PANEL_BG_COLOR).padding(12).borderRadius(12)Column({space:6}){Text(全屏切換實(shí)現(xiàn)).fontSize(14).fontColor(ACCENT_COLOR).fontWeight(FontWeight.Bold)Text(.fullScreen(true/false) 切換全屏).fontSize(12).fontColor(#333333)Text(.onFullscreenChange(callback) 監(jiān)聽變化).fontSize(12).fontColor(#333333)Text(.objectFit(ImageFit.Contain) 保持比例).fontSize(12).fontColor(#333333)Text(全屏?xí)r隱藏狀態(tài)欄: 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 全屏切換 - 從小窗播放進(jìn)入沉浸式觀看).fontSize(12).fontColor(MUTED_TEXT_COLOR).margin({top:12})}.width(100%).height(100%).backgroundColor(PAGE_BG_COLOR).padding(16)}}isFullscreen為什么是這篇的總開關(guān)這篇最核心的不是按鈕而是狀態(tài)值本身StateisFullscreen:booleanfalse它決定了播放器當(dāng)前處于哪一種觀看模式。在真實(shí)業(yè)務(wù)里全屏狀態(tài)通常會(huì)進(jìn)一步影響播放器尺寸控制欄布局頁(yè)面其他區(qū)域是否隱藏狀態(tài)欄和導(dǎo)航欄顯隱橫豎屏方向所以全屏切換絕不是“順手加個(gè)按鈕”這么簡(jiǎn)單它更像是播放器場(chǎng)景切換。為什么這篇用條件渲染來區(qū)分小窗和全屏案例里最關(guān)鍵的一段是if(this.isFullscreen){...全屏布局...}else{...普通布局...}這種寫法的好處是非常直白。你能很清楚地看到當(dāng)進(jìn)入全屏后頁(yè)面不只是高度變大而是整套視覺表達(dá)都更偏“觀看模式”。比如這里的全屏態(tài)里多了更大的標(biāo)題文案更明確的進(jìn)度信息獨(dú)立的退出全屏按鈕這說明全屏頁(yè)面通常要提供更強(qiáng)的播放主導(dǎo)感。為什么全屏?xí)r常常要保留退出入口全屏是沉浸式但不能把用戶困住。案例里專門在全屏態(tài)里放了Button(退出全屏).onClick((){this.isFullscreenfalse})這行代碼看著簡(jiǎn)單但它代表一個(gè)基本交互原則任何進(jìn)入沉浸模式的能力都必須給用戶明確、低成本的退出路徑。說明區(qū)里的 5 個(gè)點(diǎn)分別在提醒什么案例最后那塊配置說明其實(shí)很有價(jià)值它不是湊數(shù)而是在提醒你全屏實(shí)現(xiàn)通常牽扯的幾個(gè)維度能力作用.fullScreen(true/false)切換全屏狀態(tài).onFullscreenChange(...)監(jiān)聽用戶或系統(tǒng)觸發(fā)的全屏變化.objectFit(...)保證畫面比例不亂window.setWindowSystemBarProperties()處理狀態(tài)欄顯隱.orientation(...)控制橫豎屏策略也就是說真正的全屏能力往往是“狀態(tài) 窗口 方向 畫面比例”一起配合。關(guān)鍵代碼單獨(dú)講解State isFullscreen: boolean false它是這篇里最重要的視圖切換狀態(tài)。Button(進(jìn)入全屏)普通態(tài)下的入口要明顯不然用戶不會(huì)主動(dòng)切換觀看模式。.objectFit(ImageFit.Contain)全屏?xí)r尤其重要。進(jìn)入更大容器后如果縮放策略不對(duì)視頻很容易被裁掉或拉伸變形。小白最容易踩的坑1. 只把播放器變大沒處理其他界面元素這樣看起來像放大了卡片不像真正的全屏。2. 忘了退出路徑用戶進(jìn)入全屏后找不到回退方式體驗(yàn)會(huì)很糟。3. 全屏后比例策略沒想清楚結(jié)果畫面被裁切或者留邊不符合預(yù)期。這份代碼能怎么改成真實(shí)業(yè)務(wù)場(chǎng)景改法在線課程播放器全屏后切橫屏并保留章節(jié)入口影視播放頁(yè)全屏?xí)r隱藏頁(yè)面其他信息區(qū)短視頻詳情頁(yè)點(diǎn)擊畫面進(jìn)入沉浸式觀看產(chǎn)品演示頁(yè)全屏后改成更大的控制條和時(shí)間顯示動(dòng)手改一改給全屏態(tài)補(bǔ)一個(gè)頂部標(biāo)題欄。進(jìn)入全屏后隱藏頁(yè)面底部說明文案。給普通態(tài)和全屏態(tài)分別設(shè)置不同的控制欄布局。再補(bǔ)一個(gè)狀態(tài)模擬橫屏和豎屏切換效果。寫在最后視頻全屏切換真正難的地方從來不是“怎么放大”而是“進(jìn)入全屏以后播放器應(yīng)該進(jìn)入一種什么樣的觀看狀態(tài)”。這是兩件完全不同的事。如果你把這篇里的狀態(tài)切換和界面變化想明白了后面再去接真實(shí)的全屏 API會(huì)順手很多。因?yàn)槟愕乃悸芬呀?jīng)從“放大播放器”升級(jí)成“切換播放場(chǎng)景”了。