【HarmonyOS】使用两层Scroll实现一天时间轴和事件卡片的层叠显示

简介

实现某一天24小时的时间长度和当天事件的页面。实现如下的效果：

代码

代码架构

• List_Page：主界面
• NumberUtil：数字辅助类
• DateEvenModel：日程实体类
• ListPageViewModel：界面交互类

List_Page

import { DateEvenModel } from '../Models/DateEvenModel';
import { ListPageViewModel } from '../ViewModels/ListPageViewModel';

@Entry
@Component
struct List_Page {
  @State VM: ListPageViewModel = new ListPageViewModel();

  aboutToAppear(): void {
    this.VM.TimeListInit();
    this.VM.DateModelInit();
  }

  @Builder
  DateEventCard(model: DateEvenModel) {
    Row() {
      Column()
        .backgroundColor("#adc9f9")
        .width(4)
        .height("100%")
        .borderRadius({ topLeft: 5, bottomLeft: 5 })

      Column() {
        Text(model.Title)
          .fontSize(10)
          .fontColor(model.FontColor)
          .margin({ top: 3, left: 3 })
      }
      .borderRadius(0)
    }
    .alignItems(VerticalAlign.Top)
    .borderRadius(5)
    .backgroundColor(model.BackgroundColor)
    .width("100%")
    .height(model.Height)
    .translate({ x: model.OffsetX, y: model.OffsetY, z: 0 })
  }

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      //时间线主体
      Scroll(this.VM.TimeScroller) {
        Column() {
          ForEach(this.VM.TimeList, (item: string, index: number) => {
            Row() {
              Text(item)
                .width(50)
              Column() {
                Divider().width("100%").backgroundColor("#e2e2e2").margin({ top: 8 }).strokeWidth(1)
              }
              .margin({ right: 10 })
              .layoutWeight(1)
              .height("100%")
            }
            .alignItems(VerticalAlign.Top)
            .justifyContent(FlexAlign.Start)
            .width("100%")
            .height(60)
            .width("100%")
          })
        }
        .height(1440)
      }
      .width("100%")
      .scrollBar(BarState.Off)

      //事件列表
      Scroll(this.VM.DateScroller) {
        Stack({ alignContent: Alignment.TopStart }) {
          ForEach(this.VM.DateEventList, (item: DateEvenModel, index) => {
            this.DateEventCard(item)
          })
        }
        .width("100%")
        .height(1440)
      }
      .padding({ left: 50, right: 10  })
      .width("100%")
      .onDidScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => {
        console.info("我是List" + yOffset.toString());
        console.info("我是状态：" + scrollState.toString());
        if (scrollState == ScrollState.Scroll) {
          this.VM.TimeScroller.scrollTo({
            xOffset: 0,
            yOffset: this.VM.TimeScroller.currentOffset().yOffset + yOffset
          })
        }
      })

    }
    .height('100%')
    .width('100%')
  }
}

NumberUtil

export class NumberUtil {
  /**
   * 格式化数字，用0补位
   * @param num 数字
   * @param length 数字长度
   * @returns
   */
  static PrefixInteger(num: number, length: number) {
    return (Array(length).join('0') + num).slice(-length);
  }
}

DateEvenModel

@Observed
/**
 * 单天日程
 */
export class DateEvenModel {
  /**
   * X轴偏移值
   */
  OffsetX: number = 0;
  /**
   * Y轴偏移值
   */
  OffsetY: number = 0;
  /**
   * 左上角X轴坐标值
   */
  PositionX: number = 0;
  /**
   * 左上角Y轴偏移值
   */
  PositionY: number = 0;
  /**
   * 卡片高度
   */
  Height: number = 15;
  /**
   * 卡片背景颜色
   */
  BackgroundColor: ResourceColor = Color.Black;
  /**
   * 卡片字体颜色
   */
  FontColor: ResourceColor = Color.White;
  StartTime: Date = new Date();
  EndTime: Date = new Date();
  Title: string = "";

  constructor() {
  }
}

ListPageViewModel

import { DateEvenModel } from '../Models/DateEvenModel';
import { NumberUtil } from '../Utils/NumberUtil';

@Observed
/**
 * 界面交互类
 */
export class ListPageViewModel {
  TimeList: Array<string> = [];
  DateEventList: Array<DateEvenModel> = new Array<DateEvenModel>();
  TimeScroller: Scroller = new Scroller();
  DateScroller: Scroller = new Scroller();

  constructor() {
  }

  /**
   * 时间列表集合初始化
   */
  public TimeListInit(): void {
    for (let index = 0; index < 24; index++) {
      this.TimeList.push(`${NumberUtil.PrefixInteger(index, 2)}:00`)
    }
  }

  public DateModelInit(): void {
    let model1: DateEvenModel = new DateEvenModel();
    model1.PositionY = model1.OffsetY = 360;
    model1.Title = "测试1";
    model1.Height = 120;
    model1.BackgroundColor = "#e9fae8";
    model1.FontColor = "#97af96";

    let model2: DateEvenModel = new DateEvenModel();
    model2.PositionY = model2.OffsetY = model1.Height + model1.OffsetY;
    model2.Title = "测试2";
    model2.Height = 30;
    model2.BackgroundColor = "#2b2b2b";
    model2.FontColor = "#64c8c2";

    let model3: DateEvenModel = new DateEvenModel();
    model3.PositionY = model3.OffsetY = model2.Height + model2.OffsetY + 30;
    model3.Title = "测试3";

    this.DateEventList.push(model1, model2, model3)
  }
}

总结

现在仅简单的实现层叠效果，后续优化点：

1. 实现事件卡片边框可以上下拖动修改事件卡片的高度。
2. 实现事件卡片可以拖动效果，修改事件卡片的位置。
3. 实现点击时，临时添加一个事件卡片，方便用户编辑标题和起始结束时间。
4. 需要解决时间重叠时的显示问题。