背景：

前几篇学习了元服务，后面几期就让我们开发简单的元服务吧，里面丰富的内容大家自己加，本期案例 仅供参考

先上本期效果图 ，里面图片自行替换

效果图1完整代码案例如下：

• Index

import { authentication } from '@kit.AccountKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { EventMyItem } from './EventMyItem';
import { SearchBar } from './SearchBar';
import { promptAction } from '@kit.ArkUI';

export class ListItem1 {
  img: ResourceStr;
  title: string;
  yuji: string;
  content: string;
  danhao: string;

  constructor(img: ResourceStr, title: string, yuji: string, content: string, danhao: string) {
    this.img = img;
    this.title = title;
    this.yuji = yuji;
    this.content = content;
    this.danhao = danhao;
  }
}


@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State listItem1: ListItem1[] = [
    new ListItem1($r('app.media.img'), '运输中', '预计12.31送达', '手机尾号1415的包裹', '邮政快递包裹 | 9857489893889'),
    new ListItem1($r('app.media.img'), '运输中', '预计明天送达', '手机尾号1415的包裹',
      '邮政快递包裹 | 98574898589'),
    new ListItem1($r('app.media.img_1'), '已发货', '', '天猫|漫花400张20大包纸巾抽纸...', '极兔快递包裹 | 98578545889'),
    new ListItem1($r('app.media.img_2'), '已签收', '本人签收', '手机尾号1415的包裹', '中通快递包裹 | 985740124889'),
    new ListItem1($r('app.media.img_2'), '运输中', '预计12.29送达', '手机尾号1415的包裹', '中通快递包裹 | 985796582'),

  ]

  build() {
    Column() {
      Text($r('app.string.EntryAbility_label')).fontSize(20).margin({ bottom: 10 })
      SearchBar({
        onClickVoice: () => {
          promptAction.showToast({ me