滑動(dòng)多選穩(wěn)定ID與布局切換【鴻蒙心跡】)
相冊(cè)類(lèi)應(yīng)用做成兩列網(wǎng)格并不難真正容易出問(wèn)題的是用戶正在批量選圖的時(shí)候把折疊屏展開(kāi)。折疊前第三張照片在第二行展開(kāi)后同一張可能移到第一行如果業(yè)務(wù)把“第幾個(gè)格子被選中”作為記錄布局重排以后勾選標(biāo)記就會(huì)落到另一張照片上。更尷尬的是頁(yè)面明明還顯示“已選擇 3 張”底部導(dǎo)出拿到的卻不是剛才圈中的那三張。這次把問(wèn)題放進(jìn)一個(gè)小工程PhotoBatch。它不是大型圖庫(kù)也沒(méi)有接入相冊(cè)媒體庫(kù)只用八張帶穩(wěn)定業(yè)務(wù) ID 的示例素材固定選擇P102、P104、P107選擇數(shù)量為3。界面有2 列 / 4 列兩種排版展開(kāi)態(tài)展示四列編輯狀態(tài)叫EDITING。討論重點(diǎn)是三件事誰(shuí)保管選中結(jié)果、網(wǎng)格重排怎樣處理、離開(kāi)編輯模式該不該清空它。圖 01兩列與四列布局切換的概念封面。示例配圖用于解釋穩(wěn)定 ID不代表實(shí)機(jī)折疊動(dòng)作已經(jīng)測(cè)試。## 一、我不想再讓數(shù)組下標(biāo)承擔(dān)業(yè)務(wù)身份如果收藏列表永遠(yuǎn)不插入、不刪除、不排序索引看起來(lái)非常方便。selectedIndexes [1, 3, 6]能在當(dāng)下圈出三張圖?？梢坏┣袚Q排序方式甚至只是讓用戶從大屏換到小屏重新加載數(shù)據(jù)下標(biāo)就只能描述一個(gè)位置不能描述一張具體照片。位置由布局決定身份則應(yīng)該由業(yè)務(wù)數(shù)據(jù)決定把二者綁在一起遲早會(huì)有問(wèn)題。ArkUI 的 Grid/GridItem 提供了網(wǎng)格展示和選擇狀態(tài)回調(diào)華為官方創(chuàng)建網(wǎng)格文檔還特別提示選擇記錄建議使用不會(huì)隨位置變化的唯一標(biāo)識(shí)。文檔記載自 API 26.0.0 起 Grid 支持編輯模式下的手指滑動(dòng)多選包括enableEditMode、editModeOptions、selectable、selected與onSelect。這意味著功能不能無(wú)條件宣稱(chēng)覆蓋所有舊系統(tǒng)。需要照顧更早目標(biāo)版本的產(chǎn)品可以先采用普通點(diǎn)擊選中再按設(shè)備能力逐步增加滑動(dòng)多選。https://developer.huawei.com/consumer/cn/doc/doccenter-capabilities/arkts-layout-development-create-grid先把示例數(shù)據(jù)和選中集合寫(xiě)成可測(cè)試的純業(yè)務(wù)模型。這段代碼要解決的問(wèn)題是布局怎么變化都以照片 ID 判斷是否選中并在數(shù)據(jù)刷新時(shí)剔除已不存在的 ID。arktsinterface PhotoAsset { id: string title: string}class PhotoSelection { private ids: Setstring new Setstring() setSelected(id: string, value: boolean): void { if (value) this.ids.add(id) else this.ids.delete(id) } has(id: string): boolean { return this.ids.has(id) } snapshot(): string[] { return Array.from(this.ids.values()) } reconcile(assets: PhotoAsset[]): string[] { const alive new Setstring(assets.map((p: PhotoAsset): string p.id)) this.ids.forEach((id: string) { if (!alive.has(id)) this.ids.delete(id) }) return this.snapshot() }}Set 適合存“已經(jīng)選擇了哪些照片”但不意味著可以直接把一個(gè)原地修改的 Set 扔進(jìn)任意狀態(tài)裝飾器就期待 UI 自動(dòng)重繪。業(yè)務(wù)層保管集合展示層每次收到變化后取出新數(shù)組賦給 State更容易觀察狀態(tài)更新。reconcile() 也不是強(qiáng)行取消所有選擇它僅處理已從當(dāng)前素材集合中消失的 ID如果圖庫(kù)采用分頁(yè)模式還要區(qū)分“當(dāng)前頁(yè)沒(méi)加載到”和“業(yè)務(wù)記錄已經(jīng)被刪除”不能對(duì)分頁(yè)列表直接做全量回收。## 二、選中態(tài)留在業(yè)務(wù)里網(wǎng)格只負(fù)責(zé)表達(dá)GridItem 知道自己能否被選中也會(huì)在用戶切換選擇時(shí)給出一個(gè)布爾值。它不必知道“這張照片在整個(gè)項(xiàng)目里排第幾”。當(dāng) columnsTemplate 從兩列改成四列Grid 重新排布子項(xiàng)當(dāng)前圖片仍然以 P102 等 ID 去讀取業(yè)務(wù)記錄視覺(jué)勾選就能找回正確對(duì)象。下面是頁(yè)面的關(guān)鍵結(jié)構(gòu)。代碼解決的是把官方的編輯模式回調(diào)與自己的選中賬本連接起來(lái)而不是實(shí)現(xiàn)一套新的手勢(shì)識(shí)別器。真實(shí)工程需配合完整的資源文件、頁(yè)面容器和圖項(xiàng) Builder這里用文字卡片縮小代碼范圍。arktsEntryComponentstruct PhotoBatchPage { State columns: number 4 State editMode: boolean true State chosen: string[] [‘P102’, ‘P104’, ‘P107’] private assets: PhotoAsset[] [ { id: ‘P101’, title: ‘雪山’ }, { id: ‘P102’, title: ‘花朵’ }, { id: ‘P103’, title: ‘湖泊’ }, { id: ‘P104’, title: ‘森林’ }, { id: ‘P105’, title: ‘海岸’ }, { id: ‘P106’, title: ‘城市’ }, { id: ‘P107’, title: ‘草地’ }, { id: ‘P108’, title: ‘建筑’ } ] private select(id: string, value: boolean): void { this.chosen value ? […new Set([…this.chosen, id])] : this.chosen.filter((key: string): boolean key ! id) } build() { Column() { Text(已選擇 ${this.chosen.length} 張) Grid() { ForEach(this.assets, (item: PhotoAsset) { GridItem() { Text(${item.id} ${item.title}) } .selectable(true) .selected(this.chosen.includes(item.id)) .onSelect((selected: boolean) this.select(item.id, selected)) }, (item: PhotoAsset): string item.id) } .columnsTemplate(this.columns 4 ? ‘1fr 1fr 1fr 1fr’ : ‘1fr 1fr’) .enableEditMode(this.editMode) .onEditModeChange((enabled: boolean) { this.editMode enabled }) .editModeOptions({ useDefaultMultiSelectStyle: true, enableTwoFingerMultiSelect: true }) } }}這段代碼假設(shè)項(xiàng)目的 SDK 和運(yùn)行設(shè)備具備相應(yīng) Grid 編輯模式能力不能直接拿到舊版工程中宣稱(chēng)通用。State chosen 是新的數(shù)組減少框架感知不到內(nèi)部集合變化的風(fēng)險(xiǎn)。ForEach 使用唯一 ID 作 key而不是索引否則同一業(yè)務(wù)記錄被移動(dòng)到其他位置時(shí)組件復(fù)用和勾選樣式可能互相影響。示例中第一次打開(kāi)就預(yù)置了三個(gè)選中值目的是讓圖片、日志與狀態(tài)一致不是在暗示系統(tǒng)默認(rèn)會(huì)替用戶選圖。*圖 02獨(dú)立制作的 DevEco Studio 風(fēng)格示意圖右側(cè)模擬器顯示四列布局與 P102/P104/P107 三項(xiàng)選擇底部 HiLog 為預(yù)設(shè)的教學(xué)日志不是真實(shí)設(shè)備采集證據(jù)。*## 三、布局改變是一件事編輯會(huì)話結(jié)束是另一件事從折疊態(tài)的 2 列切到展開(kāi)態(tài)的 4 列我希望視覺(jué)重新計(jì)算不希望業(yè)務(wù) ID 集合發(fā)生變化。這個(gè)區(qū)分可以用一個(gè)極小的方法表達(dá)輸入最新有效寬度只改變列數(shù)不碰 chosen。寬度最好來(lái)自實(shí)際容器的測(cè)量值而不是僅根據(jù)設(shè)備型號(hào)猜測(cè)“展開(kāi)”。分屏、懸浮窗口和橫豎屏變化同樣可能改變可用區(qū)域。第三段代碼專(zhuān)門(mén)用于處理這個(gè)邊界。這里的 600vp 是 Demo 人為選擇的閾值不是官方規(guī)定的折疊屏分界線。閾值要由真實(shí)頁(yè)面最小卡片寬度、留白和字體測(cè)量共同決定。arktsprivate adaptColumns(widthVp: number): void { if (!Number.isFinite(widthVp) || widthVp 0) return const next widthVp 600 ? 4 : 2 if (next ! this.columns) { this.columns next console.info([PhotoBatch] columns${next} selected${this.chosen.join(,)}) }}// 掛到實(shí)際需要測(cè)量的容器上// .onAreaChange((_old: Area, now: Area) {// this.adaptColumns(Number(now.width))// })開(kāi)發(fā)圖使用展開(kāi)態(tài)columns4日志寫(xiě)明selectedP102,P104,P107。把屏幕縮回兩列后應(yīng)該仍然是這三個(gè) ID唯一變化是卡片在網(wǎng)格中的位置。編輯模式結(jié)束則由產(chǎn)品決定是否清空如果底部操作欄只是暫時(shí)收起我傾向于保留選擇待用戶明確點(diǎn)擊“取消選擇”才清除如果進(jìn)入新相冊(cè)則應(yīng)按相冊(cè)會(huì)話創(chuàng)建新的集合。不要把onEditModeChange(false)簡(jiǎn)單等同于清空因?yàn)橄到y(tǒng)返回和手勢(shì)也可能導(dǎo)致編輯模式變化。## 四、先看可驗(yàn)證的狀態(tài)再談操作手感本文演示態(tài)固定為PhotoBatch任務(wù)編號(hào)BATCH_20261016_15狀態(tài)EDITING已選擇 3 張、當(dāng)前四列。手機(jī)界面示意展示三個(gè)綠色勾選標(biāo)識(shí)底部操作入口是“導(dǎo)出所選”和“取消選擇”。數(shù)據(jù)只表達(dá)選中不代表真的把相冊(cè)文件導(dǎo)出到了磁盤(pán)。類(lèi)似批量刪除、批量共享這樣的操作都應(yīng)該在業(yè)務(wù)層二次確認(rèn)選中的 ID 是否仍然有效。*圖 03純屏圖庫(kù)界面示意。實(shí)際項(xiàng)目應(yīng)繼續(xù)使用屏幕朗讀工具核對(duì)復(fù)選標(biāo)記名稱(chēng)并在真機(jī)上觀察雙指進(jìn)入編輯模式的手勢(shì)沖突。*怎樣檢查這個(gè)功能我會(huì)做一個(gè)很樸素的順序先選三張?jiān)購(gòu)膬闪懈臑樗牧写_認(rèn)選中 ID 沒(méi)變插入一張新照片確認(rèn)原有選擇沒(méi)有偏移從列表中真正刪除一項(xiàng)再用reconcile()清理該項(xiàng)最后退出編輯模式并重新進(jìn)入核對(duì)產(chǎn)品定義的保留策略。測(cè)試日志應(yīng)同時(shí)打印業(yè)務(wù) ID 和列數(shù)避免只記錄“選中數(shù)量 3”卻無(wú)法判斷選中對(duì)象是否正確。這里還要注意Grid 的“滑動(dòng)多選”并非免費(fèi)的所有場(chǎng)景都適用?？ㄆ瑑?nèi)部如果有橫向輪播、拖拽排序、長(zhǎng)按菜單多種手勢(shì)會(huì)競(jìng)爭(zhēng)觸摸事件。官方文檔也提到了自定義樣式下的手勢(shì)裁決。最安全的路徑是先保留系統(tǒng)默認(rèn)多選樣式在確實(shí)需要自定義時(shí)再逐項(xiàng)驗(yàn)證手勢(shì)熱區(qū)、輔助功能和低版本兼容行為。## 五、狀態(tài)穩(wěn)定比布局漂亮更重要這套方案的核心不是“從兩列變四列”這種效果而是讓布局變化只影響幾何分配讓業(yè)務(wù) ID 決定每一張照片的身份。它適用于折疊屏圖庫(kù)、平板素材管理以及窗口大小可變化的文件選擇器卻不覆蓋媒體訪問(wèn)權(quán)限、云相冊(cè)同步?jīng)_突也不解決跨設(shè)備事務(wù)一致性。實(shí)現(xiàn)落地前還需要在目標(biāo) SDK 下編譯enableEditMode等接口對(duì)低版本設(shè)置明確的交互降級(jí)策略。本文配圖為演示素材示例未在真實(shí) DevEco 項(xiàng)目或設(shè)備上運(yùn)行。把“布局策略”和“選中集合”這兩條線分清才不容易在多形態(tài)適配時(shí)把舊問(wèn)題重新帶回來(lái)。 ArkUI Grid：折疊屏圖庫(kù)滑動(dòng)多選穩(wěn)定ID與布局切換【鴻蒙心跡】
相冊(cè)類(lèi)應(yīng)用做成兩列網(wǎng)格并不難真正容易出問(wèn)題的是用戶正在批量選圖的時(shí)候把折疊屏展開(kāi)。折疊前第三張照片在第二行展開(kāi)后同一張可能移到第一行如果業(yè)務(wù)把“第幾個(gè)格子被選中”作為記錄布局重排以后勾選標(biāo)記就會(huì)落到另一張照片上。更尷尬的是頁(yè)面明明還顯示“已選擇 3 張”底部導(dǎo)出拿到的卻不是剛才圈中的那三張。這次把問(wèn)題放進(jìn)一個(gè)小工程PhotoBatch。它不是大型圖庫(kù)也沒(méi)有接入相冊(cè)媒體庫(kù)只用八張帶穩(wěn)定業(yè)務(wù) ID 的示例素材固定選擇P102、P104、P107選擇數(shù)量為3。界面有2 列 / 4 列兩種排版展開(kāi)態(tài)展示四列編輯狀態(tài)叫EDITING。討論重點(diǎn)是三件事誰(shuí)保管選中結(jié)果、網(wǎng)格重排怎樣處理、離開(kāi)編輯模式該不該清空它。圖 01兩列與四列布局切換的概念封面。示例配圖用于解釋穩(wěn)定 ID不代表實(shí)機(jī)折疊動(dòng)作已經(jīng)測(cè)試。## 一、我不想再讓數(shù)組下標(biāo)承擔(dān)業(yè)務(wù)身份如果收藏列表永遠(yuǎn)不插入、不刪除、不排序索引看起來(lái)非常方便。selectedIndexes [1, 3, 6]能在當(dāng)下圈出三張圖?？梢坏┣袚Q排序方式甚至只是讓用戶從大屏換到小屏重新加載數(shù)據(jù)下標(biāo)就只能描述一個(gè)位置不能描述一張具體照片。位置由布局決定身份則應(yīng)該由業(yè)務(wù)數(shù)據(jù)決定把二者綁在一起遲早會(huì)有問(wèn)題。ArkUI 的 Grid/GridItem 提供了網(wǎng)格展示和選擇狀態(tài)回調(diào)華為官方創(chuàng)建網(wǎng)格文檔還特別提示選擇記錄建議使用不會(huì)隨位置變化的唯一標(biāo)識(shí)。文檔記載自 API 26.0.0 起 Grid 支持編輯模式下的手指滑動(dòng)多選包括enableEditMode、editModeOptions、selectable、selected與onSelect。這意味著功能不能無(wú)條件宣稱(chēng)覆蓋所有舊系統(tǒng)。需要照顧更早目標(biāo)版本的產(chǎn)品可以先采用普通點(diǎn)擊選中再按設(shè)備能力逐步增加滑動(dòng)多選。https://developer.huawei.com/consumer/cn/doc/doccenter-capabilities/arkts-layout-development-create-grid先把示例數(shù)據(jù)和選中集合寫(xiě)成可測(cè)試的純業(yè)務(wù)模型。這段代碼要解決的問(wèn)題是布局怎么變化都以照片 ID 判斷是否選中并在數(shù)據(jù)刷新時(shí)剔除已不存在的 ID。arktsinterface PhotoAsset { id: string title: string}class PhotoSelection { private ids: Setstring new Setstring() setSelected(id: string, value: boolean): void { if (value) this.ids.add(id) else this.ids.delete(id) } has(id: string): boolean { return this.ids.has(id) } snapshot(): string[] { return Array.from(this.ids.values()) } reconcile(assets: PhotoAsset[]): string[] { const alive new Setstring(assets.map((p: PhotoAsset): string p.id)) this.ids.forEach((id: string) { if (!alive.has(id)) this.ids.delete(id) }) return this.snapshot() }}Set 適合存“已經(jīng)選擇了哪些照片”但不意味著可以直接把一個(gè)原地修改的 Set 扔進(jìn)任意狀態(tài)裝飾器就期待 UI 自動(dòng)重繪。業(yè)務(wù)層保管集合展示層每次收到變化后取出新數(shù)組賦給 State更容易觀察狀態(tài)更新。reconcile() 也不是強(qiáng)行取消所有選擇它僅處理已從當(dāng)前素材集合中消失的 ID如果圖庫(kù)采用分頁(yè)模式還要區(qū)分“當(dāng)前頁(yè)沒(méi)加載到”和“業(yè)務(wù)記錄已經(jīng)被刪除”不能對(duì)分頁(yè)列表直接做全量回收。## 二、選中態(tài)留在業(yè)務(wù)里網(wǎng)格只負(fù)責(zé)表達(dá)GridItem 知道自己能否被選中也會(huì)在用戶切換選擇時(shí)給出一個(gè)布爾值。它不必知道“這張照片在整個(gè)項(xiàng)目里排第幾”。當(dāng) columnsTemplate 從兩列改成四列Grid 重新排布子項(xiàng)當(dāng)前圖片仍然以 P102 等 ID 去讀取業(yè)務(wù)記錄視覺(jué)勾選就能找回正確對(duì)象。下面是頁(yè)面的關(guān)鍵結(jié)構(gòu)。代碼解決的是把官方的編輯模式回調(diào)與自己的選中賬本連接起來(lái)而不是實(shí)現(xiàn)一套新的手勢(shì)識(shí)別器。真實(shí)工程需配合完整的資源文件、頁(yè)面容器和圖項(xiàng) Builder這里用文字卡片縮小代碼范圍。arktsEntryComponentstruct PhotoBatchPage { State columns: number 4 State editMode: boolean true State chosen: string[] [‘P102’, ‘P104’, ‘P107’] private assets: PhotoAsset[] [ { id: ‘P101’, title: ‘雪山’ }, { id: ‘P102’, title: ‘花朵’ }, { id: ‘P103’, title: ‘湖泊’ }, { id: ‘P104’, title: ‘森林’ }, { id: ‘P105’, title: ‘海岸’ }, { id: ‘P106’, title: ‘城市’ }, { id: ‘P107’, title: ‘草地’ }, { id: ‘P108’, title: ‘建筑’ } ] private select(id: string, value: boolean): void { this.chosen value ? […new Set([…this.chosen, id])] : this.chosen.filter((key: string): boolean key ! id) } build() { Column() { Text(已選擇 ${this.chosen.length} 張) Grid() { ForEach(this.assets, (item: PhotoAsset) { GridItem() { Text(${item.id} ${item.title}) } .selectable(true) .selected(this.chosen.includes(item.id)) .onSelect((selected: boolean) this.select(item.id, selected)) }, (item: PhotoAsset): string item.id) } .columnsTemplate(this.columns 4 ? ‘1fr 1fr 1fr 1fr’ : ‘1fr 1fr’) .enableEditMode(this.editMode) .onEditModeChange((enabled: boolean) { this.editMode enabled }) .editModeOptions({ useDefaultMultiSelectStyle: true, enableTwoFingerMultiSelect: true }) } }}這段代碼假設(shè)項(xiàng)目的 SDK 和運(yùn)行設(shè)備具備相應(yīng) Grid 編輯模式能力不能直接拿到舊版工程中宣稱(chēng)通用。State chosen 是新的數(shù)組減少框架感知不到內(nèi)部集合變化的風(fēng)險(xiǎn)。ForEach 使用唯一 ID 作 key而不是索引否則同一業(yè)務(wù)記錄被移動(dòng)到其他位置時(shí)組件復(fù)用和勾選樣式可能互相影響。示例中第一次打開(kāi)就預(yù)置了三個(gè)選中值目的是讓圖片、日志與狀態(tài)一致不是在暗示系統(tǒng)默認(rèn)會(huì)替用戶選圖。*圖 02獨(dú)立制作的 DevEco Studio 風(fēng)格示意圖右側(cè)模擬器顯示四列布局與 P102/P104/P107 三項(xiàng)選擇底部 HiLog 為預(yù)設(shè)的教學(xué)日志不是真實(shí)設(shè)備采集證據(jù)。*## 三、布局改變是一件事編輯會(huì)話結(jié)束是另一件事從折疊態(tài)的 2 列切到展開(kāi)態(tài)的 4 列我希望視覺(jué)重新計(jì)算不希望業(yè)務(wù) ID 集合發(fā)生變化。這個(gè)區(qū)分可以用一個(gè)極小的方法表達(dá)輸入最新有效寬度只改變列數(shù)不碰 chosen。寬度最好來(lái)自實(shí)際容器的測(cè)量值而不是僅根據(jù)設(shè)備型號(hào)猜測(cè)“展開(kāi)”。分屏、懸浮窗口和橫豎屏變化同樣可能改變可用區(qū)域。第三段代碼專(zhuān)門(mén)用于處理這個(gè)邊界。這里的 600vp 是 Demo 人為選擇的閾值不是官方規(guī)定的折疊屏分界線。閾值要由真實(shí)頁(yè)面最小卡片寬度、留白和字體測(cè)量共同決定。arktsprivate adaptColumns(widthVp: number): void { if (!Number.isFinite(widthVp) || widthVp 0) return const next widthVp 600 ? 4 : 2 if (next ! this.columns) { this.columns next console.info([PhotoBatch] columns${next} selected${this.chosen.join(,)}) }}// 掛到實(shí)際需要測(cè)量的容器上// .onAreaChange((_old: Area, now: Area) {// this.adaptColumns(Number(now.width))// })開(kāi)發(fā)圖使用展開(kāi)態(tài)columns4日志寫(xiě)明selectedP102,P104,P107。把屏幕縮回兩列后應(yīng)該仍然是這三個(gè) ID唯一變化是卡片在網(wǎng)格中的位置。編輯模式結(jié)束則由產(chǎn)品決定是否清空如果底部操作欄只是暫時(shí)收起我傾向于保留選擇待用戶明確點(diǎn)擊“取消選擇”才清除如果進(jìn)入新相冊(cè)則應(yīng)按相冊(cè)會(huì)話創(chuàng)建新的集合。不要把onEditModeChange(false)簡(jiǎn)單等同于清空因?yàn)橄到y(tǒng)返回和手勢(shì)也可能導(dǎo)致編輯模式變化。## 四、先看可驗(yàn)證的狀態(tài)再談操作手感本文演示態(tài)固定為PhotoBatch任務(wù)編號(hào)BATCH_20261016_15狀態(tài)EDITING已選擇 3 張、當(dāng)前四列。手機(jī)界面示意展示三個(gè)綠色勾選標(biāo)識(shí)底部操作入口是“導(dǎo)出所選”和“取消選擇”。數(shù)據(jù)只表達(dá)選中不代表真的把相冊(cè)文件導(dǎo)出到了磁盤(pán)。類(lèi)似批量刪除、批量共享這樣的操作都應(yīng)該在業(yè)務(wù)層二次確認(rèn)選中的 ID 是否仍然有效。*圖 03純屏圖庫(kù)界面示意。實(shí)際項(xiàng)目應(yīng)繼續(xù)使用屏幕朗讀工具核對(duì)復(fù)選標(biāo)記名稱(chēng)并在真機(jī)上觀察雙指進(jìn)入編輯模式的手勢(shì)沖突。*怎樣檢查這個(gè)功能我會(huì)做一個(gè)很樸素的順序先選三張?jiān)購(gòu)膬闪懈臑樗牧写_認(rèn)選中 ID 沒(méi)變插入一張新照片確認(rèn)原有選擇沒(méi)有偏移從列表中真正刪除一項(xiàng)再用reconcile()清理該項(xiàng)最后退出編輯模式并重新進(jìn)入核對(duì)產(chǎn)品定義的保留策略。測(cè)試日志應(yīng)同時(shí)打印業(yè)務(wù) ID 和列數(shù)避免只記錄“選中數(shù)量 3”卻無(wú)法判斷選中對(duì)象是否正確。這里還要注意Grid 的“滑動(dòng)多選”并非免費(fèi)的所有場(chǎng)景都適用?？ㄆ瑑?nèi)部如果有橫向輪播、拖拽排序、長(zhǎng)按菜單多種手勢(shì)會(huì)競(jìng)爭(zhēng)觸摸事件。官方文檔也提到了自定義樣式下的手勢(shì)裁決。最安全的路徑是先保留系統(tǒng)默認(rèn)多選樣式在確實(shí)需要自定義時(shí)再逐項(xiàng)驗(yàn)證手勢(shì)熱區(qū)、輔助功能和低版本兼容行為。## 五、狀態(tài)穩(wěn)定比布局漂亮更重要這套方案的核心不是“從兩列變四列”這種效果而是讓布局變化只影響幾何分配讓業(yè)務(wù) ID 決定每一張照片的身份。它適用于折疊屏圖庫(kù)、平板素材管理以及窗口大小可變化的文件選擇器卻不覆蓋媒體訪問(wèn)權(quán)限、云相冊(cè)同步?jīng)_突也不解決跨設(shè)備事務(wù)一致性。實(shí)現(xiàn)落地前還需要在目標(biāo) SDK 下編譯enableEditMode等接口對(duì)低版本設(shè)置明確的交互降級(jí)策略。本文配圖為演示素材示例未在真實(shí) DevEco 項(xiàng)目或設(shè)備上運(yùn)行。把“布局策略”和“選中集合”這兩條線分清才不容易在多形態(tài)適配時(shí)把舊問(wèn)題重新帶回來(lái)。