齊、定位與避坑實(shí)戰(zhàn))
搞了半天終于把HarmonyOS那套ArkTS里的層疊布局Stack整明白了。前幾天有個(gè)剛轉(zhuǎn)鴻蒙開(kāi)發(fā)的朋友問(wèn)我一個(gè)頭像右上角的紅色角標(biāo)怎么用原生組件放上去我第一反應(yīng)就是這玩意不就是給Stack準(zhǔn)備的嗎層疊布局在ArkTS的布局體系里地位有點(diǎn)像PS里的圖層面板能把一個(gè)個(gè)組件按Z軸方向堆起來(lái)做到你壓我、我蓋你還不影響各自的位置計(jì)算。這篇就把我從零踩到順的全過(guò)程寫(xiě)下來(lái)從基礎(chǔ)語(yǔ)法到懶人式對(duì)齊方法再到各種坑的排查一次說(shuō)清楚。如果你正要開(kāi)始寫(xiě)HarmonyOS應(yīng)用或者已經(jīng)在用Column、Row排布界面但總覺(jué)得差點(diǎn)意思這篇文章都值得花十分鐘看完。內(nèi)容不搞虛的全部以可運(yùn)行的ArkTS代碼和真實(shí)界面效果為準(zhǔn)尤其會(huì)重點(diǎn)講熱搜里常被問(wèn)到的那個(gè)問(wèn)題Stack里的子組件怎么控制自己在底部上方100的位置水平居中。1. 布局體系里的“疊羅漢”層疊布局解決什么問(wèn)題1.1 先看懂ArkTS的布局家族正式開(kāi)始之前先花兩分鐘把ArkTS里這些布局容器捋一遍。做過(guò)Android的同學(xué)應(yīng)該能看出它們跟傳統(tǒng)ViewGroup的對(duì)應(yīng)關(guān)系理解了這個(gè)后面學(xué)什么布局都快。ArkTS聲明式UI里常用的容器布局有這么幾類Column線性縱向排列、Row線性橫向排列、Flex彈性布局可以換行類似CSS的flex、Grid網(wǎng)格布局適合九宮格這種規(guī)整格子、RelativeContainer相對(duì)定位容器以及今天的主角Stack層疊布局。它們的分工很明確Column和Row解決的是“排隊(duì)”問(wèn)題讓元素一個(gè)挨一個(gè)排Flex解決“空間分配”問(wèn)題一行放不下就換行剩下的空間按比例瓜分Grid解決“對(duì)齊格子”的問(wèn)題列數(shù)固定格子規(guī)整。一旦需求變成“兩個(gè)組件需要重疊在一起”比如圖片上方蓋一行半透明文字、角標(biāo)壓在圖標(biāo)右上角沒(méi)一個(gè)容器能優(yōu)雅地接住這活只有Stack能辦。1.2 Stack的核心能力Z軸上的自由Stack的核心思路其實(shí)特別樸素它的子組件不橫向排、不縱向排而是全部默認(rèn)從左上角開(kāi)始重疊后加入的子組件會(huì)蓋在先加入的子組件上面形成一個(gè)Z軸方向的堆疊。理解這一點(diǎn)的時(shí)候我建議你把它類比成桌面上堆了一摞便簽紙。最先放的那張?jiān)谧畹紫潞蠓诺耐仙w最上面那張只有你能看到全部?jī)?nèi)容下面的全被擋住了一部分。Android里叫FrameLayoutWeb里用position: relative加z-index也能實(shí)現(xiàn)類似效果ArkTS里就是Stack。剛開(kāi)始用Stack的人容易犯一個(gè)糊涂以為子組件放在Stack里就只能左上角疊在一起沒(méi)法控制各自的位置。其實(shí)Stack本身提供了兩種位置控制手段一個(gè)管全局、一個(gè)管個(gè)體稍后第3節(jié)會(huì)細(xì)講。你只要記住Stack負(fù)責(zé)把子組件切換成“可重疊”的模式至于每個(gè)組件具體待在哪完全可以通過(guò)屬性單獨(dú)指定自由度比線性布局高得多。2. 環(huán)境準(zhǔn)備與一個(gè)最簡(jiǎn)層疊案例2.1 開(kāi)發(fā)環(huán)境快速搭建先確認(rèn)一下你手上的開(kāi)發(fā)環(huán)境。目前主流方案是使用DevEco Studio版本建議4.0及以上對(duì)應(yīng)的HarmonyOS SDK版本最好在API 9以上這樣聲明式UI的ArkTS支持才完整寫(xiě)起來(lái)也順手。新建項(xiàng)目的時(shí)候注意選擇一個(gè)帶UIAbility的Empty Ability模板ArkTS代碼寫(xiě)在entry模塊的pages目錄下。一個(gè)最小的ArkTS頁(yè)面其實(shí)就是一個(gè)被Entry裝飾的struct組件里面由build方法描述UI結(jié)構(gòu)。如果你之前寫(xiě)過(guò)Flutter或者SwiftUI這套寫(xiě)法的上手成本幾乎為零如果只寫(xiě)過(guò)Android XML布局也沒(méi)關(guān)系多寫(xiě)幾次就習(xí)慣了。我強(qiáng)烈建議初學(xué)階段不要開(kāi)預(yù)覽器看效果直接在模擬器或者真機(jī)上跑因?yàn)镾tack的層級(jí)關(guān)系在預(yù)覽器里有時(shí)候會(huì)有渲染時(shí)序問(wèn)題看著是錯(cuò)位的真機(jī)上跑反而是正常的免得被工具誤導(dǎo)。2.2 從零手寫(xiě)第一個(gè)Stack頁(yè)面直接看代碼。下面這個(gè)例子是Stack最經(jīng)典的演示三個(gè)不同顏色、不同尺寸的正方形疊在一起感受一下默認(rèn)的層級(jí)效果。Entry Component struct StackDemo { build() { Stack() { Column() .width(240) .height(240) .backgroundColor(#FF6B6B) Column() .width(160) .height(160) .backgroundColor(#4ECDC4) Column() .width(90) .height(90) .backgroundColor(#FFE66D) } .width(100%) .height(100%) .alignContent(Alignment.Center) } }代碼里我特意把三個(gè)Column的寬高設(shè)成了240、160、90三檔背景色也不一樣。運(yùn)行一下你就明白Stack的行為模式了三個(gè)子組件默認(rèn)重疊對(duì)齊對(duì)齊方式由Stack自身的alignContent屬性決定這里我設(shè)成了Alignment.Center所以三者都水平垂直居中先寫(xiě)的紅色塊在底層最后寫(xiě)的黃色塊在最上層所以黃色塊完整可見(jiàn)綠色塊露出四周紅色塊只露出一圈邊框每個(gè)子組件的位置互不影響不存在線性布局那種擠壓和占位問(wèn)題。這個(gè)Demo雖然短但已經(jīng)把Stack的核心機(jī)制演示透了。接下來(lái)的所有復(fù)雜效果本質(zhì)都是在“多個(gè)子組件疊放”的基礎(chǔ)上加上尺寸、位置、事件的精確控制。3. 控制子組件位置的兩種姿勢(shì)整體對(duì)齊與個(gè)體對(duì)齊3.1 容器級(jí)對(duì)齊alignContent先講那個(gè)管全局的參數(shù)alignContent。這個(gè)屬性掛在Stack根節(jié)點(diǎn)上決定所有子組件的“默認(rèn)排隊(duì)位置”。它的取值范圍就是Alignment那一組枚舉常見(jiàn)的有枚舉值實(shí)際效果Alignment.TopStart所有子組件默認(rèn)對(duì)齊到左上角Alignment.Top所有子組件默認(rèn)對(duì)齊到頂部水平居中Alignment.TopEnd所有子組件默認(rèn)對(duì)齊到右上角Alignment.Start所有子組件默認(rèn)對(duì)齊到左側(cè)垂直居中Alignment.Center所有子組件默認(rèn)水平垂直居中Alignment.End所有子組件默認(rèn)對(duì)齊到右側(cè)垂直居中Alignment.BottomStart所有子組件默認(rèn)對(duì)齊到左下角Alignment.Bottom所有子組件默認(rèn)對(duì)齊到底部水平居中Alignment.BottomEnd所有子組件默認(rèn)對(duì)齊到右下角實(shí)操里我的經(jīng)驗(yàn)是先把整個(gè)Stack的alignContent設(shè)為某個(gè)基準(zhǔn)位置比如一個(gè)全屏的Stack通常設(shè)成Alignment.Center或者Alignment.Bottom這樣大多數(shù)子組件不需要單獨(dú)設(shè)置位置只有少數(shù)元素再用alignSelf做微調(diào)。要注意alignContent只是一個(gè)“默認(rèn)值”邏輯不是強(qiáng)制鎖死。意思就是子組件如果自己帶了alignSelf或者margin、position之類的屬性那以它自己的為準(zhǔn)。所以別擔(dān)心設(shè)了容器級(jí)對(duì)齊后所有兒子就只能擠在一個(gè)角落了后面還有手段解放它們。3.2 子組件級(jí)對(duì)齊alignSelf再講那個(gè)管個(gè)體的屬性alignSelf。這個(gè)屬性讓單個(gè)子組件在Stack內(nèi)部單獨(dú)調(diào)整自己的對(duì)齊方式完全不用管兄弟組件。用法是在子組件鏈?zhǔn)秸{(diào)用里加一個(gè).alignSelf()Stack({ alignContent: Alignment.Center }) { Column() .width(200) .height(200) .backgroundColor(#FF6B6B) Text(右下角標(biāo)簽) .alignSelf(Alignment.BottomEnd) .margin({ right: 16, bottom: 16 }) .fontSize(14) .fontColor(Color.White) .backgroundColor(#33000000) .padding({ left: 8, right: 8, top: 4, bottom: 4 }) .borderRadius(4) } .width(100%) .height(200)注意這里Stack容器整體alignContent設(shè)了Center但第二個(gè)子組件Text通過(guò)alignSelf(BottomEnd)把自己定位到了右下角還加了margin進(jìn)一步偏移。這就是Stack真正靈活的地方全局統(tǒng)一局部自由互不干擾。實(shí)戰(zhàn)里alignSelf最好用的場(chǎng)景就是做角標(biāo)。比如一個(gè)卡片右上角的“HOT”標(biāo)簽整個(gè)卡片放在一個(gè)居中Stack里標(biāo)簽自己alignSelf到TopEnd再margin調(diào)整距離邊緣的間距幾行代碼搞定不用嵌套一堆容器。3.3 熱搜實(shí)戰(zhàn)底部上方100居中的寫(xiě)法下面進(jìn)入很多初學(xué)者問(wèn)了無(wú)數(shù)遍的實(shí)戰(zhàn)題Stack里的一個(gè)子組件要相對(duì)整個(gè)Stack的水平方向居中同時(shí)垂直方向距離底部100。別小看這個(gè)問(wèn)題熱搜里反復(fù)出現(xiàn)“鴻蒙 stack布局子組件怎么控制自己在底部上方100的位置居中”說(shuō)明卡在這的人真不少。先給答案最簡(jiǎn)單的寫(xiě)法Entry Component struct BottomButtonDemo { build() { Stack() { // 背景層可以是任意內(nèi)容 Column() .width(100%) .height(100%) .backgroundColor(#F1F3F5) // 這個(gè)按鈕就是目標(biāo)水平居中距離底部100 Button(我知道了) .width(200) .height(48) .alignSelf(Alignment.Bottom) // 先放到水平居中、底部對(duì)齊 .margin({ bottom: 100 }) // 再往上推100 } .width(100%) .height(100%) } }拆解一下思路Stack對(duì)齊系統(tǒng)里Alignment.Bottom本身就是“水平居中底部對(duì)齊”所以直接alignSelf(Bottom)就完成了水平居中這一半。然后想做到“距離底部100”就在子組件的margin里把bottom設(shè)為100相當(dāng)于讓按鈕整體往上抬了100。兩步合起來(lái)就是底部上方100且水平居中。很多人想不明白的點(diǎn)在于是用margin還是position。在Stack里最簡(jiǎn)單有效的偏移方式就是margin它會(huì)參與布局計(jì)算真機(jī)上對(duì)尺寸自適應(yīng)也更友好。position屬性也能用但它會(huì)把元素變成絕對(duì)定位后續(xù)父容器尺寸變化時(shí)容易出現(xiàn)超出邊界的情況初學(xué)階段建議優(yōu)先用margin。如果還想更精細(xì)一點(diǎn)比如按鈕要求距離底部100同時(shí)還要距離右側(cè)20可以連續(xù)疊加先.alignSelf(Alignment.BottomEnd), 再.margin({ right: 20, bottom: 100 })。但注意一旦alignSelf用了End水平方向就不再是居中而是靠右了二者是不可兼得的“方向組合”。所以要先想清楚自己要的是靠哪邊。4. 層疊布局的高頻應(yīng)用場(chǎng)景4.1 右上角角標(biāo)電商列表的未讀紅點(diǎn)Stack在真實(shí)項(xiàng)目中最常見(jiàn)的用途就是角標(biāo)類需求。拿電商應(yīng)用舉例商品列表每個(gè)格子的右上角經(jīng)常會(huì)有一個(gè)“滿減”標(biāo)簽或者未讀紅點(diǎn)。這種UI結(jié)構(gòu)天然就是“原內(nèi)容 覆蓋物”的關(guān)系用線性布局寫(xiě)會(huì)麻煩到懷疑人生用Stack寫(xiě)就是兩三行的事。Entry Component struct BadgeDemo { build() { Stack({ alignContent: Alignment.Center }) { // 商品圖底板 Column() .width(120) .height(120) .backgroundColor(#DEE2E6) .borderRadius(12) // 右上角紅點(diǎn) Column() .width(16) .height(16) .backgroundColor(#FA5252) .borderRadius(8) .alignSelf(Alignment.TopEnd) .margin({ top: 6, right: 6 }) } .width(100%) .height(100%) } }這里我假裝商品底圖是一個(gè)灰色色塊紅點(diǎn)通過(guò)alignSelf(TopEnd)跑到右上角再用margin把紅點(diǎn)往里收6避免貼邊太緊。你把這個(gè)紅點(diǎn)換成Text標(biāo)簽里面塞數(shù)字或者“NEW”就是一個(gè)標(biāo)準(zhǔn)的加號(hào)角標(biāo)。做角標(biāo)的時(shí)候有個(gè)細(xì)節(jié)值得注意角標(biāo)內(nèi)容變化時(shí)比如從9變成99它的寬度會(huì)自動(dòng)撐開(kāi)但因?yàn)閍lignSelf加margin的寫(xiě)法不會(huì)影響容器其他兄弟組件所以整體布局不會(huì)晃動(dòng)這一點(diǎn)比用線性布局里做fixed寬高的方案穩(wěn)得多。4.2 懸浮按鈕與底部操作欄另一個(gè)高頻場(chǎng)景是做頁(yè)面的懸浮操作區(qū)。比如一個(gè)視頻播放頁(yè)面返回按鈕、點(diǎn)贊按鈕、評(píng)論輸入框經(jīng)常要懸浮在播放器內(nèi)容上。這種界面用Stack就是天然解背景放視頻層前景放操作層互不打擾。Entry Component struct FloatActionDemo { build() { Stack() { // 模擬視頻區(qū)域 Column() .width(100%) .height(100%) .backgroundColor(#212529) // 頂部返回按鈕 Button(返回) .backgroundColor(#66000000) .fontColor(Color.White) .alignSelf(Alignment.TopStart) .margin({ left: 16, top: 16 }) // 底部操作欄 Row() { Text(點(diǎn)贊) Text(評(píng)論) Text(分享) } .width(100%) .justifyContent(FlexAlign.SpaceAround) .backgroundColor(#66000000) .fontColor(Color.White) .padding({ top: 10, bottom: 10 }) .alignSelf(Alignment.Bottom) } .width(100%) .height(100%) } }從上面這段可以看到Stack不僅能容納單個(gè)組件里面嵌套一個(gè)Row再放整行操作欄也完全沒(méi)問(wèn)題。也就是說(shuō)Stack的層級(jí)能力完全可以搭載一行內(nèi)部有復(fù)雜布局的區(qū)塊它只負(fù)責(zé)“這行整體待在我這個(gè)容器底下”不負(fù)責(zé)管行內(nèi)元素的排列。這種做法比用絕對(duì)坐標(biāo)定位的寫(xiě)法省心在一點(diǎn)不同屏幕尺寸下Stack的百分比寬高依然生效懸浮按鈕的位置不會(huì)因?yàn)闄C(jī)型尺寸變化而跑偏。4.3 圖片文字疊加封面卡片圖片上蓋文字基本是內(nèi)容類應(yīng)用的家常便飯。頭條、抖音、購(gòu)物車?yán)锏纳唐房ǘ荚谕孢@個(gè)套路一張封面圖底下蓋一層半透明漸變或者一塊深色遮罩再放標(biāo)題和價(jià)格。實(shí)現(xiàn)上仍然是Stack整個(gè)卡片只有一層結(jié)構(gòu)Entry Component struct CoverCardDemo { build() { Stack() { // 圖片占位實(shí)際開(kāi)發(fā)換成Image組件 Column() .width(100%) .height(200) .backgroundColor(#343A40) // 底部信息遮罩層 Column() .width(100%) .height(60) .backgroundColor(#AA000000) .alignSelf(Alignment.Bottom) // 白色文字 Text(這是一條測(cè)試標(biāo)題長(zhǎng)度隨意觀察換行效果) .fontSize(16) .fontColor(Color.White) .alignSelf(Alignment.BottomStart) .margin({ left: 12, right: 60, bottom: 20 }) } .width(100%) .height(200) .borderRadius(12) .clip(true) } }這里上方遮罩和文字都在Stack里遮罩通過(guò)alignSelf(Bottom)固定在底部區(qū)域文字通過(guò)BottomStart加margin對(duì)齊到左下角right留了60的空間給可能存在的價(jià)格標(biāo)簽。最后那個(gè).clip(true)很重要它讓Stack裁剪掉超出圓角范圍的子組件不然蓋上的遮罩會(huì)把父容器的圓角給“頂?shù)簟毙Ч浅３蟆?.4 頭像與在線狀態(tài)徽章最后一個(gè)高頻場(chǎng)景是社交應(yīng)用里幾乎人人見(jiàn)過(guò)的頭像加狀態(tài)點(diǎn)。頭像底部對(duì)齊在線狀態(tài)點(diǎn)壓到頭像右下角稍微露出半個(gè)身位。Entry Component struct AvatarDemo { build() { Stack() { // 頭像外層白圈 Column() .width(72) .height(72) .backgroundColor(#FFFFFF) .borderRadius(36) // 頭像內(nèi)層圖 Column() .width(64) .height(64) .backgroundColor(#ADB5BD) .borderRadius(32) // 在線狀態(tài)點(diǎn) Column() .width(18) .height(18) .backgroundColor(#40C057) .borderRadius(9) .alignSelf(Alignment.BottomEnd) .margin({ right: 2, bottom: 2 }) } .width(100%) .height(100%) } }這個(gè)例子的重點(diǎn)是那個(gè)狀態(tài)點(diǎn)它比頭像本身小一圈而且刻意露出棋子邊兒這種效果在線性布局里做會(huì)很別扭你需要算各種偏移量。但在Stack里就是alignSelf到右下角再margin往外挪一點(diǎn)點(diǎn)即可和實(shí)際設(shè)計(jì)稿的對(duì)齊意圖非常匹配。5. 避坑指南布局重疊、事件穿透與性能5.1 布局重疊不是bug但要注意層級(jí)搜“布局重疊”這個(gè)詞的人很多是因?yàn)樵赟tack里發(fā)現(xiàn)子組件疊到不想疊的地方以為出bug了。其實(shí)這不是錯(cuò)誤而是Stack的設(shè)計(jì)目的。真正該做的是明確每個(gè)子組件的層級(jí)順序和位置。Stack的子組件層級(jí)規(guī)則很簡(jiǎn)單先寫(xiě)的在下后寫(xiě)的在上而zIndex屬性可以顯式調(diào)整。比如有兩個(gè)按鈕疊在一起想讓紅色的永遠(yuǎn)蓋在藍(lán)色上面在紅色按鈕上加一個(gè).zIndex(2)藍(lán)色設(shè).zIndex(1)層級(jí)關(guān)系就鎖死了。實(shí)際項(xiàng)目里層級(jí)沖突最容易出現(xiàn)在“同一個(gè)Stack里既有背景元素又有交互元素”的場(chǎng)景。我的習(xí)慣是把背景類元素放在最前面交互元素隨后最后用zIndex控制覆蓋關(guān)系避免因?yàn)槎鄠€(gè)元素同時(shí)集中在某個(gè)區(qū)域?qū)е曼c(diǎn)擊目標(biāo)被兄弟組件擋住。5.2 事件命中與穿透控制比層級(jí)更隱蔽的坑是事件穿透。Stack里上層組件如果設(shè)置成了透明背景或者背景色接近全透明它雖然看不見(jiàn)但依然會(huì)攔截點(diǎn)擊事件。也就是說(shuō)你放了一個(gè)全屏透明層在頂部下面所有按鈕都會(huì)點(diǎn)不動(dòng)但界面上根本看不到原因。解決辦法是使用hitTestBehavior屬性。ArkTS里對(duì)它有三種主流的取值取值行為HitTestMode.Default默認(rèn)模式組件自身響應(yīng)事件并且阻止事件傳遞給底部兄弟組件HitTestMode.Block組件自身不響應(yīng)事件但依然阻斷事件向下傳遞HitTestMode.Transparent組件自身嘗試響應(yīng)事件同時(shí)透?jìng)鹘o下層組件HitTestMode.None組件完全不參與事件命中測(cè)試事件直接穿過(guò)它命中底層組件做了一個(gè)懸浮評(píng)分彈層時(shí)經(jīng)常需要半透明遮罩后面的內(nèi)容不可點(diǎn)那遮罩就設(shè)Default如果是一個(gè)純裝飾的引導(dǎo)層要既能響應(yīng)點(diǎn)擊關(guān)閉又讓點(diǎn)擊事件穿透到底層那就用Transparent。這個(gè)調(diào)起來(lái)需要結(jié)合具體交互設(shè)計(jì)去試但知道有這些選項(xiàng)排查問(wèn)題時(shí)就快多了。5.3 尺寸約束、百分比與自適應(yīng)邊界Stack雖然“自由”但它對(duì)子組件的尺寸仍然有約束。子組件如果沒(méi)設(shè)置寬高會(huì)盡量跟隨內(nèi)容大小如果設(shè)置了百分比寬高參考的是Stack自身的尺寸如果子組件的固定尺寸超過(guò)了Stack容器就會(huì)發(fā)生溢出。實(shí)際開(kāi)發(fā)里我見(jiàn)過(guò)不少新手在Stack里放了固定寬度300的組件但容器只有200寬真機(jī)上部分內(nèi)容被切掉或者莫名其妙把別的組件頂出區(qū)域。這種時(shí)候優(yōu)先檢查的是子組件是否設(shè)置了合理的最大寬度、容器是否設(shè)置了.clip(true)以及用的是不是百分比寬高。自適應(yīng)場(chǎng)景下建議優(yōu)先用百分比和margin/dimension配合少寫(xiě)死px數(shù)值。比如一個(gè)卡片要適配不同手機(jī)寬度把卡片寬度設(shè)成90%角標(biāo)的位置用alignSelf加margin控制這樣任何屏幕尺寸下都能保持相對(duì)位置一致不會(huì)因?yàn)槟骋欢诉^(guò)窄導(dǎo)致界面元素跑出屏幕。5.4 不要濫用Stack什么時(shí)候換FlexStack雖然好用但不是什么場(chǎng)景都適合。如果一個(gè)頁(yè)面里幾乎都是依次排列的內(nèi)容比如表單頁(yè)、設(shè)置頁(yè)、縱向列表頁(yè)用Column或者List才是正解硬用Stack去疊反而會(huì)讓布局層級(jí)變得復(fù)雜維護(hù)成本直線上升。給一個(gè)簡(jiǎn)單的判斷標(biāo)準(zhǔn)如果界面元素之間沒(méi)有“重疊”需求并且需要響應(yīng)式換行或按比例分配空間那就別用Stack如果元素之間天然存在壓蓋關(guān)系、需要Z軸層疊、需要某個(gè)元素懸浮在其他內(nèi)容之上那Stack就是最佳選擇。還有就是性能。Stack本身并不重但如果一個(gè)頁(yè)面里嵌套了十幾層Stack每層還都帶了復(fù)雜的子組件那渲染壓力會(huì)比同等結(jié)構(gòu)的Column大不少。我的習(xí)慣是控制層級(jí)深度能用一層Stack加alignSelf解決的問(wèn)題絕不用三層嵌套。這不是Stack的問(wèn)題是所有容器布局的通用原則。6. 進(jìn)階Stack與其他布局的搭配與狀態(tài)聯(lián)動(dòng)6.1 頁(yè)面路由棧與Stack布局的區(qū)別講到這里順便厘清一個(gè)概念A(yù)rkTS里的頁(yè)面路由棧router棧和Stack布局是兩碼事。路由棧管的是頁(yè)面之間的跳轉(zhuǎn)每個(gè)頁(yè)面是獨(dú)立的路由實(shí)例從一個(gè)頁(yè)面跳到另一個(gè)頁(yè)面靠的是router.pushUrl。而Stack布局是在同一個(gè)頁(yè)面內(nèi)部管的是組件和組件的疊放。這兩個(gè)概念在鴻蒙開(kāi)發(fā)里都帶“?！弊值珜蛹?jí)完全不同千萬(wàn)別混。在頁(yè)面上看不到“路由棧”這個(gè)組件你是操作不了它的顯隱的反過(guò)來(lái)Stack布局也沒(méi)有能力去控制頁(yè)面跳轉(zhuǎn)它只負(fù)責(zé)組件排版。把它們弄混是不少初學(xué)者寫(xiě)了好幾天之后才反應(yīng)過(guò)來(lái)的事。如果看到有些人把多個(gè)“頁(yè)面內(nèi)容”直接塞進(jìn)同一個(gè)Stack里用狀態(tài)變量控制顯示和隱藏那一定要小心這屬于“偽頁(yè)面切換”頁(yè)面之間沒(méi)有獨(dú)立生命周期狀態(tài)管理也容易亂不如直接用路由棧來(lái)得干凈。6.2 配合Flex/Grid實(shí)現(xiàn)復(fù)雜面板Stack的另一個(gè)高價(jià)值用法是在復(fù)雜面板里作為“局部層疊容器”和其他布局嵌套。最常見(jiàn)的就是一個(gè)Grid網(wǎng)格每個(gè)格子內(nèi)部再用Stack去疊角標(biāo)或者一個(gè)Flex流式標(biāo)簽區(qū)域每個(gè)標(biāo)簽做一個(gè)小型Stack來(lái)展示刪除按鈕。比如做一個(gè)九宮格圖片上傳組件熱搜里也經(jīng)常有人搜“android 九宮格布局”每格的右上角放一個(gè)刪除按鈕就可以在Grid的item構(gòu)造里用一個(gè)Stack包住圖片和刪除按鈕。這樣外層Grid負(fù)責(zé)網(wǎng)格排布內(nèi)層Stack負(fù)責(zé)“圖片刪除鍵”的層疊關(guān)系職責(zé)清晰不會(huì)互相污染。Grid() { ForEach(this.imageList, (item: string) { GridItem() { Stack({ alignContent: Alignment.Center }) { // 假圖片實(shí)際是Image(item) Column() .width(100%) .height(100%) .backgroundColor(#E9ECEF) // 右上角刪除按鈕 Text(×) .fontSize(18) .fontColor(Color.White) .backgroundColor(#FA5252) .borderRadius(10) .width(20) .height(20) .textAlign(TextAlign.Center) .alignSelf(Alignment.TopEnd) .margin({ top: 4, right: 4 }) .onClick(() { this.imageList this.imageList.filter((v: string) v ! item) }) } } }, (item: string) item) } .columnsTemplate(1fr 1fr 1fr) .rowsTemplate(1fr 1fr 1fr) .columnsGap(8) .rowsGap(8) .width(100%) .height(260)這套組合方式在內(nèi)容型應(yīng)用里幾乎天天用。它繼承了Grid的整齊排布優(yōu)點(diǎn)又疊加了Stack的層疊能力兩者配合得當(dāng)代碼可讀性和UI還原度都很好。6.3 狀態(tài)管理下的層疊刷新細(xì)節(jié)最后提一個(gè)和狀態(tài)管理相關(guān)的細(xì)節(jié)。Stack里的子組件顯隱切換如果依賴的是狀態(tài)變量那么狀態(tài)變化的觸發(fā)方式會(huì)影響層級(jí)刷新效果。比如你在Stack里放了一個(gè)loading蒙層用一個(gè)布爾變量控制它是否顯示。當(dāng)網(wǎng)絡(luò)請(qǐng)求開(kāi)始時(shí)把變量設(shè)為true請(qǐng)求結(jié)束時(shí)設(shè)為false。這時(shí)候要注意Stack并不會(huì)因?yàn)槟愀淖円粋€(gè)狀態(tài)變量就“重新分配”所有子組件的位置它只會(huì)更新那些真正依賴該狀態(tài)的節(jié)點(diǎn)的可見(jiàn)性、尺寸、內(nèi)容等。所以只要你沒(méi)有改其他子組件的數(shù)據(jù)兄弟組件的位置基本不會(huì)跳動(dòng)。但如果你的狀態(tài)變量里存的是一個(gè)數(shù)組比如列表數(shù)據(jù)并且你直接修改了數(shù)組某個(gè)元素就可能觸發(fā)包含該元素的組件的重新測(cè)量和繪制。如果組件剛好在Stack里且尺寸是自適應(yīng)內(nèi)容那布局就會(huì)重新計(jì)算。這一機(jī)制本身沒(méi)問(wèn)題但如果發(fā)現(xiàn)某些堆疊組件“莫名抖動(dòng)”先排查一下是不是父組件或者兄弟組件的某個(gè)狀態(tài)被無(wú)意間更新了。我建議把“遮罩層”“懸浮層”這類組件的顯隱和業(yè)務(wù)數(shù)據(jù)狀態(tài)分開(kāi)維護(hù)盡量讓它們只依賴一兩個(gè)專門(mén)的布爾變量不要和列表、表單數(shù)據(jù)混在同一個(gè)大對(duì)象里。這樣狀態(tài)刷新時(shí)影響范圍最小不是所有數(shù)據(jù)變了都需要重新計(jì)算整個(gè)Stack的布局。Stack這個(gè)布局在ArkTS里的地位我用一句話總結(jié)就是它解決的是你無(wú)法用線性容器解決的“疊放”需求但它的靈活性也意味著你需要有更明確的層級(jí)意識(shí)和尺寸控制能力。上面的內(nèi)容是我在實(shí)際項(xiàng)目中反復(fù)試出來(lái)的幾乎每個(gè)示例都在真機(jī)上跑過(guò)。尤其是alignSelf加margin這套組合方式學(xué)會(huì)之后鴻蒙界面里能擋住你的布局難題十之八九都能化解。如果你在某一步踩了坑建議先回到這一篇文章把第3節(jié)的兩種對(duì)齊方式重新吃透再去看第5節(jié)的避坑場(chǎng)景。很多看起來(lái)玄乎的布局問(wèn)題本質(zhì)上就是對(duì)“整體對(duì)齊”和“個(gè)體對(duì)齊”這兩個(gè)概念沒(méi)分清楚。搞定了這兩個(gè)點(diǎn)Stack用起來(lái)就順暢多了。 HarmonyOS ArkTS層疊布局Stack深度解析：對(duì)齊、定位與避坑實(shí)戰(zhàn)
搞了半天終于把HarmonyOS那套ArkTS里的層疊布局Stack整明白了。前幾天有個(gè)剛轉(zhuǎn)鴻蒙開(kāi)發(fā)的朋友問(wèn)我一個(gè)頭像右上角的紅色角標(biāo)怎么用原生組件放上去我第一反應(yīng)就是這玩意不就是給Stack準(zhǔn)備的嗎層疊布局在ArkTS的布局體系里地位有點(diǎn)像PS里的圖層面板能把一個(gè)個(gè)組件按Z軸方向堆起來(lái)做到你壓我、我蓋你還不影響各自的位置計(jì)算。這篇就把我從零踩到順的全過(guò)程寫(xiě)下來(lái)從基礎(chǔ)語(yǔ)法到懶人式對(duì)齊方法再到各種坑的排查一次說(shuō)清楚。如果你正要開(kāi)始寫(xiě)HarmonyOS應(yīng)用或者已經(jīng)在用Column、Row排布界面但總覺(jué)得差點(diǎn)意思這篇文章都值得花十分鐘看完。內(nèi)容不搞虛的全部以可運(yùn)行的ArkTS代碼和真實(shí)界面效果為準(zhǔn)尤其會(huì)重點(diǎn)講熱搜里常被問(wèn)到的那個(gè)問(wèn)題Stack里的子組件怎么控制自己在底部上方100的位置水平居中。1. 布局體系里的“疊羅漢”層疊布局解決什么問(wèn)題1.1 先看懂ArkTS的布局家族正式開(kāi)始之前先花兩分鐘把ArkTS里這些布局容器捋一遍。做過(guò)Android的同學(xué)應(yīng)該能看出它們跟傳統(tǒng)ViewGroup的對(duì)應(yīng)關(guān)系理解了這個(gè)后面學(xué)什么布局都快。ArkTS聲明式UI里常用的容器布局有這么幾類Column線性縱向排列、Row線性橫向排列、Flex彈性布局可以換行類似CSS的flex、Grid網(wǎng)格布局適合九宮格這種規(guī)整格子、RelativeContainer相對(duì)定位容器以及今天的主角Stack層疊布局。它們的分工很明確Column和Row解決的是“排隊(duì)”問(wèn)題讓元素一個(gè)挨一個(gè)排Flex解決“空間分配”問(wèn)題一行放不下就換行剩下的空間按比例瓜分Grid解決“對(duì)齊格子”的問(wèn)題列數(shù)固定格子規(guī)整。一旦需求變成“兩個(gè)組件需要重疊在一起”比如圖片上方蓋一行半透明文字、角標(biāo)壓在圖標(biāo)右上角沒(méi)一個(gè)容器能優(yōu)雅地接住這活只有Stack能辦。1.2 Stack的核心能力Z軸上的自由Stack的核心思路其實(shí)特別樸素它的子組件不橫向排、不縱向排而是全部默認(rèn)從左上角開(kāi)始重疊后加入的子組件會(huì)蓋在先加入的子組件上面形成一個(gè)Z軸方向的堆疊。理解這一點(diǎn)的時(shí)候我建議你把它類比成桌面上堆了一摞便簽紙。最先放的那張?jiān)谧畹紫潞蠓诺耐仙w最上面那張只有你能看到全部?jī)?nèi)容下面的全被擋住了一部分。Android里叫FrameLayoutWeb里用position: relative加z-index也能實(shí)現(xiàn)類似效果ArkTS里就是Stack。剛開(kāi)始用Stack的人容易犯一個(gè)糊涂以為子組件放在Stack里就只能左上角疊在一起沒(méi)法控制各自的位置。其實(shí)Stack本身提供了兩種位置控制手段一個(gè)管全局、一個(gè)管個(gè)體稍后第3節(jié)會(huì)細(xì)講。你只要記住Stack負(fù)責(zé)把子組件切換成“可重疊”的模式至于每個(gè)組件具體待在哪完全可以通過(guò)屬性單獨(dú)指定自由度比線性布局高得多。2. 環(huán)境準(zhǔn)備與一個(gè)最簡(jiǎn)層疊案例2.1 開(kāi)發(fā)環(huán)境快速搭建先確認(rèn)一下你手上的開(kāi)發(fā)環(huán)境。目前主流方案是使用DevEco Studio版本建議4.0及以上對(duì)應(yīng)的HarmonyOS SDK版本最好在API 9以上這樣聲明式UI的ArkTS支持才完整寫(xiě)起來(lái)也順手。新建項(xiàng)目的時(shí)候注意選擇一個(gè)帶UIAbility的Empty Ability模板ArkTS代碼寫(xiě)在entry模塊的pages目錄下。一個(gè)最小的ArkTS頁(yè)面其實(shí)就是一個(gè)被Entry裝飾的struct組件里面由build方法描述UI結(jié)構(gòu)。如果你之前寫(xiě)過(guò)Flutter或者SwiftUI這套寫(xiě)法的上手成本幾乎為零如果只寫(xiě)過(guò)Android XML布局也沒(méi)關(guān)系多寫(xiě)幾次就習(xí)慣了。我強(qiáng)烈建議初學(xué)階段不要開(kāi)預(yù)覽器看效果直接在模擬器或者真機(jī)上跑因?yàn)镾tack的層級(jí)關(guān)系在預(yù)覽器里有時(shí)候會(huì)有渲染時(shí)序問(wèn)題看著是錯(cuò)位的真機(jī)上跑反而是正常的免得被工具誤導(dǎo)。2.2 從零手寫(xiě)第一個(gè)Stack頁(yè)面直接看代碼。下面這個(gè)例子是Stack最經(jīng)典的演示三個(gè)不同顏色、不同尺寸的正方形疊在一起感受一下默認(rèn)的層級(jí)效果。Entry Component struct StackDemo { build() { Stack() { Column() .width(240) .height(240) .backgroundColor(#FF6B6B) Column() .width(160) .height(160) .backgroundColor(#4ECDC4) Column() .width(90) .height(90) .backgroundColor(#FFE66D) } .width(100%) .height(100%) .alignContent(Alignment.Center) } }代碼里我特意把三個(gè)Column的寬高設(shè)成了240、160、90三檔背景色也不一樣。運(yùn)行一下你就明白Stack的行為模式了三個(gè)子組件默認(rèn)重疊對(duì)齊對(duì)齊方式由Stack自身的alignContent屬性決定這里我設(shè)成了Alignment.Center所以三者都水平垂直居中先寫(xiě)的紅色塊在底層最后寫(xiě)的黃色塊在最上層所以黃色塊完整可見(jiàn)綠色塊露出四周紅色塊只露出一圈邊框每個(gè)子組件的位置互不影響不存在線性布局那種擠壓和占位問(wèn)題。這個(gè)Demo雖然短但已經(jīng)把Stack的核心機(jī)制演示透了。接下來(lái)的所有復(fù)雜效果本質(zhì)都是在“多個(gè)子組件疊放”的基礎(chǔ)上加上尺寸、位置、事件的精確控制。3. 控制子組件位置的兩種姿勢(shì)整體對(duì)齊與個(gè)體對(duì)齊3.1 容器級(jí)對(duì)齊alignContent先講那個(gè)管全局的參數(shù)alignContent。這個(gè)屬性掛在Stack根節(jié)點(diǎn)上決定所有子組件的“默認(rèn)排隊(duì)位置”。它的取值范圍就是Alignment那一組枚舉常見(jiàn)的有枚舉值實(shí)際效果Alignment.TopStart所有子組件默認(rèn)對(duì)齊到左上角Alignment.Top所有子組件默認(rèn)對(duì)齊到頂部水平居中Alignment.TopEnd所有子組件默認(rèn)對(duì)齊到右上角Alignment.Start所有子組件默認(rèn)對(duì)齊到左側(cè)垂直居中Alignment.Center所有子組件默認(rèn)水平垂直居中Alignment.End所有子組件默認(rèn)對(duì)齊到右側(cè)垂直居中Alignment.BottomStart所有子組件默認(rèn)對(duì)齊到左下角Alignment.Bottom所有子組件默認(rèn)對(duì)齊到底部水平居中Alignment.BottomEnd所有子組件默認(rèn)對(duì)齊到右下角實(shí)操里我的經(jīng)驗(yàn)是先把整個(gè)Stack的alignContent設(shè)為某個(gè)基準(zhǔn)位置比如一個(gè)全屏的Stack通常設(shè)成Alignment.Center或者Alignment.Bottom這樣大多數(shù)子組件不需要單獨(dú)設(shè)置位置只有少數(shù)元素再用alignSelf做微調(diào)。要注意alignContent只是一個(gè)“默認(rèn)值”邏輯不是強(qiáng)制鎖死。意思就是子組件如果自己帶了alignSelf或者margin、position之類的屬性那以它自己的為準(zhǔn)。所以別擔(dān)心設(shè)了容器級(jí)對(duì)齊后所有兒子就只能擠在一個(gè)角落了后面還有手段解放它們。3.2 子組件級(jí)對(duì)齊alignSelf再講那個(gè)管個(gè)體的屬性alignSelf。這個(gè)屬性讓單個(gè)子組件在Stack內(nèi)部單獨(dú)調(diào)整自己的對(duì)齊方式完全不用管兄弟組件。用法是在子組件鏈?zhǔn)秸{(diào)用里加一個(gè).alignSelf()Stack({ alignContent: Alignment.Center }) { Column() .width(200) .height(200) .backgroundColor(#FF6B6B) Text(右下角標(biāo)簽) .alignSelf(Alignment.BottomEnd) .margin({ right: 16, bottom: 16 }) .fontSize(14) .fontColor(Color.White) .backgroundColor(#33000000) .padding({ left: 8, right: 8, top: 4, bottom: 4 }) .borderRadius(4) } .width(100%) .height(200)注意這里Stack容器整體alignContent設(shè)了Center但第二個(gè)子組件Text通過(guò)alignSelf(BottomEnd)把自己定位到了右下角還加了margin進(jìn)一步偏移。這就是Stack真正靈活的地方全局統(tǒng)一局部自由互不干擾。實(shí)戰(zhàn)里alignSelf最好用的場(chǎng)景就是做角標(biāo)。比如一個(gè)卡片右上角的“HOT”標(biāo)簽整個(gè)卡片放在一個(gè)居中Stack里標(biāo)簽自己alignSelf到TopEnd再margin調(diào)整距離邊緣的間距幾行代碼搞定不用嵌套一堆容器。3.3 熱搜實(shí)戰(zhàn)底部上方100居中的寫(xiě)法下面進(jìn)入很多初學(xué)者問(wèn)了無(wú)數(shù)遍的實(shí)戰(zhàn)題Stack里的一個(gè)子組件要相對(duì)整個(gè)Stack的水平方向居中同時(shí)垂直方向距離底部100。別小看這個(gè)問(wèn)題熱搜里反復(fù)出現(xiàn)“鴻蒙 stack布局子組件怎么控制自己在底部上方100的位置居中”說(shuō)明卡在這的人真不少。先給答案最簡(jiǎn)單的寫(xiě)法Entry Component struct BottomButtonDemo { build() { Stack() { // 背景層可以是任意內(nèi)容 Column() .width(100%) .height(100%) .backgroundColor(#F1F3F5) // 這個(gè)按鈕就是目標(biāo)水平居中距離底部100 Button(我知道了) .width(200) .height(48) .alignSelf(Alignment.Bottom) // 先放到水平居中、底部對(duì)齊 .margin({ bottom: 100 }) // 再往上推100 } .width(100%) .height(100%) } }拆解一下思路Stack對(duì)齊系統(tǒng)里Alignment.Bottom本身就是“水平居中底部對(duì)齊”所以直接alignSelf(Bottom)就完成了水平居中這一半。然后想做到“距離底部100”就在子組件的margin里把bottom設(shè)為100相當(dāng)于讓按鈕整體往上抬了100。兩步合起來(lái)就是底部上方100且水平居中。很多人想不明白的點(diǎn)在于是用margin還是position。在Stack里最簡(jiǎn)單有效的偏移方式就是margin它會(huì)參與布局計(jì)算真機(jī)上對(duì)尺寸自適應(yīng)也更友好。position屬性也能用但它會(huì)把元素變成絕對(duì)定位后續(xù)父容器尺寸變化時(shí)容易出現(xiàn)超出邊界的情況初學(xué)階段建議優(yōu)先用margin。如果還想更精細(xì)一點(diǎn)比如按鈕要求距離底部100同時(shí)還要距離右側(cè)20可以連續(xù)疊加先.alignSelf(Alignment.BottomEnd), 再.margin({ right: 20, bottom: 100 })。但注意一旦alignSelf用了End水平方向就不再是居中而是靠右了二者是不可兼得的“方向組合”。所以要先想清楚自己要的是靠哪邊。4. 層疊布局的高頻應(yīng)用場(chǎng)景4.1 右上角角標(biāo)電商列表的未讀紅點(diǎn)Stack在真實(shí)項(xiàng)目中最常見(jiàn)的用途就是角標(biāo)類需求。拿電商應(yīng)用舉例商品列表每個(gè)格子的右上角經(jīng)常會(huì)有一個(gè)“滿減”標(biāo)簽或者未讀紅點(diǎn)。這種UI結(jié)構(gòu)天然就是“原內(nèi)容 覆蓋物”的關(guān)系用線性布局寫(xiě)會(huì)麻煩到懷疑人生用Stack寫(xiě)就是兩三行的事。Entry Component struct BadgeDemo { build() { Stack({ alignContent: Alignment.Center }) { // 商品圖底板 Column() .width(120) .height(120) .backgroundColor(#DEE2E6) .borderRadius(12) // 右上角紅點(diǎn) Column() .width(16) .height(16) .backgroundColor(#FA5252) .borderRadius(8) .alignSelf(Alignment.TopEnd) .margin({ top: 6, right: 6 }) } .width(100%) .height(100%) } }這里我假裝商品底圖是一個(gè)灰色色塊紅點(diǎn)通過(guò)alignSelf(TopEnd)跑到右上角再用margin把紅點(diǎn)往里收6避免貼邊太緊。你把這個(gè)紅點(diǎn)換成Text標(biāo)簽里面塞數(shù)字或者“NEW”就是一個(gè)標(biāo)準(zhǔn)的加號(hào)角標(biāo)。做角標(biāo)的時(shí)候有個(gè)細(xì)節(jié)值得注意角標(biāo)內(nèi)容變化時(shí)比如從9變成99它的寬度會(huì)自動(dòng)撐開(kāi)但因?yàn)閍lignSelf加margin的寫(xiě)法不會(huì)影響容器其他兄弟組件所以整體布局不會(huì)晃動(dòng)這一點(diǎn)比用線性布局里做fixed寬高的方案穩(wěn)得多。4.2 懸浮按鈕與底部操作欄另一個(gè)高頻場(chǎng)景是做頁(yè)面的懸浮操作區(qū)。比如一個(gè)視頻播放頁(yè)面返回按鈕、點(diǎn)贊按鈕、評(píng)論輸入框經(jīng)常要懸浮在播放器內(nèi)容上。這種界面用Stack就是天然解背景放視頻層前景放操作層互不打擾。Entry Component struct FloatActionDemo { build() { Stack() { // 模擬視頻區(qū)域 Column() .width(100%) .height(100%) .backgroundColor(#212529) // 頂部返回按鈕 Button(返回) .backgroundColor(#66000000) .fontColor(Color.White) .alignSelf(Alignment.TopStart) .margin({ left: 16, top: 16 }) // 底部操作欄 Row() { Text(點(diǎn)贊) Text(評(píng)論) Text(分享) } .width(100%) .justifyContent(FlexAlign.SpaceAround) .backgroundColor(#66000000) .fontColor(Color.White) .padding({ top: 10, bottom: 10 }) .alignSelf(Alignment.Bottom) } .width(100%) .height(100%) } }從上面這段可以看到Stack不僅能容納單個(gè)組件里面嵌套一個(gè)Row再放整行操作欄也完全沒(méi)問(wèn)題。也就是說(shuō)Stack的層級(jí)能力完全可以搭載一行內(nèi)部有復(fù)雜布局的區(qū)塊它只負(fù)責(zé)“這行整體待在我這個(gè)容器底下”不負(fù)責(zé)管行內(nèi)元素的排列。這種做法比用絕對(duì)坐標(biāo)定位的寫(xiě)法省心在一點(diǎn)不同屏幕尺寸下Stack的百分比寬高依然生效懸浮按鈕的位置不會(huì)因?yàn)闄C(jī)型尺寸變化而跑偏。4.3 圖片文字疊加封面卡片圖片上蓋文字基本是內(nèi)容類應(yīng)用的家常便飯。頭條、抖音、購(gòu)物車?yán)锏纳唐房ǘ荚谕孢@個(gè)套路一張封面圖底下蓋一層半透明漸變或者一塊深色遮罩再放標(biāo)題和價(jià)格。實(shí)現(xiàn)上仍然是Stack整個(gè)卡片只有一層結(jié)構(gòu)Entry Component struct CoverCardDemo { build() { Stack() { // 圖片占位實(shí)際開(kāi)發(fā)換成Image組件 Column() .width(100%) .height(200) .backgroundColor(#343A40) // 底部信息遮罩層 Column() .width(100%) .height(60) .backgroundColor(#AA000000) .alignSelf(Alignment.Bottom) // 白色文字 Text(這是一條測(cè)試標(biāo)題長(zhǎng)度隨意觀察換行效果) .fontSize(16) .fontColor(Color.White) .alignSelf(Alignment.BottomStart) .margin({ left: 12, right: 60, bottom: 20 }) } .width(100%) .height(200) .borderRadius(12) .clip(true) } }這里上方遮罩和文字都在Stack里遮罩通過(guò)alignSelf(Bottom)固定在底部區(qū)域文字通過(guò)BottomStart加margin對(duì)齊到左下角right留了60的空間給可能存在的價(jià)格標(biāo)簽。最后那個(gè).clip(true)很重要它讓Stack裁剪掉超出圓角范圍的子組件不然蓋上的遮罩會(huì)把父容器的圓角給“頂?shù)簟毙Ч浅３蟆?.4 頭像與在線狀態(tài)徽章最后一個(gè)高頻場(chǎng)景是社交應(yīng)用里幾乎人人見(jiàn)過(guò)的頭像加狀態(tài)點(diǎn)。頭像底部對(duì)齊在線狀態(tài)點(diǎn)壓到頭像右下角稍微露出半個(gè)身位。Entry Component struct AvatarDemo { build() { Stack() { // 頭像外層白圈 Column() .width(72) .height(72) .backgroundColor(#FFFFFF) .borderRadius(36) // 頭像內(nèi)層圖 Column() .width(64) .height(64) .backgroundColor(#ADB5BD) .borderRadius(32) // 在線狀態(tài)點(diǎn) Column() .width(18) .height(18) .backgroundColor(#40C057) .borderRadius(9) .alignSelf(Alignment.BottomEnd) .margin({ right: 2, bottom: 2 }) } .width(100%) .height(100%) } }這個(gè)例子的重點(diǎn)是那個(gè)狀態(tài)點(diǎn)它比頭像本身小一圈而且刻意露出棋子邊兒這種效果在線性布局里做會(huì)很別扭你需要算各種偏移量。但在Stack里就是alignSelf到右下角再margin往外挪一點(diǎn)點(diǎn)即可和實(shí)際設(shè)計(jì)稿的對(duì)齊意圖非常匹配。5. 避坑指南布局重疊、事件穿透與性能5.1 布局重疊不是bug但要注意層級(jí)搜“布局重疊”這個(gè)詞的人很多是因?yàn)樵赟tack里發(fā)現(xiàn)子組件疊到不想疊的地方以為出bug了。其實(shí)這不是錯(cuò)誤而是Stack的設(shè)計(jì)目的。真正該做的是明確每個(gè)子組件的層級(jí)順序和位置。Stack的子組件層級(jí)規(guī)則很簡(jiǎn)單先寫(xiě)的在下后寫(xiě)的在上而zIndex屬性可以顯式調(diào)整。比如有兩個(gè)按鈕疊在一起想讓紅色的永遠(yuǎn)蓋在藍(lán)色上面在紅色按鈕上加一個(gè).zIndex(2)藍(lán)色設(shè).zIndex(1)層級(jí)關(guān)系就鎖死了。實(shí)際項(xiàng)目里層級(jí)沖突最容易出現(xiàn)在“同一個(gè)Stack里既有背景元素又有交互元素”的場(chǎng)景。我的習(xí)慣是把背景類元素放在最前面交互元素隨后最后用zIndex控制覆蓋關(guān)系避免因?yàn)槎鄠€(gè)元素同時(shí)集中在某個(gè)區(qū)域?qū)е曼c(diǎn)擊目標(biāo)被兄弟組件擋住。5.2 事件命中與穿透控制比層級(jí)更隱蔽的坑是事件穿透。Stack里上層組件如果設(shè)置成了透明背景或者背景色接近全透明它雖然看不見(jiàn)但依然會(huì)攔截點(diǎn)擊事件。也就是說(shuō)你放了一個(gè)全屏透明層在頂部下面所有按鈕都會(huì)點(diǎn)不動(dòng)但界面上根本看不到原因。解決辦法是使用hitTestBehavior屬性。ArkTS里對(duì)它有三種主流的取值取值行為HitTestMode.Default默認(rèn)模式組件自身響應(yīng)事件并且阻止事件傳遞給底部兄弟組件HitTestMode.Block組件自身不響應(yīng)事件但依然阻斷事件向下傳遞HitTestMode.Transparent組件自身嘗試響應(yīng)事件同時(shí)透?jìng)鹘o下層組件HitTestMode.None組件完全不參與事件命中測(cè)試事件直接穿過(guò)它命中底層組件做了一個(gè)懸浮評(píng)分彈層時(shí)經(jīng)常需要半透明遮罩后面的內(nèi)容不可點(diǎn)那遮罩就設(shè)Default如果是一個(gè)純裝飾的引導(dǎo)層要既能響應(yīng)點(diǎn)擊關(guān)閉又讓點(diǎn)擊事件穿透到底層那就用Transparent。這個(gè)調(diào)起來(lái)需要結(jié)合具體交互設(shè)計(jì)去試但知道有這些選項(xiàng)排查問(wèn)題時(shí)就快多了。5.3 尺寸約束、百分比與自適應(yīng)邊界Stack雖然“自由”但它對(duì)子組件的尺寸仍然有約束。子組件如果沒(méi)設(shè)置寬高會(huì)盡量跟隨內(nèi)容大小如果設(shè)置了百分比寬高參考的是Stack自身的尺寸如果子組件的固定尺寸超過(guò)了Stack容器就會(huì)發(fā)生溢出。實(shí)際開(kāi)發(fā)里我見(jiàn)過(guò)不少新手在Stack里放了固定寬度300的組件但容器只有200寬真機(jī)上部分內(nèi)容被切掉或者莫名其妙把別的組件頂出區(qū)域。這種時(shí)候優(yōu)先檢查的是子組件是否設(shè)置了合理的最大寬度、容器是否設(shè)置了.clip(true)以及用的是不是百分比寬高。自適應(yīng)場(chǎng)景下建議優(yōu)先用百分比和margin/dimension配合少寫(xiě)死px數(shù)值。比如一個(gè)卡片要適配不同手機(jī)寬度把卡片寬度設(shè)成90%角標(biāo)的位置用alignSelf加margin控制這樣任何屏幕尺寸下都能保持相對(duì)位置一致不會(huì)因?yàn)槟骋欢诉^(guò)窄導(dǎo)致界面元素跑出屏幕。5.4 不要濫用Stack什么時(shí)候換FlexStack雖然好用但不是什么場(chǎng)景都適合。如果一個(gè)頁(yè)面里幾乎都是依次排列的內(nèi)容比如表單頁(yè)、設(shè)置頁(yè)、縱向列表頁(yè)用Column或者List才是正解硬用Stack去疊反而會(huì)讓布局層級(jí)變得復(fù)雜維護(hù)成本直線上升。給一個(gè)簡(jiǎn)單的判斷標(biāo)準(zhǔn)如果界面元素之間沒(méi)有“重疊”需求并且需要響應(yīng)式換行或按比例分配空間那就別用Stack如果元素之間天然存在壓蓋關(guān)系、需要Z軸層疊、需要某個(gè)元素懸浮在其他內(nèi)容之上那Stack就是最佳選擇。還有就是性能。Stack本身并不重但如果一個(gè)頁(yè)面里嵌套了十幾層Stack每層還都帶了復(fù)雜的子組件那渲染壓力會(huì)比同等結(jié)構(gòu)的Column大不少。我的習(xí)慣是控制層級(jí)深度能用一層Stack加alignSelf解決的問(wèn)題絕不用三層嵌套。這不是Stack的問(wèn)題是所有容器布局的通用原則。6. 進(jìn)階Stack與其他布局的搭配與狀態(tài)聯(lián)動(dòng)6.1 頁(yè)面路由棧與Stack布局的區(qū)別講到這里順便厘清一個(gè)概念A(yù)rkTS里的頁(yè)面路由棧router棧和Stack布局是兩碼事。路由棧管的是頁(yè)面之間的跳轉(zhuǎn)每個(gè)頁(yè)面是獨(dú)立的路由實(shí)例從一個(gè)頁(yè)面跳到另一個(gè)頁(yè)面靠的是router.pushUrl。而Stack布局是在同一個(gè)頁(yè)面內(nèi)部管的是組件和組件的疊放。這兩個(gè)概念在鴻蒙開(kāi)發(fā)里都帶“?！弊值珜蛹?jí)完全不同千萬(wàn)別混。在頁(yè)面上看不到“路由棧”這個(gè)組件你是操作不了它的顯隱的反過(guò)來(lái)Stack布局也沒(méi)有能力去控制頁(yè)面跳轉(zhuǎn)它只負(fù)責(zé)組件排版。把它們弄混是不少初學(xué)者寫(xiě)了好幾天之后才反應(yīng)過(guò)來(lái)的事。如果看到有些人把多個(gè)“頁(yè)面內(nèi)容”直接塞進(jìn)同一個(gè)Stack里用狀態(tài)變量控制顯示和隱藏那一定要小心這屬于“偽頁(yè)面切換”頁(yè)面之間沒(méi)有獨(dú)立生命周期狀態(tài)管理也容易亂不如直接用路由棧來(lái)得干凈。6.2 配合Flex/Grid實(shí)現(xiàn)復(fù)雜面板Stack的另一個(gè)高價(jià)值用法是在復(fù)雜面板里作為“局部層疊容器”和其他布局嵌套。最常見(jiàn)的就是一個(gè)Grid網(wǎng)格每個(gè)格子內(nèi)部再用Stack去疊角標(biāo)或者一個(gè)Flex流式標(biāo)簽區(qū)域每個(gè)標(biāo)簽做一個(gè)小型Stack來(lái)展示刪除按鈕。比如做一個(gè)九宮格圖片上傳組件熱搜里也經(jīng)常有人搜“android 九宮格布局”每格的右上角放一個(gè)刪除按鈕就可以在Grid的item構(gòu)造里用一個(gè)Stack包住圖片和刪除按鈕。這樣外層Grid負(fù)責(zé)網(wǎng)格排布內(nèi)層Stack負(fù)責(zé)“圖片刪除鍵”的層疊關(guān)系職責(zé)清晰不會(huì)互相污染。Grid() { ForEach(this.imageList, (item: string) { GridItem() { Stack({ alignContent: Alignment.Center }) { // 假圖片實(shí)際是Image(item) Column() .width(100%) .height(100%) .backgroundColor(#E9ECEF) // 右上角刪除按鈕 Text(×) .fontSize(18) .fontColor(Color.White) .backgroundColor(#FA5252) .borderRadius(10) .width(20) .height(20) .textAlign(TextAlign.Center) .alignSelf(Alignment.TopEnd) .margin({ top: 4, right: 4 }) .onClick(() { this.imageList this.imageList.filter((v: string) v ! item) }) } } }, (item: string) item) } .columnsTemplate(1fr 1fr 1fr) .rowsTemplate(1fr 1fr 1fr) .columnsGap(8) .rowsGap(8) .width(100%) .height(260)這套組合方式在內(nèi)容型應(yīng)用里幾乎天天用。它繼承了Grid的整齊排布優(yōu)點(diǎn)又疊加了Stack的層疊能力兩者配合得當(dāng)代碼可讀性和UI還原度都很好。6.3 狀態(tài)管理下的層疊刷新細(xì)節(jié)最后提一個(gè)和狀態(tài)管理相關(guān)的細(xì)節(jié)。Stack里的子組件顯隱切換如果依賴的是狀態(tài)變量那么狀態(tài)變化的觸發(fā)方式會(huì)影響層級(jí)刷新效果。比如你在Stack里放了一個(gè)loading蒙層用一個(gè)布爾變量控制它是否顯示。當(dāng)網(wǎng)絡(luò)請(qǐng)求開(kāi)始時(shí)把變量設(shè)為true請(qǐng)求結(jié)束時(shí)設(shè)為false。這時(shí)候要注意Stack并不會(huì)因?yàn)槟愀淖円粋€(gè)狀態(tài)變量就“重新分配”所有子組件的位置它只會(huì)更新那些真正依賴該狀態(tài)的節(jié)點(diǎn)的可見(jiàn)性、尺寸、內(nèi)容等。所以只要你沒(méi)有改其他子組件的數(shù)據(jù)兄弟組件的位置基本不會(huì)跳動(dòng)。但如果你的狀態(tài)變量里存的是一個(gè)數(shù)組比如列表數(shù)據(jù)并且你直接修改了數(shù)組某個(gè)元素就可能觸發(fā)包含該元素的組件的重新測(cè)量和繪制。如果組件剛好在Stack里且尺寸是自適應(yīng)內(nèi)容那布局就會(huì)重新計(jì)算。這一機(jī)制本身沒(méi)問(wèn)題但如果發(fā)現(xiàn)某些堆疊組件“莫名抖動(dòng)”先排查一下是不是父組件或者兄弟組件的某個(gè)狀態(tài)被無(wú)意間更新了。我建議把“遮罩層”“懸浮層”這類組件的顯隱和業(yè)務(wù)數(shù)據(jù)狀態(tài)分開(kāi)維護(hù)盡量讓它們只依賴一兩個(gè)專門(mén)的布爾變量不要和列表、表單數(shù)據(jù)混在同一個(gè)大對(duì)象里。這樣狀態(tài)刷新時(shí)影響范圍最小不是所有數(shù)據(jù)變了都需要重新計(jì)算整個(gè)Stack的布局。Stack這個(gè)布局在ArkTS里的地位我用一句話總結(jié)就是它解決的是你無(wú)法用線性容器解決的“疊放”需求但它的靈活性也意味著你需要有更明確的層級(jí)意識(shí)和尺寸控制能力。上面的內(nèi)容是我在實(shí)際項(xiàng)目中反復(fù)試出來(lái)的幾乎每個(gè)示例都在真機(jī)上跑過(guò)。尤其是alignSelf加margin這套組合方式學(xué)會(huì)之后鴻蒙界面里能擋住你的布局難題十之八九都能化解。如果你在某一步踩了坑建議先回到這一篇文章把第3節(jié)的兩種對(duì)齊方式重新吃透再去看第5節(jié)的避坑場(chǎng)景。很多看起來(lái)玄乎的布局問(wèn)題本質(zhì)上就是對(duì)“整體對(duì)齊”和“個(gè)體對(duì)齊”這兩個(gè)概念沒(méi)分清楚。搞定了這兩個(gè)點(diǎn)Stack用起來(lái)就順暢多了。