一、引言电影院选座、演唱会抢票、飞机值机选座——这些都是我们日常中熟悉的空间选择交互。用户在二维平面上浏览、挑选、确认自己的位置系统实时反馈每个座位的状态变化。这类交互的复杂度远高于普通的表单或列表它不是简单的点击-确认而是一个多选、状态联动、价格运算、视觉映射的综合系统。在 ArkUI 中实现这样一个选座系统并非难事但要把它做得优雅、流畅、易维护需要开发者理解几个关键概念不可变状态更新State的深层数组替换、多选集合的 Set 管理去重、计数、遍历、视觉状态的色彩映射可用/已选/已售三态、以及嵌套 ForEach 的行列组织。本文将以一个**“影院选座购票”**实战 Demo 为载体深入解析以下几个核心技术点使用嵌套ForEach构建行列式座位矩阵State 不可变更新实现深层嵌套数据的响应式渲染Setstring管理多选集合避免数组 O(n) 遍历去重座位三态可选/已选/已售的视觉映射区域差异化定价策略前排/中排/后排Stack 叠层实现底部悬浮操作栏影院座位布局中的过道可视化阅读完本文你将掌握构建复杂交互界面的通用方法论——不仅仅是选座同样适用于选课、选房间、选工位等各种空间选择场景。二、数据结构设计2.1 两层嵌套行与座选座系统的核心数据结构是行 × 座的二维矩阵interfaceSeatInfo{id:string;// 唯一标识如 A05A排5号col:number;// 列号用于显示status:SeatStatus;// 座位状态}interfaceRowInfo{label:string;// 行标签如 Aseats:SeatInfo[];// 该行的所有座位}enumSeatStatus{AVAILABLE,// 可选灰蓝色SELECTED,// 已选蓝色高亮OCCUPIED,// 已售暗色不可点击}为什么选择行作为第一层而不是列因为影院的座位是按行排列的——用户在找座位时先确定第几排行再确定第几个列。数据结构与用户心智模型对齐能让代码更直观。每行的座位数不同8-10 个中间留有过道第 4-5 个座位之后。这种不规则网格用ForEach逐行渲染比 Grid 组件更灵活constROW_LABELS:string[][A,B,C,D,E,F,G,H];constSEATS_PER_ROW:number[][8,8,9,9,10,10,9,8];constAISLE_AFTER:number[][4,4,4,4,5,5,4,4];前排和后排座位少8-9 个中间排最多10 个。这种布局模拟了真实影院的座位分布——银幕在正前方最佳观影区在中央5-7 排这也是为什么我们给中排定价更高¥59 vs ¥39/¥49。2.2 用 Set 管理多选当用户选择多个座位时我们需要快速判断这个座位是否已被选中——这决定了它的显示颜色。如果使用数组string[]每次判断都需要 O(n) 遍历// ❌ 低效方式selectedIds:string[][];functionisSelected(id:string):boolean{returnthis.selectedIds.includes(id);// 每次 O(n)n 个座位选中时更慢}更优的方案是使用Setstring——O(1) 的增删查// ✅ 高效方式privateselectedIds:SetstringnewSet();functionisSelected(id:string):boolean{returnthis.selectedIds.has(id);// O(1)}在座位选择这种场景中Set 的优势不仅是时间复杂度。它还天然保证了唯一性——同一个座位不可能被选两次。如果用数组你需要额外的去重逻辑。注意selectedIds是private而非State——因为它不需要直接驱动 UI 渲染。UI 渲染由rows包含每个座位的status驱动selectedIds只是一个辅助查询和计算价格的工具。这种主状态rows 辅助索引selectedIds的设计避免了状态冗余和不一致的风险。三、状态管理模式3.1 State 的不可变性要求ArkUI 的State装饰器要求要触发 UI 重绘必须替换整个引用而非修改内部属性。这意味着// ❌ 不会触发重绘this.rows[0].seats[3].statusSeatStatus.SELECTED;// ✅ 会触发重绘创建全新的对象树constnewRows:RowInfo[][];for(letr0;rthis.rows.length;r){constrowthis.rows[r];constnewSeats:SeatInfo[][];for(lets0;srow.seats.length;s){constseatrow.seats[s];if(rtargetRowstargetSeat){newSeats.push({id:seat.id,col:seat.col,status:newStatus});}else{newSeats.push(seat);// 未变动的座位保留原引用}}newRows.push({label:row.label,seats:newSeats});}this.rowsnewRows;// 替换整个数组引用这个模式有几个值得注意的细节未变动的座位保留原引用newSeats.push(seat)直接把原来的SeatInfo对象放进新数组而不是创建副本。这节省了内存也让 ForEach 的键生成器更容易判断哪些组件需要重绘。只变动的座位创建新对象{ id: seat.id, col: seat.col, status: newStatus }是一个全新的对象字面量。ArkUI 框架检测到这个新引用就会重绘对应的座位组件。每一层都要新RowInfo的seats数组变了所以 RowInfo 本身也需要新对象。同样rows数组变了所以顶层数组也需要新引用。这是一个自下而上的不可变更新链。这种模式虽然代码量大但它保证了 UI 框架能精确追踪每个数据变化而不会出现状态变了但 UI 没更新的 bug。如果你习惯了 Redux 式的状态管理会发现这本质上是同样的不可变更新哲学。3.2 选择/取消的 toggle 逻辑每个座位的点击回调执行以下逻辑toggleSeat(rowIdx:number,seatIdx:number):void{// ... 不可变更新 rows ...if(seat.statusSeatStatus.OCCUPIED){return;// 已售座位不可点击}constisSelectedseat.statusSeatStatus.SELECTED;if(isSelected){this.selectedIds.delete(seat.id);// 取消选择 → 从 Set 移除}else{this.selectedIds.add(seat.id);// 选择 → 加入 Set}// 重新计算统计信息this.selectedCountthis.selectedIds.size;this.totalPricethis.computeTotalPrice();}selectedCount和totalPrice是两个State派生状态。它们可以直接从selectedIds计算得到但将它们声明为State的好处是它们可以独立驱动底部栏的 UI 更新而无需重新遍历所有行。computeTotalPrice():number{lettotal0;this.selectedIds.forEach((id:string){constrowCharid.charAt(0);// 取第一个字符 → AconstrowIndexROW_LABELS.indexOf(rowChar);if(rowIndex0){totalpriceForRow(rowIndex);// 查表获取该排价格}});returntotal;}价格计算利用了id的命名约定A05→ 首字符A是行标签避免了额外的查找表。这是一个小而巧的设计——座位 ID 不仅用于唯一标识还编码了位置信息。3.3 定价策略不同行有不同的票价模拟了真实影院的定价functionpriceForRow(rowIndex:number):number{if(rowIndex1)return39;// A-B 排前排 ¥39太近视线不佳if(rowIndex5)return59;// C-F 排中排 ¥59最佳观影区return49;// G-H 排后排 ¥49稍远但不错}中排C-F价格最高——这符合真实影院的定价逻辑中间排的视线最好。前排虽然离银幕近但需要仰头后排虽然便宜但距离远。这种差异化定价让 Demo 更接近真实产品。四、UI 视觉设计4.1 整体布局页面采用深色主题#1a1a2e深海军蓝从上到下分为五个区域1. 标题栏52vp左侧 选座购票标题右侧银河影院副标题。简洁、专业。2. 影片信息栏~60vp显示影片名称《星际穿越》、场次时间今天 19:30、影厅类型IMAX 厅、语言英语 2D。右上角显示起售价¥59 起。3. 银幕指示器~40vp一个弧形柱状形状左上/右上圆角 9999 形成弯曲效果模拟银幕的视觉轮廓。下方标注最佳观影区 · 中间 5-7 排用微弱的金色文字提示用户。4. 座位区域flex 1可滚动包含图例可选/已选/已售 价格分区和 8 排座位。每排有行标签A-H和 8-10 个座位按钮。中间有过道分隔第 4-5 个座位间有 16vp 的间隔。5. 底部操作栏position: bottom 0固定悬浮半透明深色背景显示已选座位数和总价。右侧有清空和确认选座两个按钮。4.2 座位视觉设计每个座位是一个 28×28vp 的圆角方块borderRadius(6)内部显示列号数字Column(){Text(seat.col.toString()).fontSize(9).fontColor(this.seatTextColor(seat.status))}.width(28).height(28).borderRadius(6).backgroundColor(this.seatColor(seat.status))三态色彩映射状态背景色文字色视觉含义AVAILABLE#3d3d5c灰蓝#aaaacc浅灰“可以选但还没选”SELECTED#1677FF蓝色#FFFFFF白色“我已选定了这个”OCCUPIED#2a2a3a深灰#555566暗灰“这个不属于你跳过去”色彩的选择不是随意的可选座位的灰蓝色#3d3d5c比深色背景稍亮有轻微的存在感但不会太显眼——用户能感知到这里有空位但不会被它们分散注意力。已选座位的蓝色#1677FF是最显眼的——它使用 App 主题色让用户一眼就能看到自己选了哪些座位。已售座位的深灰色#2a2a3a几乎融入背景——用户自动忽略它们不会浪费时间去点击。4.3 过道设计真实影院中座位中间有过道。我们用margin在特定座位后创建间隔.margin(sIdx1AISLE_AFTER[rIdx]?{left:0,right:16}:{left:0,right:0})AISLE_AFTER数组记录了每行的过道位置——在第 4 或第 5 个座位之后。sIdx 1是当前座位的列号从 1 开始当它与AISLE_AFTER[rIdx]相等时给这个座位加上 16vp 的右间距。这 16vp 的间隙在视觉上清晰地将座位分为左右两区让页面看起来更像真实影院。4.4 底部悬浮栏使用Stack.position({ bottom: 0 })实现固定悬浮Stack(){Column(){/* 主内容 */}Column(){Row(){// 已选 N 座 | 合计 ¥XXX// 清空 | 确认选座}}.width(100%).backgroundColor(#1a1a2eee)// 带透明度的深色背景.position({bottom:0})}#1a1a2eee中的ee是 alpha 通道——约 93% 不透明度。这让底部栏在视觉上与背景有所区分但又不完全遮挡背后的座位。如果使用完全不透明的#1a1a2e底部栏会显得过于重割裂了整体深色 UI 的统一感。确认选座按钮在selectedCount 0时呈现不可用状态灰色背景#555577选中座位后变为蓝色#1677FF。这个视觉变化给用户一个微妙的暗示——“你需要先选座位才能继续”。五、交互流程5.1 交互点Demo 提供 4 个交互点交互 1选择座位点击可选座位灰蓝色→ 变为蓝色高亮。底部栏同步更新已选数量和总价。每个座位的价格根据其所在行自动计算——A/B 排 ¥39C-F 排 ¥59G/H 排 ¥49。交互 2取消选择点击已选座位蓝色→ 恢复灰蓝色。底部栏数量和价格同步减少。交互 3清空选择点击清空按钮 → 所有已选座位恢复为可选状态。底部栏归零。这是一个防误操作的批量操作——用户可能选了错误的座位想重新来过。交互 4确认选座点击确认选座按钮 → 弹窗确认。确认后已选座位变为已售深灰色不可再点击。模拟了真实的购票流程——提交订单后座位锁定。5.2 已售座位不可交互if(seat.statusSeatStatus.OCCUPIED){return;// 已售 → 直接返回不做任何状态变更}这是选座系统的基本规则——已售出/已被锁定的座位不允许再次选择。在真实产品中还需要考虑并发问题你选座时可能另一个人也在选——但在前端 Demo 中我们用随机生成的已售座位来模拟这个场景。5.3 确认后的状态转移确认选座后执行的操作是将所有SELECTED状态的座位改为OCCUPIEDconfirmBooking():void{for(letr0;rthis.rows.length;r){for(lets0;srow.seats.length;s){if(seat.statusSeatStatus.SELECTED){// 改为 OCCUPIED}}}this.selectedIds.clear();this.selectedCount0;this.totalPrice0;}这里展示了一个完整的状态转移AVAILABLE → SELECTED → OCCUPIED。OCCUPIED是终态——座位一旦售出就不能再变。在真实系统中如果用户超过支付时间未付款座位会从OCCUPIED回到AVAILABLE。六、核心架构总结6.1 完整代码结构SeatSelectorPage ├── Stack根容器 │ ├── Column主内容区 │ │ ├── Row标题栏 │ │ ├── Row影片信息 │ │ ├── Column银幕指示器 图例 │ │ └── Scroll座位区域 │ │ └── ForEach rows → Row → ForEach seats → Column座位方块 │ └── Column底部操作栏position: bottom 0 │ └── Row已选统计 清空按钮 确认按钮6.2 数据流用户点击座位 → toggleSeat(rowIdx, seatIdx) → 深拷贝 rows 数组不可变更新 → 更新 selectedIds Set → 重新计算 selectedCount 和 totalPrice → State 触发 UI 重绘 → 座位颜色更新AVAILABLE ↔ SELECTED → 底部栏数字更新数据流是单向的用户操作 → 状态更新 → UI 重绘。没有双向绑定没有组件内部状态泄露——一切变化都从顶层状态开始层层向下传递。七、总结本文以一个**“影院选座购票”**完整 Demo 为载体深入解析了 ArkUI 中构建复杂交互界面的核心技术。回顾本文覆盖的重点嵌套 ForEach 的行列布局使用两层ForEach构建不规则二维网格每行座位数不同、中间有过道。这种方法比 Grid 更灵活——你可以为每行定制不同数量的座位、插入间隙、添加行标签。不可变状态更新State要求替换整个数组引用才能触发 UI 重绘。对于深层嵌套数据rows → seats → status需要在每一层创建新对象——未变动的元素保留原引用节省内存变动的元素创建新引用触发局部重绘。Set 管理多选集合Setstring提供 O(1) 增删查天然保证唯一性优于string[]includes()splice()的 O(n) 方案。将选中的座位 ID 存入 Set价格计算和数量统计直接调用forEach遍历——简洁高效。色彩状态映射三态可选/已选/已售分别使用不同亮度和饱和度的颜色。已售座位最暗融入背景、可选座位中等亮提示存在感、已选座位最亮主题色高亮。这种视觉层次让用户无需阅读任何文字就能瞬间理解每个座位的状态。差异化定价通过座位 ID 的首字符推导行索引查表获取每排价格。前排 ¥39太近、中排 ¥59最佳观影区、后排 ¥49稍远。这种基于位置的价格差异让 Demo 更接近真实产品。Stack position 悬浮栏使用Stack叠层容器和.position({ bottom: 0 })实现底部操作栏的固定悬浮。半透明背景#1a1a2eee既与主内容区分又不完全遮挡后排座位。选座系统是移动端复杂交互的典型代表——它不是简单的点击按钮而是多对象选择、状态联动、视觉映射、价格计算的综合场景。理解本文中的不可变更新、Set 多选管理和色彩状态映射你就能将这些模式应用于任何需要空间选择的场景飞机选座、选课系统、会议室预订、演唱会抢票——底层逻辑大同小异只是具体的数据和布局不同。
鸿蒙新特性——状态驱动选座系统与复杂交互模式深度解析
一、引言电影院选座、演唱会抢票、飞机值机选座——这些都是我们日常中熟悉的空间选择交互。用户在二维平面上浏览、挑选、确认自己的位置系统实时反馈每个座位的状态变化。这类交互的复杂度远高于普通的表单或列表它不是简单的点击-确认而是一个多选、状态联动、价格运算、视觉映射的综合系统。在 ArkUI 中实现这样一个选座系统并非难事但要把它做得优雅、流畅、易维护需要开发者理解几个关键概念不可变状态更新State的深层数组替换、多选集合的 Set 管理去重、计数、遍历、视觉状态的色彩映射可用/已选/已售三态、以及嵌套 ForEach 的行列组织。本文将以一个**“影院选座购票”**实战 Demo 为载体深入解析以下几个核心技术点使用嵌套ForEach构建行列式座位矩阵State 不可变更新实现深层嵌套数据的响应式渲染Setstring管理多选集合避免数组 O(n) 遍历去重座位三态可选/已选/已售的视觉映射区域差异化定价策略前排/中排/后排Stack 叠层实现底部悬浮操作栏影院座位布局中的过道可视化阅读完本文你将掌握构建复杂交互界面的通用方法论——不仅仅是选座同样适用于选课、选房间、选工位等各种空间选择场景。二、数据结构设计2.1 两层嵌套行与座选座系统的核心数据结构是行 × 座的二维矩阵interfaceSeatInfo{id:string;// 唯一标识如 A05A排5号col:number;// 列号用于显示status:SeatStatus;// 座位状态}interfaceRowInfo{label:string;// 行标签如 Aseats:SeatInfo[];// 该行的所有座位}enumSeatStatus{AVAILABLE,// 可选灰蓝色SELECTED,// 已选蓝色高亮OCCUPIED,// 已售暗色不可点击}为什么选择行作为第一层而不是列因为影院的座位是按行排列的——用户在找座位时先确定第几排行再确定第几个列。数据结构与用户心智模型对齐能让代码更直观。每行的座位数不同8-10 个中间留有过道第 4-5 个座位之后。这种不规则网格用ForEach逐行渲染比 Grid 组件更灵活constROW_LABELS:string[][A,B,C,D,E,F,G,H];constSEATS_PER_ROW:number[][8,8,9,9,10,10,9,8];constAISLE_AFTER:number[][4,4,4,4,5,5,4,4];前排和后排座位少8-9 个中间排最多10 个。这种布局模拟了真实影院的座位分布——银幕在正前方最佳观影区在中央5-7 排这也是为什么我们给中排定价更高¥59 vs ¥39/¥49。2.2 用 Set 管理多选当用户选择多个座位时我们需要快速判断这个座位是否已被选中——这决定了它的显示颜色。如果使用数组string[]每次判断都需要 O(n) 遍历// ❌ 低效方式selectedIds:string[][];functionisSelected(id:string):boolean{returnthis.selectedIds.includes(id);// 每次 O(n)n 个座位选中时更慢}更优的方案是使用Setstring——O(1) 的增删查// ✅ 高效方式privateselectedIds:SetstringnewSet();functionisSelected(id:string):boolean{returnthis.selectedIds.has(id);// O(1)}在座位选择这种场景中Set 的优势不仅是时间复杂度。它还天然保证了唯一性——同一个座位不可能被选两次。如果用数组你需要额外的去重逻辑。注意selectedIds是private而非State——因为它不需要直接驱动 UI 渲染。UI 渲染由rows包含每个座位的status驱动selectedIds只是一个辅助查询和计算价格的工具。这种主状态rows 辅助索引selectedIds的设计避免了状态冗余和不一致的风险。三、状态管理模式3.1 State 的不可变性要求ArkUI 的State装饰器要求要触发 UI 重绘必须替换整个引用而非修改内部属性。这意味着// ❌ 不会触发重绘this.rows[0].seats[3].statusSeatStatus.SELECTED;// ✅ 会触发重绘创建全新的对象树constnewRows:RowInfo[][];for(letr0;rthis.rows.length;r){constrowthis.rows[r];constnewSeats:SeatInfo[][];for(lets0;srow.seats.length;s){constseatrow.seats[s];if(rtargetRowstargetSeat){newSeats.push({id:seat.id,col:seat.col,status:newStatus});}else{newSeats.push(seat);// 未变动的座位保留原引用}}newRows.push({label:row.label,seats:newSeats});}this.rowsnewRows;// 替换整个数组引用这个模式有几个值得注意的细节未变动的座位保留原引用newSeats.push(seat)直接把原来的SeatInfo对象放进新数组而不是创建副本。这节省了内存也让 ForEach 的键生成器更容易判断哪些组件需要重绘。只变动的座位创建新对象{ id: seat.id, col: seat.col, status: newStatus }是一个全新的对象字面量。ArkUI 框架检测到这个新引用就会重绘对应的座位组件。每一层都要新RowInfo的seats数组变了所以 RowInfo 本身也需要新对象。同样rows数组变了所以顶层数组也需要新引用。这是一个自下而上的不可变更新链。这种模式虽然代码量大但它保证了 UI 框架能精确追踪每个数据变化而不会出现状态变了但 UI 没更新的 bug。如果你习惯了 Redux 式的状态管理会发现这本质上是同样的不可变更新哲学。3.2 选择/取消的 toggle 逻辑每个座位的点击回调执行以下逻辑toggleSeat(rowIdx:number,seatIdx:number):void{// ... 不可变更新 rows ...if(seat.statusSeatStatus.OCCUPIED){return;// 已售座位不可点击}constisSelectedseat.statusSeatStatus.SELECTED;if(isSelected){this.selectedIds.delete(seat.id);// 取消选择 → 从 Set 移除}else{this.selectedIds.add(seat.id);// 选择 → 加入 Set}// 重新计算统计信息this.selectedCountthis.selectedIds.size;this.totalPricethis.computeTotalPrice();}selectedCount和totalPrice是两个State派生状态。它们可以直接从selectedIds计算得到但将它们声明为State的好处是它们可以独立驱动底部栏的 UI 更新而无需重新遍历所有行。computeTotalPrice():number{lettotal0;this.selectedIds.forEach((id:string){constrowCharid.charAt(0);// 取第一个字符 → AconstrowIndexROW_LABELS.indexOf(rowChar);if(rowIndex0){totalpriceForRow(rowIndex);// 查表获取该排价格}});returntotal;}价格计算利用了id的命名约定A05→ 首字符A是行标签避免了额外的查找表。这是一个小而巧的设计——座位 ID 不仅用于唯一标识还编码了位置信息。3.3 定价策略不同行有不同的票价模拟了真实影院的定价functionpriceForRow(rowIndex:number):number{if(rowIndex1)return39;// A-B 排前排 ¥39太近视线不佳if(rowIndex5)return59;// C-F 排中排 ¥59最佳观影区return49;// G-H 排后排 ¥49稍远但不错}中排C-F价格最高——这符合真实影院的定价逻辑中间排的视线最好。前排虽然离银幕近但需要仰头后排虽然便宜但距离远。这种差异化定价让 Demo 更接近真实产品。四、UI 视觉设计4.1 整体布局页面采用深色主题#1a1a2e深海军蓝从上到下分为五个区域1. 标题栏52vp左侧 选座购票标题右侧银河影院副标题。简洁、专业。2. 影片信息栏~60vp显示影片名称《星际穿越》、场次时间今天 19:30、影厅类型IMAX 厅、语言英语 2D。右上角显示起售价¥59 起。3. 银幕指示器~40vp一个弧形柱状形状左上/右上圆角 9999 形成弯曲效果模拟银幕的视觉轮廓。下方标注最佳观影区 · 中间 5-7 排用微弱的金色文字提示用户。4. 座位区域flex 1可滚动包含图例可选/已选/已售 价格分区和 8 排座位。每排有行标签A-H和 8-10 个座位按钮。中间有过道分隔第 4-5 个座位间有 16vp 的间隔。5. 底部操作栏position: bottom 0固定悬浮半透明深色背景显示已选座位数和总价。右侧有清空和确认选座两个按钮。4.2 座位视觉设计每个座位是一个 28×28vp 的圆角方块borderRadius(6)内部显示列号数字Column(){Text(seat.col.toString()).fontSize(9).fontColor(this.seatTextColor(seat.status))}.width(28).height(28).borderRadius(6).backgroundColor(this.seatColor(seat.status))三态色彩映射状态背景色文字色视觉含义AVAILABLE#3d3d5c灰蓝#aaaacc浅灰“可以选但还没选”SELECTED#1677FF蓝色#FFFFFF白色“我已选定了这个”OCCUPIED#2a2a3a深灰#555566暗灰“这个不属于你跳过去”色彩的选择不是随意的可选座位的灰蓝色#3d3d5c比深色背景稍亮有轻微的存在感但不会太显眼——用户能感知到这里有空位但不会被它们分散注意力。已选座位的蓝色#1677FF是最显眼的——它使用 App 主题色让用户一眼就能看到自己选了哪些座位。已售座位的深灰色#2a2a3a几乎融入背景——用户自动忽略它们不会浪费时间去点击。4.3 过道设计真实影院中座位中间有过道。我们用margin在特定座位后创建间隔.margin(sIdx1AISLE_AFTER[rIdx]?{left:0,right:16}:{left:0,right:0})AISLE_AFTER数组记录了每行的过道位置——在第 4 或第 5 个座位之后。sIdx 1是当前座位的列号从 1 开始当它与AISLE_AFTER[rIdx]相等时给这个座位加上 16vp 的右间距。这 16vp 的间隙在视觉上清晰地将座位分为左右两区让页面看起来更像真实影院。4.4 底部悬浮栏使用Stack.position({ bottom: 0 })实现固定悬浮Stack(){Column(){/* 主内容 */}Column(){Row(){// 已选 N 座 | 合计 ¥XXX// 清空 | 确认选座}}.width(100%).backgroundColor(#1a1a2eee)// 带透明度的深色背景.position({bottom:0})}#1a1a2eee中的ee是 alpha 通道——约 93% 不透明度。这让底部栏在视觉上与背景有所区分但又不完全遮挡背后的座位。如果使用完全不透明的#1a1a2e底部栏会显得过于重割裂了整体深色 UI 的统一感。确认选座按钮在selectedCount 0时呈现不可用状态灰色背景#555577选中座位后变为蓝色#1677FF。这个视觉变化给用户一个微妙的暗示——“你需要先选座位才能继续”。五、交互流程5.1 交互点Demo 提供 4 个交互点交互 1选择座位点击可选座位灰蓝色→ 变为蓝色高亮。底部栏同步更新已选数量和总价。每个座位的价格根据其所在行自动计算——A/B 排 ¥39C-F 排 ¥59G/H 排 ¥49。交互 2取消选择点击已选座位蓝色→ 恢复灰蓝色。底部栏数量和价格同步减少。交互 3清空选择点击清空按钮 → 所有已选座位恢复为可选状态。底部栏归零。这是一个防误操作的批量操作——用户可能选了错误的座位想重新来过。交互 4确认选座点击确认选座按钮 → 弹窗确认。确认后已选座位变为已售深灰色不可再点击。模拟了真实的购票流程——提交订单后座位锁定。5.2 已售座位不可交互if(seat.statusSeatStatus.OCCUPIED){return;// 已售 → 直接返回不做任何状态变更}这是选座系统的基本规则——已售出/已被锁定的座位不允许再次选择。在真实产品中还需要考虑并发问题你选座时可能另一个人也在选——但在前端 Demo 中我们用随机生成的已售座位来模拟这个场景。5.3 确认后的状态转移确认选座后执行的操作是将所有SELECTED状态的座位改为OCCUPIEDconfirmBooking():void{for(letr0;rthis.rows.length;r){for(lets0;srow.seats.length;s){if(seat.statusSeatStatus.SELECTED){// 改为 OCCUPIED}}}this.selectedIds.clear();this.selectedCount0;this.totalPrice0;}这里展示了一个完整的状态转移AVAILABLE → SELECTED → OCCUPIED。OCCUPIED是终态——座位一旦售出就不能再变。在真实系统中如果用户超过支付时间未付款座位会从OCCUPIED回到AVAILABLE。六、核心架构总结6.1 完整代码结构SeatSelectorPage ├── Stack根容器 │ ├── Column主内容区 │ │ ├── Row标题栏 │ │ ├── Row影片信息 │ │ ├── Column银幕指示器 图例 │ │ └── Scroll座位区域 │ │ └── ForEach rows → Row → ForEach seats → Column座位方块 │ └── Column底部操作栏position: bottom 0 │ └── Row已选统计 清空按钮 确认按钮6.2 数据流用户点击座位 → toggleSeat(rowIdx, seatIdx) → 深拷贝 rows 数组不可变更新 → 更新 selectedIds Set → 重新计算 selectedCount 和 totalPrice → State 触发 UI 重绘 → 座位颜色更新AVAILABLE ↔ SELECTED → 底部栏数字更新数据流是单向的用户操作 → 状态更新 → UI 重绘。没有双向绑定没有组件内部状态泄露——一切变化都从顶层状态开始层层向下传递。七、总结本文以一个**“影院选座购票”**完整 Demo 为载体深入解析了 ArkUI 中构建复杂交互界面的核心技术。回顾本文覆盖的重点嵌套 ForEach 的行列布局使用两层ForEach构建不规则二维网格每行座位数不同、中间有过道。这种方法比 Grid 更灵活——你可以为每行定制不同数量的座位、插入间隙、添加行标签。不可变状态更新State要求替换整个数组引用才能触发 UI 重绘。对于深层嵌套数据rows → seats → status需要在每一层创建新对象——未变动的元素保留原引用节省内存变动的元素创建新引用触发局部重绘。Set 管理多选集合Setstring提供 O(1) 增删查天然保证唯一性优于string[]includes()splice()的 O(n) 方案。将选中的座位 ID 存入 Set价格计算和数量统计直接调用forEach遍历——简洁高效。色彩状态映射三态可选/已选/已售分别使用不同亮度和饱和度的颜色。已售座位最暗融入背景、可选座位中等亮提示存在感、已选座位最亮主题色高亮。这种视觉层次让用户无需阅读任何文字就能瞬间理解每个座位的状态。差异化定价通过座位 ID 的首字符推导行索引查表获取每排价格。前排 ¥39太近、中排 ¥59最佳观影区、后排 ¥49稍远。这种基于位置的价格差异让 Demo 更接近真实产品。Stack position 悬浮栏使用Stack叠层容器和.position({ bottom: 0 })实现底部操作栏的固定悬浮。半透明背景#1a1a2eee既与主内容区分又不完全遮挡后排座位。选座系统是移动端复杂交互的典型代表——它不是简单的点击按钮而是多对象选择、状态联动、视觉映射、价格计算的综合场景。理解本文中的不可变更新、Set 多选管理和色彩状态映射你就能将这些模式应用于任何需要空间选择的场景飞机选座、选课系统、会议室预订、演唱会抢票——底层逻辑大同小异只是具体的数据和布局不同。
