HarmonyOS 应用 · 班级任务任务页深度解析：四状态表单与优先级三色胶囊

项目编号：48-class-task 技术栈：HarmonyOS ArkTS · ArkUI 声明式 UI · Stage 模型 本篇页面：任务页 Func1Tab.ets（88 行） 系列导航：（一）首页 · （二）任务 · （三）进度 · （四）我的

---

一、四 @State 驱动的创建表单

  @State title: string = '';
  @State desc: string = '';
  @State activeOwner: number = 0;
  @State activePriority: number = 1;

  private owners: string[] = ['班长', '学习委员', '生活委员', '宣传委员', '文娱委员'];
  private priorities: string[] = ['普通', '重要', '紧急'];
  private priorityColors: string[] = [C.ok, C.warn, C.danger];

四个 @State：title（任务标题）、desc（任务描述）、activeOwner（负责人选中索引）、activePriority（优先级选中索引，默认 1=重要）。priorityColors 数组将优先级映射到颜色——普通绿/重要橙/紧急红，这是本页的特色：选中态颜色随优先级动态变化。

---

二、页面骨架：FormCard + Button

  build() {
    Column() {
      this.Header()
      Scroll() {
        Column({ space: 16 }) {
          this.FormCard()
          Button('创建任务').fontSize(15).fontColor('#FFFFFF').backgroundColor(C.primary)
            .width('100%').height(48).borderRadius(D.rMd)
            .onClick(() => { promptAction.showToast({ message: this.title.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 内两块：FormCard（表单卡）+ Button（创建按钮）。按钮 onClick 做空值校验：title.length > 0 才提示"任务已创建"，否则提示"请填写任务标题"——与班费收支页的保存校验同款模式。

---

三、FormCard：标题 + 描述 + 负责人 + 优先级

  @Builder
  FormCard() {
    Column({ space: 16 }) {
      Column({ space: 6 }) {
        Text('任务标题').fontSize(13).fontColor(C.textSub).width('100%')
        TextInput({ placeholder: '输入任务标题' })
          .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(44)
          .onChange((v: string) => { this.title = v; })
      }

任务标题：13 号灰色标签 + TextInput，cardSoft 浅灰底 + rSm 小圆角。onChange 写入 this.title。

      Column({ space: 6 }) {
        Text('任务描述').fontSize(13).fontColor(C.textSub).width('100%')
        TextArea({ placeholder: '描述任务内容和要求...' })
          .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(80)
          .onChange((v: string) => { this.desc = v; })
      }

任务描述：TextArea 多行输入——系列首次出现的多行文本框。height(80) 比标题的 44 高，容纳多行内容。

---

四、负责人：Flex wrap 胶囊选择

      Column({ space: 6 }) {
        Text('分配负责人').fontSize(13).fontColor(C.textSub).width('100%')
        Flex({ wrap: FlexWrap.Wrap }) {
          ForEach(this.owners, (o: string, idx: number) => {
            Text(o).fontSize(12)
              .fontColor(this.activeOwner === idx ? '#FFFFFF' : C.textSub)
              .padding({ left: 14, right: 14, top: 7, bottom: 7 })
              .backgroundColor(this.activeOwner === idx ? C.primary : C.cardSoft).borderRadius(14)
              .margin({ right: 10, bottom: 10 })
              .onClick(() => { this.activeOwner = idx; })
          }, (o: string) => o)
        }.width('100%')
      }

Flex({ wrap: FlexWrap.Wrap }) 自动换行——5 个负责人胶囊一行放不下，自动换到第二行。activeOwner === idx 驱动选中态：紫底白字 vs 浅灰底灰字。borderRadius(14) 全圆角胶囊 + margin({ right: 10, bottom: 10 }) 间距。

---

五、优先级：三色等分胶囊

      Column({ space: 6 }) {
        Text('优先级').fontSize(13).fontColor(C.textSub).width('100%')
        Row({ space: 10 }) {
          ForEach(this.priorities, (p: string, idx: number) => {
            Text(p).fontSize(13)
              .fontColor(this.activePriority === idx ? '#FFFFFF' : C.textSub)
              .textAlign(TextAlign.Center).layoutWeight(1).padding({ top: 9, bottom: 9 })
              .backgroundColor(this.activePriority === idx ? this.priorityColors[idx] : C.cardSoft).borderRadius(D.rSm)
              .onClick(() => { this.activePriority = idx; })
          }, (p: string) => p)
        }.width('100%')
      }

三色优先级胶囊——本页特色：选中态颜色随优先级动态变化：

// 选中时用 priorityColors[idx]，未选时用 cardSoft
.backgroundColor(this.activePriority === idx ? this.priorityColors[idx] : C.cardSoft)

priorityColors = [C.ok, C.warn, C.danger]——普通选中绿底、重要选中橙底、紧急选中红底。选中"紧急"时胶囊变红，视觉即时传达紧迫感。三个胶囊 layoutWeight(1) 等分，与负责人的 Flex wrap 不同——优先级只有 3 个，一行足够。

---

六、表单状态联动链路

四个 @State 形成独立联动：

标题输入  → title 更新 → 创建按钮校验 title.length > 0
描述输入  → desc 更新 → 随任务保存
负责人点击 → activeOwner 更新 → 选中胶囊高亮转移
优先级点击 → activePriority 更新 → 选中胶囊颜色变化（三色）

与班费收支页的 isIncome 联动不同，任务页的四个状态相互独立——每个 @State 只驱动自己的 UI 区域，无跨区域联动。

---

七、可演进方向

方向	现状	改法	收益
任务写入	Toast 模拟	追加到首页 tasks 数组	任务真实创建
日期选择	无	DatePicker 选截止日期	任务有明确截止
表单重置	无	创建后清空 title/desc/activeOwner	连续创建
负责人来源	写死 5 个	从班级成员拉取	负责人随成员变化
优先级联动	仅颜色	通知频率随优先级调整	紧急任务更强提醒

任务页是班级任务的录入入口——四 @State 表单、TextArea 多行输入、Flex wrap 负责人胶囊、三色优先级胶囊。从 priorityColors 数组映射的动态选中色到 title.length 空值校验，每一层都有明确的职责边界。

系列导航：（一）首页 · （二）任务 · （三）进度 · （四）我的