鸿蒙NEXT开发-知乎评论小案例

知乎评论小案例

基本介绍

首页

评论页

分解组件

新增导航栏组件

import { router } from '@kit.ArkUI'

@Preview
  @Component
  export default struct NavBarComponent {
    title: string = "标题"

    build() {
      Row() {
        // 返回键
        Row() {
          Image($r('app.media.back'))
            .width(16)
            .height(16)
        }
        .width(30)
          .height(30)
          .borderRadius(15)
          .backgroundColor("#f4f4f4")
          .justifyContent(FlexAlign.Center)
          .margin({
            left: 20
          })
          .onClick(() => {
            router.back()
          })

        Text(this.title)
          .layoutWeight(1)
          .textAlign(TextAlign.Center)
          .margin({
            right: 50
          })
      }
      .width('100%')
        .height(50)
        .border({
          color: "#f4f5f6",
          width: {
            bottom: 1
          }
        })
    }
  }

新增首页内容组件

import ContentModel from '../model/ContentModel'

@Preview
  @Component
  export default struct ContentComponent {
    @State item: ContentModel = new ContentModel(1,
                                                 'https://p6-passport.byteacctimg.com/img/user-avatar/d7ad5f39e86149d511489a5cdec341d5~100x100.awebp',
                                                 '东林知识库',
                                                 '本库是个人学习的时候记录的笔记 对 Java 的一些基础知识、数据库知识、以及框架知识进行收集、整理（持续更新中）',
                                                 $r('app.media.content'),
                                                 '10-30',
                                                 '合肥'
                                                )

    build() {
      Row({ space: 10 }) {
        Image(this.item.avatar)
          .width(40)
          .height(40)
          .borderRadius(20)

        Column({ space: 10 }) {
          Text(this.item.author)
            .fontColor("#303a43")
            .fontSize(18)
            .fontWeight(FontWeight.Bold)

          Text(this.item.content)
            .fontColor("#2f3642")
            .lineHeight(22)
          Row() {
            Text(`${this.item.time} .IP属地${this.item.area}`)
              .fontColor("#cacaca")
              .fontSize(12)

            Image(this.item.images)
              .width(80)
              .height(60)
          }
          .justifyContent(FlexAlign.SpaceBetween)
            .width('100%')
        }
        .alignItems(HorizontalAlign.Start)
          .layoutWeight(1)

      }
      .alignItems(VerticalAlign.Top)
        .padding(20)
        .width('100%')
    }
  }

新增评论组件

import ReplyItemModel from '../model/ReplyItemModel'

@Preview
  @Component
  export default struct CommentItemComponent {
    @State item: ReplyItemModel = new ReplyItemModel(1,
                                                     'https://picx.zhimg.com/027729d02bdf060e24973c3726fea9da_l.jpg?source=06d4cd63',
                                                     '小花',
                                                     '谁能爱我一次哈哈',
                                                     '11-30',
                                                     '海南',
                                                     34,
                                                     false
                                                    )

    build() {
      Row({ space: 10 }) {
        Image(this.item.avatar)
          .width(40)
          .height(40)
          .borderRadius(20)

        Column({ space: 10 }) {
          Text(this.item.author)
            .fontColor("#303a43")
            .fontSize(18)
            .fontWeight(FontWeight.Bold)

          Text(this.item.content)
            .fontColor("#2f3642")
            .lineHeight(22)
          Row() {
            Text(`${this.item.time} .IP属地${this.item.area}`)
              .fontColor("#cacaca")
              .fontSize(12)

            Row({ space: 4 }) {
              Image($r("app.media.like"))
                .width(40)
                .height(30)
                .fillColor("#cacaca")

              Text(this.item.likeNum.toString())
                .fontColor("#cacaca")
                .fontSize(12)

            }
          }
          .justifyContent(FlexAlign.SpaceBetween)
            .width('100%')
        }
        .alignItems(HorizontalAlign.Start)
          .layoutWeight(1)

      }
      .alignItems(VerticalAlign.Top)
        .padding(20)
        .width('100%')
    }
  }

新增评论回复组件

import ReplyItemModel from '../model/ReplyItemModel'


@Component
  export default struct ReplyInputComponent {
    @Link contentList: ReplyItemModel[]
    @State content: string = ''

    build() {
      Row({ space: 10 }) {
        TextInput({ text: $$this.content, placeholder: '～请留下您的神评论' })
          .layoutWeight(1)
          .height(40)
        Button("发布")
          .onClick(() => {
            if (this.content) {
              this.contentList.push(new ReplyItemModel(Math.random(),
                                                       'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1bad8264-7428-44cf-a92d-3016a2de537b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1711626934&t=5478cb3adef5d3e29e6952934797ca39',
                                                       '东林',
                                                       this.content,
                                                       '10-30',
                                                       '山东',
                                                       31,
                                                       false
                                                      ))
              this.content = ""
            }
          })
      }
      .padding({ left: 10, right: 10 })
        .width('100%')
        .height(60)
    }
  }

新增实体类

export default class ContentModel {
  id: number = 0
  avatar: string = ''
  author: string = ''
  content: string = ''
  images: string | Resource = ''
  time: string = ''
  area: string = ''

  constructor(id: number, avatar: string, author: string, content: string, images: string | Resource, time: string,
              area: string) {
    this.id = id
    this.avatar = avatar
    this.author = author
    this.content = content
    this.time = time
    this.area = area
    this.images = images
  }
}

export default class ReplyItemModel {
  id: number = 0
  avatar: string = ''
  author: string = ''
  content: string = ''
  time: string = ''
  area: string = ''
  likeNum: number = 0
  likeFlag: boolean = false

  constructor(id: number, avatar: string, author: string, content: string, time: string, area: string, likeNum: number,
              likeFlag: boolean) {
    this.id = id
    this.avatar = avatar
    this.author = author
    this.content = content
    this.time = time
    this.area = area
    this.likeNum = likeNum
    this.likeFlag = likeFlag
  }
}

新增页面

详情页

import NavBarComponent from '../components/NavBarComponent'
import CommentItemComponent from '../components/CommentItemComponent'
import ReplyItemModel from '../model/ReplyItemModel'
import ReplyInputComponent from '../components/ReplyInputComponent'

@Entry
  @Component
  struct Detail {

    @State commentList: ReplyItemModel[] = [
      new ReplyItemModel(1,
                         'https://picx.zhimg.com/027729d02bdf060e24973c3726fea9da_l.jpg?source=06d4cd63',
                         '小花',
                         '谁能爱我一次哈哈',
                         '11-30',
                         '海南',
                         34,
                         false
                        ),
      new ReplyItemModel(2,
                         'https://pic1.zhimg.com/v2-5a3f5190369ae59c12bee33abfe0c5cc_xl.jpg?source=32738c0c',
                         '东林',
                         '东林大王来了',
                         '11-30',
                         '北京',
                         100,
                         true
                        ),

      new ReplyItemModel(3,
                         'https://pic1.zhimg.com/v2-5a3f5190369ae59c12bee33abfe0c5cc_xl.jpg?source=32738c0c',
                         '小妹',
                         '今天吃香蕉',
                         '11-30',
                         '北京',
                         100,
                         true
                        ),
      new ReplyItemModel(4,
                         'https://pic1.zhimg.com/v2-5a3f5190369ae59c12bee33abfe0c5cc_xl.jpg?source=32738c0c',
                         '大王',
                         '我要好好学习报效国家',
                         '11-30',
                         '北京',
                         100,
                         true
                        ),
    ]

    build() {
      Column() {
        NavBarComponent({ title: '评论回复' })
        Divider().strokeWidth(6)
        Row() {
          Text("评论数50")
        }
        .width('100%')
          .height(50)
          .padding({
            left: 20
          })
          .border({
            color: '#f3f4f5',
            width: {
              bottom: 1
            }
          })

        List() {
          ForEach(this.commentList, (item: ReplyItemModel) => {
            ListItem() {
              CommentItemComponent({ item })
            }
          }, (item: ReplyItemModel) => item.id.toString())
        }.layoutWeight(1)

        ReplyInputComponent({ contentList: this.commentList })

      }
    }
  }

首页页面

import ContentComponent from '../components/ContentComponent'
import ContentModel from '../model/ContentModel'
import { router } from '@kit.ArkUI'

@Entry
  @Component
  struct Index {
    @State content: ContentModel = new ContentModel(1,
                                                    'https://p6-passport.byteacctimg.com/img/user-avatar/d7ad5f39e86149d511489a5cdec341d5~100x100.awebp',
                                                    '东林知识库',
                                                    '本库是个人学习的时候记录的笔记 对 Java 的一些基础知识、数据库知识、以及框架知识进行收集、整理（持续更新中）',
                                                    'https://p6-passport.byteacctimg.com/img/user-avatar/d7ad5f39e86149d511489a5cdec341d5~100x100.awebp',
                                                    '10-30',
                                                    '合肥',
                                                   )

    build() {
      Column() {
        Text('我是知乎首页')
        List() {
          ForEach([1, 2, 3, 4, 5, 6, 7], () => {
            ListItem() {
              ContentComponent({ item: this.content })
                .onClick(() => {
                  router.pushUrl({
                    url: 'pages/Detail'
                  })
                })
            }
          })

        }

      }
      .justifyContent(FlexAlign.Start)
        .width('100%')
        .height('100%')

    }
  }