景点详情页面

项目复盘：

1. 导入模块：代码中导入了路由模块(@ohos.router)和Toolbar组件，用于页面导航和显示标题栏。
2. 页面结构：通过定义SceneryDetailPage组件来展示景点详情，包括标题栏、景点图片、景点描述等内容。
3. 生命周期方法：在aboutToAppear方法中获取路由传递的参数，设置标题、景点图片和描述等信息。
4. 布局结构：使用Column、Scroll和Image组件构建页面布局，实现标题栏固定在顶部，图片自适应大小并覆盖显示，描述文本显示在图片下方。

   import router from '@ohos.router'
   import Toolbar from '../component/Toolbar'
   
   @Entry
   @Component
   struct SceneryDetailPage {
     private title: string = ''
     private thumb: Resource = null
     private desc: Resource = null
   
     async aboutToAppear() {
       const params = router.getParams()
       this.title = params['title']
       this.thumb = params['thumb']
       this.desc = params['desc']
     }
   
     build() {
       Column() {
         Toolbar({ title: this.title, enableLine: false })
         Scroll() {
           Column() {
             Image(this.thumb)
               .width('100%')
               .height(120)
               .objectFit(ImageFit.Cover)
   
             Text(this.desc)
               .fontColor('#333333')
               .fontSize(13)
               .width('100%')
               .padding(12)
           }
           .height("100%")
           .width('100%')
         }
         .width('100%')
         .layoutWeight(1)
       }
       .backgroundColor('#E9F0F3')
       .width('100%')
       .height('100%')
     }
   }

   运行截图：

知识要点：

1. 页面结构：采用Column和Scroll嵌套的方式实现页面元素的垂直布局和滚动效果。
2. Toolbar：使用Toolbar组件展示页面标题，通过enableLine属性控制是否显示下划线。
3. 图片处理：通过Image组件展示景点图片，设置宽度、高度以及缩放模式。
4. 文本显示：使用Text组件展示景点描述文本，设置字体颜色、大小、宽度和内边距。代码实现了展示景点详情的页面，展现了基本的UI布局、图片展示、文本显示和生命周期处理等功能。