鸿蒙期末作业记录3（书城页面）

Lwenja

已于 2024-06-29 20:34:56 修改

阅读量654

点赞数 11

文章标签： harmonyos 华为

于 2024-06-29 00:09:06 首次发布

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

版权

书城页面的构建

之前用Tabs写完了MainPage页面，然后就该详细的页面了，我最开始写的就是这个书城页面，因为我感觉后面的不太好写🥺

ps:这个页面参考了某佩、某江😊

组件基本介绍

这个是MainPage第二个 TabContent()调用的页面，下面是他组件的构成，总的来说是最外层一个column组件，最上方的Text组件是“推荐”，image是图片（是芙蓉嘻嘻），紧接着是一个Row组件，这个组件是“标签、排行”那一栏，剩下的是一个List集合，list集合里面是两个listItem组件，“本周力荐”里面是可以横向滑动，“畅销热追”里面可以竖向滑动，这个是基本介绍。

实验过程

Bug

其实这个页面有个没解决的bug，我不得已才弄成这样。我本来想象的页面是整个页面可以滑动，我是将大概页面写的差不多才想起来要可以滑动页面的，所以到后面设置List组件的时候一团乱。如下图：真给我看笑了。

因为这个组件太多了不好搞，我就只弄成了下方可以滑动，成了现在的组件样式

还有一个Bug，是我用了List之后，下滑的时候，最后一部分总是显示不全

解决：最后在list那里写这个就好啦

具体操作

这些基本组件没什么好记录的，按照自己的审美来就是了。

下面是一些与其他页面联动的东西

点击图书信息之后通过页面路由转跳到另一个页面，并且将图书的图片、作者姓名、图书名通过页面路由的传参传到另一个页面。

所以我抽调出来了类，做了页面传递

抽调的类：

export class BookStoreInfo{
  img:Resource
  name:string
  author:string

  constructor(img:Resource,name:string,author:string) {
    this.img=img;
    this.name=name;
    this.author=author
  }
}

@State arr:Array<BookStoreInfo>=[
    new BookStoreInfo($r('app.media.novel1'),'嘻嘻嘻','嘻嘻嘻'),
    new BookStoreInfo($r('app.media.novel2'),'嘻嘻嘻','嘻嘻嘻'),
    new BookStoreInfo($r('app.media.novel3'),'嘻嘻嘻','嘻嘻嘻'),
    new BookStoreInfo($r('app.media.novel4'),'嘻嘻嘻','嘻嘻嘻')
  ]

点击后页面路由代码：

onJumpClick1(): void {
    router.pushUrl({
      url: 'pages/MainAllPages/BookDetailPage',
      params: {
        Img: this.BookStoreInfo.img,
        Name:this.BookStoreInfo.name,
        Author:this.BookStoreInfo.author
      }
    }, router.RouterMode.Standard, (err) => {
      if (err) {
        console.error(`Invoke replaceUrl failed, code is ${err.code}, message is ${err.message}`);
        return;
      }
      console.info('Invoke replaceUrl succeeded.');
    });
  }

将图片传到另一个页面后，另一个页面会进行渲染得到如下图：

被码掉的是图书信息

这个页面下一篇博客记录嘿嘿

还有一部分是点击书单之后会有新的页面跳转，跟上面本质上是一样的，就不记录啦，嘿嘿

记一下效果图，大概就是这样哈

该页面总代码：

import router from '@ohos.router'
import { BookStoreHotInfo } from '../MainInfo/BookStoreHotInfo'
import { BookStoreInfo } from '../MainInfo/BookStoreInfo'
@Component
export struct  BookStore {
  @State arr:Array<BookStoreInfo>=[
    new BookStoreInfo($r('app.media.novel1'),'嘻嘻嘻','嘻嘻嘻'),
    new BookStoreInfo($r('app.media.novel2'),'嘻嘻嘻','嘻嘻嘻'),
    new BookStoreInfo($r('app.media.novel3'),'嘻嘻嘻','嘻嘻嘻'),
    new BookStoreInfo($r('app.media.novel4'),'嘻嘻嘻','嘻嘻嘻')
  ]
  @State arrHot:Array<BookStoreHotInfo>=[
    new BookStoreHotInfo($r('app.media.novel5'),'嘻嘻嘻','嘻嘻嘻','嘻嘻嘻'),
    new BookStoreHotInfo($r('app.media.novel6'),'嘻嘻嘻','嘻嘻嘻','嘻嘻嘻'),
    new BookStoreHotInfo($r('app.media.novel1'),'嘻嘻嘻','嘻嘻嘻','嘻嘻嘻'),
  ]
  build(){
      Column() {
        Text('推荐')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .margin(10)
        Image($r("app.media.king_fufu"))
          .height('15%')
          .width('100%')
          .borderRadius(10)
          .padding({ left: 10, right: 10 })
        Row() {
          Column() {
            Image($r("app.media.label"))
              .width(40)
            Text('标签')
          }
          .justifyContent(FlexAlign.Center)
          .backgroundColor('#FFB0B6')
          .width(60)
          .height(60)
          .borderRadius(15)
          .margin(4)

          Column() {
            Image($r("app.media.top"))
              .width(40)
            Text('排行')
          }
          .justifyContent(FlexAlign.Center)
          .backgroundColor('#FED19A')
          .width(60)
          .height(60)
          .borderRadius(15)
          .margin(4)


          Column() {
            Image($r("app.media.book"))
              .width(40)
              .onClick(()=>{
                router.pushUrl({
                  url:'pages/MainAllPages/Books'
                })
              })
            Text('书单')
          }
          .justifyContent(FlexAlign.Center)
          .backgroundColor('#58EDEB')
          .width(60)
          .height(60)
          .borderRadius(10)
          .margin(4)

          Column() {
            Image($r("app.media.free"))
              .width(40)
            Text('免费')
          }
          .justifyContent(FlexAlign.Center)
          .backgroundColor('#8FE0FE')
          .width(60)
          .height(60)
          .borderRadius(10)
          .margin(4)

          Column() {
            Image($r("app.media.finish"))
              .width(40)
            Text('完结')
          }
          .justifyContent(FlexAlign.Center)
          .backgroundColor('#CDCFFF')
          .width(60)
          .height(60)
          .margin(4)
          .borderRadius(10)
        }
        .height('15%')
        .margin({ left: 10, right: 10 })
        .backgroundColor(Color.White)
        .margin({ top: 10 })
        .borderRadius(20)
        .width('100%')
        .justifyContent(FlexAlign.SpaceAround)

        List({space:10}){
          ListItem(){
            Column() {
              Text('本周力荐')
                .fontWeight(FontWeight.Bolder)
                .fontSize(25)
                .margin({top:10,left:10})
                .width('100%')
              List({space:10}) {
                ForEach(this.arr, (item: BookStoreInfo) => {
                  ListItem() {
                    BookStoreCard({BookStoreInfo:item})
                      .margin({top:7})
                  }
                })
              }
              .listDirection(Axis.Horizontal)
            }
            .justifyContent(FlexAlign.SpaceAround)
            .backgroundColor(Color.White)
            .width('100%')
            .height(200)
            .margin({ top: 10 })
            .borderRadius(20)
          }
          ListItem(){
            Column() {
              Text('畅销热追')
                .fontWeight(FontWeight.Bolder)
                .fontSize(25)
                .width('100%')
                .margin({top:10,left:10})

              List() {
                ForEach(this.arrHot, (item: BookStoreHotInfo) => {
                  ListItem() {
                    BookStoreHotCard({BookStoreHotInfo:item})
                      .margin({top:7})
                  }
                })
              }
              .layoutWeight(1)
            }
            .backgroundColor(Color.White)
            .width('100%')
            .height(370)
            .margin({ top: 10 })
            .borderRadius(20)
          }
        }
        .margin({top:10,bottom:10})
        .height('100%')
        .width('100%')
        .layoutWeight(1)
        .padding({left:10,right:10})
        .alignListItem(ListItemAlign.Start)
      }
      .backgroundColor('#F4F4F4')
      .height('100%')

  }
}
@Component
struct BookStoreCard{
  BookStoreInfo:BookStoreInfo;
  build(){
    Column({space:2}){
      Image(this.BookStoreInfo.img)
        .width(70)
        .height(100)
        .margin({right:10})
        .onClick(()=>{
          this.onJumpClick1()
        })
      Text(this.BookStoreInfo.name)
      Text(this.BookStoreInfo.author)
        .fontColor('#ff7e7e7e')
    }
  }
   onJumpClick1(): void {
    router.pushUrl({
      url: 'pages/MainAllPages/BookDetailPage',
      params: {
        Img: this.BookStoreInfo.img,
        Name:this.BookStoreInfo.name,
        Author:this.BookStoreInfo.author
      }
    }, router.RouterMode.Standard, (err) => {
      if (err) {
        console.error(`Invoke replaceUrl failed, code is ${err.code}, message is ${err.message}`);
        return;
      }
      console.info('Invoke replaceUrl succeeded.');
    });
  }
}

@Component
struct BookStoreHotCard{
  BookStoreHotInfo:BookStoreHotInfo;
  build(){
    Row({space:2}){
      Image(this.BookStoreHotInfo.img)
        .width(70)
        .height(100)
        .margin({right:10,left:10})
        .onClick(()=>{
          this.onJumpClick1()
        })
      Column(){
        Text(this.BookStoreHotInfo.name)
          .margin(10)
          .fontWeight(FontWeight.Bold)
        Text(this.BookStoreHotInfo.introduction)
          .margin(10)
          .fontColor('#ff7e7e7e')
        Text(this.BookStoreHotInfo.author)
          .fontColor('#ff7e7e7e')
      }
      .height(100)

    }
  }
  onJumpClick1(): void {
    router.pushUrl({
      url: 'pages/MainAllPages/BookDetailPage',
      params: {
        Img: this.BookStoreHotInfo.img,
        Name:this.BookStoreHotInfo.name,
        Author:this.BookStoreHotInfo.author
      }
    }, router.RouterMode.Standard, (err) => {
      if (err) {
        console.error(`Invoke replaceUrl failed, code is ${err.code}, message is ${err.message}`);
        return;
      }
      console.info('Invoke replaceUrl succeeded.');
    });
  }
}