HarmonyOS 鸿蒙Next技术问题解析 第13期

问题二：快递进度条效果如何实现？

具体效果参考下图，左侧线条需要随着内容高度而变化。

解决方案：

使用LazyForEach()，每当收到新的进度时，在对应位置添加数据，参考如下demo：

// Index.ets
import { NodeOptions, TimeLineNode } from "../model/TimeLineNode";

@Entry
@Component
struct Index {
  @State nodeArray: NodeOptions[] = [
    {
      icon: $r('app.media.app_icon'),
      iconStyle: {
        radius: 10
      },
      message: '快件到达xxx',
      date: '2025-01-16 8:00'
    },
    {
      icon: $r('app.media.app_icon'),
      iconStyle: {
        radius: 10
      },
      message: '已到达签收点',
      date: '2025-01-16 9:00'
    }
  ]
  @State dataSource: TimeLineDataSource = new TimeLineDataSource();

  aboutToAppear(): void {
    this.dataSource = new TimeLineDataSource(this.nodeArray.reverse()) // 反向TimeLine
  }

  build() {
    Column() {
      List() {
        LazyForEach(this.dataSource, (item: NodeOptions, index: number) => {
          ListItem() {
            TimeLineNode({
              nodeOptions: item,
              hasBefore: index !== 0,
              hasNext: index !== this.dataSource.totalCount() - 1
            })
          }
        }, (item: NodeOptions, index) => {
          return JSON.stringify(item) + '_' + this.dataSource.totalCount() + '_' + index
        })
      }
      .height('80%')

      Button('add node')
        .onClick(() => {
          this.dataSource.add1stItem({
            icon: $r('app.media.app_icon'),
            iconStyle: {
              radius: 18
            },
            title: '已签收',
            message: '派送成功',
            date: '2025-01-16 10:00',
          })
          this.dataSource.notifyDataChange(1) // 如果没有图标上方的线，就不需要这个
        })
    }
    .justifyContent(FlexAlign.Start)
    .height('100%')
  }
}

export class TimeLineDataSource implements IDataSource {
  private dataArray: NodeOptions[] = []
  private listeners: DataChangeListener[] = []

  constructor(nodeArray?: NodeOptions[]) {
    if (nodeArray) {
      this.dataArray = nodeArray;
    }
  }

  public getData(index: number): NodeOptions {
    return this.dataArray[index]
  }

  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded()
    })
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index)
    })
  }

  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index)
    })
  }

  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to)
    })
  }

  notifyDatasetChange(operations: DataOperation[]): void {
    this.listeners.forEach(listener => {
      listener.onDatasetChange(operations);
    })
  }

  public totalCount(): number {
    return this.dataArray.length
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener)
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener)
    if (pos >= 0) {
      this.listeners.splice(pos, 1)
    }
  }

  public add1stItem(node: NodeOptions): void {
    this.dataArray.splice(0, 0, node)
    this.notifyDataAdd(0)
  }

  public addLastItem(node: NodeOptions): void {
    this.dataArray.splice(this.dataArray.length, 0, node)
    this.notifyDataAdd(this.dataArray.length - 1)
  }
}

// TimeLineNode.ets

// 轴线宽度
const LINE_WIDTH: number = 1
// 左侧时间轴区域宽度
const AXIS_WIDTH: number = 40
// 时间轴线和内容的距离
const SPACE_BETWEEN_LINE_AND_CONTENT: number = 16
// 如果右侧内容不想与左侧图标齐平，可以设置左侧图标上方线长
const UPPER_LINE_LENGTH: number = 10
// 右侧内容距下一个节点的距离
const MARGIN_TO_NEXT_NODE: number = 12

@Component
export struct TimeLineNode {
  @Prop nodeOptions: NodeOptions
  @State nodeHeight: number = 40;
  @Prop hasBefore: boolean = true;
  @Prop hasNext: boolean = true

  build() {
    Row({space: SPACE_BETWEEN_LINE_AND_CONTENT}) {
      // 轴线区域
      Column() {
        // 如果图标想与右侧内容齐平，该Column可以删掉
        Column()
          .width(LINE_WIDTH)
          .height(UPPER_LINE_LENGTH)
          .backgroundColor(this.hasBefore ? Color.Grey : Color.Transparent)
        Image(this.nodeOptions?.icon)
          .width(2 * this.nodeOptions?.iconStyle?.radius)
          .borderRadius(this.nodeOptions?.iconStyle?.radius)
        Column()
          .width(LINE_WIDTH)
          .layoutWeight(1)
          .backgroundColor(this.hasNext? Color.Grey : Color.Transparent)
      }
      .width(AXIS_WIDTH)
      .height(this.nodeHeight)

      // 内容区域
      Column() {
        if (this.nodeOptions?.title && this.nodeOptions?.title !== '') {
          Text(this.nodeOptions?.title)
            .fontWeight(40)
            .lineHeight(40)
            .fontSize(40)
        }
        Text(this.nodeOptions?.message)
          .fontSize(28)
          .lineHeight(28)
          .fontColor(Color.Gray)

        if (this.nodeOptions?.date) {
          Text(this.nodeOptions?.date)
            .fontSize(14)
            .lineHeight(14)
            .fontColor(Color.Gray)
        }
        Blank()
          .height(MARGIN_TO_NEXT_NODE)
      }
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
      .onAreaChange( (oldValue, newValue) => {
        if (newValue.height !== oldValue.height) {
          this.nodeHeight = newValue.height as number
        }
      })
    }
    .padding({right: 8,left: 8})
    .width('100%')
    .alignItems(VerticalAlign.Top)
  }
}

export interface NodeOptions {
  icon: PixelMap | ResourceStr | DrawableDescriptor
  iconStyle: IconStyle
  title?: string
  message: string
  date?: string
}

export interface IconStyle {
  radius: number
}

原链接： 快递进度条或者流程进度条的实现思路，谁那有？-华为开发者问答 | 华为开发者联盟 (huawei.com)

问题一：ListItemGroup 的Header如何动态设置？

ListItemGroup的Header不是每项都有数据，当前的问题是如果没有值也会生成一个空白的header条目，如何设置header没值的时候就不显示？

解决方案：

要实现header没有值的时候就不显示，可以在自定义组件itemHead中的Text组件渲染前使用if (text)进行判别，text为空时就不渲染Text组件，参考demo：

// xxx.ets
@Entry
@Component
struct ListItemGroupExample {
  private timeTable: TimeTable[] = [
    {
      title: '星期一',
      projects: ['语文', '数学', '英语']
    },
    {
      title: '星期二',
      projects: ['物理', '化学', '生物']
    },
    {
      projects: ['历史', '地理', '政治']
    },
    {
      projects: ['美术', '音乐', '体育']
    }
  ]

  @Builder
  itemHead(text: string) {
    if (text) {
      Text(text)
        .fontSize(20)
        .backgroundColor(0xAABBCC)
        .width("100%")
        .padding(10)
    }
  }

  @Builder
  itemFoot(num: number) {
    Text('共' + num + "节课")
      .fontSize(16)
      .backgroundColor(0xAABBCC)
      .width("100%")
      .padding(5)
  }

  build() {
    Column() {
      List({ space: 20 }) {
        ForEach(this.timeTable, (item: TimeTable) => {
          ListItemGroup({ header: this.itemHead(item.title), footer: this.itemFoot(item.projects.length) }) {
            ForEach(item.projects, (project: string) => {
              ListItem() {
                Text(project)
                  .width("100%")
                  .height(100)
                  .fontSize(20)
                  .textAlign(TextAlign.Center)
                  .backgroundColor(0xFFFFFF)
              }
            }, (item: string) => item)
          }
          .divider({ strokeWidth: 1, color: Color.Blue }) // 每行之间的分界线
        })
      }
      .width('90%')
      .sticky(StickyStyle.Header | StickyStyle.Footer)
      .scrollBar(BarState.Off)
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

interface TimeTable {
  title?: string;
  projects: string[];
}

原链接： ListItemGroup 的Header如何动态设置-华为开发者问答 | 华为开发者联盟 (huawei.com)