鸿蒙期末作业记录4（图书详细页面）-CSDN博客

本文链接：https://blog.csdn.net/Lwenja/article/details/140061272

前言

上次写到点击图书后，会将图书的信息通过页面路由传递到图书详细页面，该页面再对拿到的信息进行页面渲染，这期就记这个。

页面基本构建

页面的基本组成

这个页面组成很简洁，页面构建上面没什么问题，就是最外层是一个Row容器，里面包括了图片、column容器（包括两个Text文本），再就是Row组件（三个Button组件）

页面路由接收参数

  Img: string = router.getParams()?.['Img'];
  @State Name: string = router.getParams()?.['Name'];
  @State Author: string = router.getParams()?.['Author'];

没注意到的点

其实这里我写的时候有问题，我在Img前面前面加@State报错，然后我才想起来@State不能修饰Image的类型，它支持的类型只有Object、class、string、number、boolean、enum类型。

这个页面没什么特别困难的地方，只需要保证其他页面传参正确就好啦

与其他页面的联系

然后我在这个收藏本文的地方写了点击事件，点击之后会页面路由顺便传参给书架页面（其实这样实现根本不现实，但是这是我能想到比较丝滑的连接方式了🥺），然后会把这个信息传给数据库（是的我终于连上数据库了😭），数据库会在再次登录时调用写的我写的查询功能，然后得到的数组内容进行渲染就会在书架上啦

然后这是该页面的代码

import router from '@ohos.router';
import TaskModel from '../DateBase/TaskModel'
@Entry
@Component
struct BookDetailPage {

  Img: string = router.getParams()?.['Img'];
  @State Name: string = router.getParams()?.['Name'];
  @State Author: string = router.getParams()?.['Author'];

  build() {
    Row() {
      Column() {
        Image(this.Img)
          .height(140)
          .margin({ top: 10,bottom:10})
        Column() {
          Text(this.Name)
          Text(this.Author)
            .margin({ top: 60 })
        }
        .margin({bottom:10})
        Row({space:10}){
          Button('批量下载')
            .type(ButtonType.Normal)
            .backgroundColor('#f4f4f4')
            .fontColor('#ff686869')

          Button('立即阅读')
            .type(ButtonType.Normal)
            .backgroundColor('#f4f4f4')
            .fontColor('#ff686869')

          Button('收藏本文')
            .type(ButtonType.Normal)
            .fontColor('#ff686869')
            .backgroundColor('#f4f4f4')
            .onClick(()=>{
              router.pushUrl({
                url:'pages/MainPage',
                params: {
                  Img: this.Img,
                  Name:this.Name,
                  Author:this.Author
                }
              })
              TaskModel.addTask(this.Img,this.Name,this.Author)
            })
        }
        .margin({top:20})
      }
      .width('100%')
      .height(300)
      .borderRadius(10)
      .backgroundColor(Color.White)
    }
    .padding(10)
    .height('100%')
    .width('100%')
  }
}

我在”收藏本文“的Button组件上写了点击事件，包括了页面路由和数据库的插入操作，就实现了这个页面的大致功能，其实我数据库连接的时候废了很大功夫，而且有不足的是，只有最后一个按钮实现了点击事件，然后”批量下载“、”立即阅读“等都没有实现功能，有大佬知道怎么可以实现真正的阅读和下载功能吗，求指点。