实例：住户报修派单台｜技术：ComponentV2、TextInput、Toggle、TextArea、叠层卡片

一、本篇范围

本篇只看四张报修卡片和叠层区的挂载方式。真正需要展示的是：每张卡怎样保存自己的输入状态，叠层区又怎样同时露出多阶段工单的信息。

二、卡片组一：加急工单与水路工单

@ComponentV2
struct RepairUrgentCard {
  @Local title: string = '0601 室厨房渗水';
  @Local owner: string = '张派单';
  @Local note: string = '先联系楼层值守，再安排水路师傅优先上门。';

  build() {
    Column({ space: 10 }) {
      Text('加急工单').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#0F172A')
      TextInput({ text: this.title, placeholder: '工单标题' })
        .backgroundColor('#FFF7ED')
        .borderRadius(10)
        .onChange((value: string) => this.title = value)
      TextInput({ text: this.owner, placeholder: '派单人' })
        .backgroundColor('#FFF7ED')
        .borderRadius(10)
        .onChange((value: string) => this.owner = value)
      TextArea({ text: this.note, placeholder: '派单说明' })
        .height(90)
        .backgroundColor('#FFF7ED')
        .borderRadius(10)
        .onChange((value: string) => this.note = value)
    }
    .padding(18)
    .backgroundColor('#FFFFFF')
    .borderRadius(22)
  }
}

@ComponentV2
struct RepairPlumberCard {
  @Local worker: string = '王师傅';
  @Local arrival: string = '14:20';
  @Local note: string = '检查厨房下水、角阀和墙角返潮点。';

  build() {
    Column({ space: 10 }) {
      Text('水路工单').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#0F172A')
      TextInput({ text: this.worker, placeholder: '处理师傅' })
        .backgroundColor('#EFF6FF')
        .borderRadius(10)
        .onChange((value: string) => this.worker = value)
      TextInput({ text: this.arrival, placeholder: '预计到场' })
        .backgroundColor('#EFF6FF')
        .borderRadius(10)
        .onChange((value: string) => this.arrival = value)
      TextArea({ text: this.note, placeholder: '现场要点' })
        .height(84)
        .backgroundColor('#EFF6FF')
        .borderRadius(10)
        .onChange((value: string) => this.note = value)
    }
    .padding(18)
    .backgroundColor('#FFFFFF')
    .borderRadius(22)
  }
}

第一组卡片覆盖了当前最重要的两层：加急派单和师傅安排。技术文需要明确把这两张卡的输入路径写出来，因为它们共同决定了“层叠视图不是只读看板”这一点。

三、卡片组二：公区报修与回访收口

@ComponentV2
struct RepairPublicAreaCard {
  @Local location: string = '二号楼电梯厅';
  @Local ready: boolean = true;
  @Local note: string = '需要先贴出短时围挡提示。';

  build() {
    Column({ space: 10 }) {
      Text('公区报修').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#0F172A')
      TextInput({ text: this.location, placeholder: '位置' })
        .backgroundColor('#ECFDF5')
        .borderRadius(10)
        .onChange((value: string) => this.location = value)
      Row() {
        Text('围挡准备').fontSize(12).fontColor('#64748B')
        Blank()
        Toggle({ type: ToggleType.Switch, isOn: this.ready })
          .selectedColor('#16A34A')
          .onChange((value: boolean) => this.ready = value)
      }.width('100%')
      TextArea({ text: this.note, placeholder: '公区说明' })
        .height(74)
        .backgroundColor('#ECFDF5')
        .borderRadius(10)
        .onChange((value: string) => this.note = value)
    }
    .padding(18)
    .backgroundColor('#FFFFFF')
    .borderRadius(22)
  }
}

@ComponentV2
struct RepairReturnCard {
  @Local callbackOwner: string = '李回访';
  @Local satisfied: boolean = false;
  @Local note: string = '回访时确认墙面是否仍有潮痕。';

  build() {
    Column({ space: 10 }) {
      Text('回访收口').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#0F172A')
      TextInput({ text: this.callbackOwner, placeholder: '回访负责人' })
        .backgroundColor('#F5F3FF')
        .borderRadius(10)
        .onChange((value: string) => this.callbackOwner = value)
      Row() {
        Text('住户确认').fontSize(12).fontColor('#64748B')
        Blank()
        Toggle({ type: ToggleType.Switch, isOn: this.satisfied })
          .selectedColor('#7C3AED')
          .onChange((value: boolean) => this.satisfied = value)
      }.width('100%')
      TextArea({ text: this.note, placeholder: '回访记录' })
        .height(74)
        .backgroundColor('#F5F3FF')
        .borderRadius(10)
        .onChange((value: string) => this.note = value)
    }
    .padding(18)
    .backgroundColor('#FFFFFF')
    .borderRadius(22)
  }
}

第二组卡片负责展示后续阶段。虽然它们压在下层，但依然保留 Toggle 和 TextArea。这说明层叠视图的目标不是隐藏后续工单，而是缩小它们的视觉优先级。

四、叠层挂载区：宽度差与偏移量

Row({ space: 10 }) {
        Column({ space: 4 }) {
          Text('今日待派 7 单').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#111827')
          Text('加急 2 单，普通 5 单').fontSize(11).fontColor('#64748B')
        }.layoutWeight(1)
        Column({ space: 4 }) {
          Text('已回访 3 单').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#111827')
          Text('待收口 1 单').fontSize(11).fontColor('#64748B')
        }.layoutWeight(1)
      }
      .width('100%')
      .padding({ left: 16, right: 16, bottom: 12 })

      Scroll() {
        Column({ space: 14 }) {
          DynamicLayout(this.layoutAlgorithm) {
            RepairReturnCard()
              .width('74%')
              .margin({ top: 128, left: 42 })
            RepairPublicAreaCard()
              .width('80%')
              .margin({ top: 86, left: 28 })
            RepairPlumberCard()
              .width('86%')
              .margin({ top: 42, left: 16 })
            RepairUrgentCard()
              .width('92%')
          }
          .width('100%')
          .height(420)

          Column({ space: 8 }) {
            Text('调度说明').fontSize(15).fontWeight(FontWeight.Bold).fontColor('#111827')
            Text('层叠视图适合在报修高峰期把不同阶段工单同时压在一屏内观察：顶层处理加急任务，下层保留师傅安排、公区准备和回访收口。')
              .fontSize(12).fontColor('#64748B').lineHeight(20)
          }
          .width('100%')
          .padding(16)
          .backgroundColor('#FFFFFF')
          .borderRadius(18)
        }
        .width('100%')
        .padding({ left: 16, right: 16, bottom: 24 })
      }

真正形成叠层的不是某个“层叠开关”，而是每张卡的 width 和 margin。这段代码把 92% / 86% / 80% / 74% 的宽度差和顶部偏移直接写死在挂载区里，因此调度视图的优先级关系一眼就能看出来。

五、卡片绑定对照表

六、本篇小结

第二篇把四张工单卡完整展开，目的是证明叠层视图仍然可以直接录入。否则这页就只是一个静态叠卡效果，而不是可操作的调度视图。