HarmonyOS 应用 · 寝室投票创建页深度解析选项动态增删与不可变更新项目编号49-dorm-vote 技术栈HarmonyOS ArkTS · ArkUI 声明式 UI · Stage 模型 本篇页面创建页Func1Tab.ets114 行 系列导航一首页 ·二创建· 三投票 · 四结果一、三个操作方法增删改的三重边界State question: string ; State options: string[] [, ]; State multiChoice: boolean false; private addOption(): void { if (this.options.length 6) { this.options.push(); this.options this.options.slice(); } } private removeOption(idx: number): void { if (this.options.length 2) { this.options.splice(idx, 1); this.options this.options.slice(); } } private setOption(idx: number, v: string): void { this.options[idx] v; }三个Statequestion问题、options选项数组初始 2 个空串、multiChoice多选开关。三个方法构成增删改三重边界addOption()length 6上限 6 个选项push()追加空选项 slice()生成新引用触发刷新removeOption(idx)length 2下限 2 个选项splice(idx, 1)删除 slice()触发刷新setOption(idx, v)直接赋值options[idx] v——修改无需新引用ForEach 的 key 是索引输入不影响列表结构投票至少 2 个选项、最多 6 个——边界的存在保证投票的合法性1 个选项无意义太多选项难以决策。二、页面骨架QuestionCard OptionCard SettingCard Buttonbuild() { Column() { this.Header() Scroll() { Column({ space: 16 }) { this.QuestionCard() this.OptionCard() this.SettingCard() Button(发起投票).fontSize(15).fontColor(#FFFFFF).backgroundColor(C.primary) .width(100%).height(48).borderRadius(D.rMd) .onClick(() { promptAction.showToast({ message: this.question.length 0 ? 投票已发起 : 请填写投票问题 }); }) } .width(100%) .padding({ left: D.pad, right: D.pad, top: 16, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }Header 在 Scroll 外固定Scroll 内四块QuestionCard问题 OptionCard选项 SettingCard多选设置 Button发起投票。按钮onClick空值校验question.length 0才提示投票已发起。三、QuestionCard问题输入Builder QuestionCard() { Column({ space: 10 }) { Text(投票问题).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) TextInput({ placeholder: 例如今晚点什么外卖 }) .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(44) .onChange((v: string) { this.question v; }) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }14 号加粗投票问题 TextInputplaceholder带示例例如今晚点什么外卖——示例占位符降低用户输入门槛。onChange写入this.question。四、OptionCard动态选项列表Builder OptionCard() { Column({ space: 12 }) { Text(候选选项).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) ForEach(this.options, (opt: string, idx: number) { Row({ space: 10 }) { Text((idx 1).toString()).fontSize(13).fontColor(C.primary) .width(26).height(26).textAlign(TextAlign.Center).backgroundColor(C.primarySoft).borderRadius(13) TextInput({ placeholder: 选项 (idx 1), text: this.options[idx] }) .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(42).layoutWeight(1) .onChange((v: string) { this.setOption(idx, v); }) if (this.options.length 2) { Text(✕).fontSize(16).fontColor(C.textDim) .onClick(() { this.removeOption(idx); }) } }.width(100%) }, (opt: string, idx: number) idx.toString()) if (this.options.length 6) { Row({ space: 6 }) { Text().fontSize(16).fontColor(C.primary) Text(添加选项).fontSize(13).fontColor(C.primary) } .width(100%).justifyContent(FlexAlign.Center).padding({ top: 10, bottom: 10 }) .backgroundColor(C.cardSoft).borderRadius(D.rSm) .onClick(() { this.addOption(); }) } } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }三个条件渲染——if分支控制增删按钮// 序号圆26×26 浅粉底 紫色序号 Text((idx 1).toString()).width(26).height(26).backgroundColor(C.primarySoft).borderRadius(13) // ✕ 删除按钮选项数 2 时渲染 if (this.options.length 2) { Text(✕).onClick(() { this.removeOption(idx); }) } // 添加按钮选项数 6 时渲染 if (this.options.length 6) { Row({ space: 6 }) { ... }.onClick(() { this.addOption(); }) }恰好 2 个选项时无 ✕下限保护恰好 6 个选项时无 上限保护——条件渲染与增删边界严格对应。TextInput的text: this.options[idx]绑定当前值onChange调setOption(idx, v)写回数组。ForEach key 用idx.toString()——选项是动态增删的列表索引用作 key 保证增删时列表正确重建。五、SettingCardToggle 多选开关Builder SettingCard() { Row() { Column({ space: 2 }) { Text(允许多选).fontSize(14).fontColor(C.text) Text(开启后可选择多个选项).fontSize(11).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Toggle({ type: ToggleType.Switch, isOn: this.multiChoice }) .selectedColor(C.primary) .onChange((v: boolean) { this.multiChoice v; }) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }Toggle({ type: ToggleType.Switch, isOn: this.multiChoice })selectedColor(C.primary)开启时粉色圆点。onChange写回this.multiChoice。左侧双行文案14 号允许多选 11 号灰色说明开启后可选择多个选项。六、可演进方向方向现状改法收益发起写入Toast 模拟追加到首页 votes 数组投票真实创建选项校验仅问题校验校验选项非空 去重选项合法截止时间无DatePicker 设置截止投票限时结束匿名投票无匿名开关 结果隐藏投票人隐私保护表单重置无发起后清空 question/options连续创建创建页是投票的录入入口——三个操作方法增删改 三重边界2 下限/6 上限/条件渲染。从push slice的不可变更新到Toggle的多选开关每一层都有明确的职责边界。系列导航一首页 ·二创建· 三投票 · 四结果