用鸿蒙编写一个图书管理页面！！！！！！！！！！

年薪不到1个亿
600 阅读4分钟

用鸿蒙编写一个图书管理页面！！！！！！！！！！

image-20240825174317521.png

该图就是我们接下来要完成的效果，所以各位加油吧！！！！！！！！！！！！！！！！

第一步：完成静态布局

让我们什么也别想，先完成静态布局吧，不要考虑其他部分的各种，就先盯着眼前的静态页面，完成第一步，然后再根据需求，逐步完成其他功能的实现，这就是做一个小功能的基本步骤

首先：

image-20240825174855175.png 该部分，是两行的结构，其中用到了textInput和buttom组件来实现，加上背景颜色，样式等，就可以完成上方图片的效果，代码部分如下：

        Row({ space: 10 }) {
          TextInput({ placeholder: '单价' })
            .backgroundColor('#DFF5E5')
            .layoutWeight(1)
            .borderRadius(0)
          Button('新增')
            .backgroundColor('#509863')
            .layoutWeight(1)
            .type(ButtonType.Normal)
        }
        .width('100%')

其次：

image-20240825175437930.png

该部分，可以有两种写法，一是直接硬写，不用如何技巧，生搬上去（当然这种写法，我并不建议大家使用，因为这样影响了代码的美观和可读性），二是利用foreach循环来进行，序号，书名，作者等第一行的可以用多个基本text放在一行上来完成，而下方的数据，则可以运用foreach循环得到。如果没有数据，则需要自己写出，当然大部分情况下，可以直接得到数据，这里，我给大家说一下如何得到一个数据数组。

首先：你需要先声明一个接口，然后创建一个对象，并为其赋值，然后就结束了，当然，不同的数据有不同的结构，具体情况具体分析

我就不展示如何得到数据数组了，我这里直接使用了，代码如下：

      ForEach(this.BookList, (item: IBook, index: number) => {
        Row() {
          Text((index + 1).toString())
            .width('10%')
            .border({ width: 1 })
            .textAlign(TextAlign.Center)
          Text(item.name)
            .width('30%')
            .border({ width: 1 })
            .textAlign(TextAlign.Center)
          Text(item.author)
            .width('20%')
            .border({ width: 1 })
            .textAlign(TextAlign.Center)
          Text(item.price.toString())
            .width('25%')
            .border({ width: 1 })
            .textAlign(TextAlign.Center)
          Text('删除')
            .width('15%')
            .border({ width: 1 })
            .textAlign(TextAlign.Center)
            .onClick(() => {
              this.Delete(item.id)
            })
        }
        .width('100%')
      })

最后：

image-20240825180254968.png

该图片上的布局应该轻轻松松，我就不再过多的演示了

第二步：各种功能的实现

对于一个简单的图书管理，所需要实现的功能也并不是太多，就如同下图：

image-20240825180521800.png

这也是最简单的4个功能实现，接下来，我将一个一个介绍该如何实现这四个功能：

1. 新增书本：

这个功能其实很简单，首先，你要知道如何新增书本，上面静态布局曾经写过，书名，作者，单价，所以当你想新增一本书时，你必须在上方输入框中填上这个三个属性。

所以，第一步用@state修饰符，创立三个变量，如下：

 //新增书籍名字
  @State
  newBook: string = ''
  //新增书籍作者
  @State
  newAuthor: string = ''
  //新增书籍价格
  @State
  newPrice: number = 0

然后再给定三个输入框所在代码，textInput里面新添一个text：this.newBook/newAuthor/newPrice

最后再在添加按钮的下方放一个点击事件，将新增的数据添加至数组中，即可完成，代码如下：

    const myBool: IBook = {
      id: Date.now(),
      name: this.newBook,
      author: this.newAuthor,
      price: Number(this.newPrice)
    }
    this.Book.push(myBool)

2. 搜索功能

要实现该功能，你要知道，当用户搜索书籍时，下方列表图书将会变成有用户所输入的关键字的图书，这里有一个列表更新，所以你应该在实现该功能之前，再多添一个完整数组数据，用来当最初的全部图书列表，代码如下：

  //全部书籍信息：
  Book: IBook[] = [
    {
      id: 0,
      name: '斗罗大陆',
      author: '唐家三少',
      price: 99
    },
    {
      id: 1,
      name: '大主宰',
      author: '天蚕土豆',
      price: 100
    }
  ]
  //给用户搜索展示的书籍信息
  @State
  BookList: IBook[] = [...this.Book]

然后，就跟第一步差不多，先用@state创建一个变量，然后创建一个点击事件及可完成，代码如下：

    this.BookList = this.Book.filter(v => {
      if (v.name.includes(this.mySearch) || v.author.includes(this.mySearch)) {
        return true
      } else {
        return false
      }
    })

这里运用了两个数组方法，一个是filter另一个是includes，第一个是过滤的意思，第二个是查看数组中是否包含该元素

3. 统计功能

该功能相对于上方两个功能更加容易实现，你只需要知道一些数组方法即可实现，代码如下：

        Text(`合计:${this.BookList.length}本`)
        Text(`总价:${this.BookList.reduce((a, b) => a + b.price, 0)}元`)

4. 删除功能

该功能要实现，你首先要知道，当你准备删掉一本图书师，如果你只是单纯的利用foreach循环中的下标index，那就大错特错了，因为当用户搜索某本书时，然后点击删除，该下标的书对应着完整图书列表中的另一个书，此时删除的不是用户想删除的书，而是完整图书列表中的书

所以你应该要知道，单纯利用下标来删除是不可靠的，这时，就应该用上id，因为每个数组中数据的id是唯一的，所以不会有上述问题

代码如下：

image-20240825183012725.png

此时，当你补齐一些小代码时，该图书管理你就实现了~！！！！！！！！！！！！！！！~

本文部分参考来自华为鸿蒙应用开发

“本文正在参加华为鸿蒙有奖征文征文活动”

avatar
文章
阅读
粉丝