#鸿蒙通关秘籍#如何使用NavDestination和Scroll创建知乎日报详情页面？

NavDestination() {
  Scroll() {
    Column({ space: 0 }) {
      Stack({ alignContent: Alignment.Bottom }) {
        Image(this.detailData?.image).width('100%').height(250).zIndex(1);

        Text(this.detailData?.title)
          .padding(5)
          .margin({ bottom: 10 })
          .width('100%')
          .height(50)
          .textAlign(TextAlign.Center)
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Clip })
          .fontSize(16)
          .fontColor(Color.White)
          .opacity(100)
          .backgroundColor('#808080AA')
          .zIndex(2);
      }.height(250);

      Text(`${this.detailData?.author ?? ""} ${this.detailData?.bio ?? ""}`)
        .fontSize(14)
        .fontColor("#999")
        .padding(10).width('100%');

      Column() {
        ForEach(this.detailData?.content, (item: ZhiDetailItem, idx) => {
          if (item.types === 'p') {
            Text(item.value).fontSize(16).padding(10).lineSpacing(LengthMetrics.px(30)).width('100%').alignSelf(ItemAlign.Start);
          } else if (item.types === 'p.strong') {
            Text(item.value).fontSize(16).fontWeight(FontWeight.Bold).padding(10).width('100%').alignSelf(ItemAlign.Start);
          } else if (item.types === 'img') {
            Image(item.value).padding(10);
          }
        });
      }
    }
  }
}
.title("日报详情")
.width('100%')
.height('100%')
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.