HarmonyOS个人项目案例——综合开发过程记录4

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、简单记事本设计
• 二、相关代码
  • 1.代码部分
  • 2.效果图
• 总结

---

前言

        简单记事本是一款方便用户随时记录想法、事务和备忘的应用软件。无论是日常生活中的重要事件，还是临时的灵感和计划，都可以在简单记事本中轻松地记录下来。通过简单直观的操作界面和便捷的功能，用户可以快速地创建、编辑和查找自己的备忘录。

---

一、简单记事本设计

        此程序包含了两个页面。第一个页面是创建记事本内容，展示了一个文档列表和两个按钮。上方按钮可以回到第一个页面，下方的按钮便可以创建新的文档。点击文档列表中的文档可以跳转到编写文档内容页面。编写文档内容页面展示了一个可编辑的标题和文档内容。

二、相关代码

1.代码部分

创建记事本代码：

import router from '@ohos.router'
@Entry
@Component
struct page2 {
  private index: number = 1
  @State docs: number[] = []
  build() {
    Row() {
      Column({space: 10}) {
        Button('回到第一个游戏')
          .backgroundColor('#201010')
          .onClick(() => {
            router.pushUrl({
              url: 'pages/page1'
            })
          })
        Divider()
        Button('新建文档')
          .onClick(() => {
            this.docs.push(this.index)
          })
        ForEach(this.docs, id => {
          Row({space:10}){
            Image($r('app.media.ic_files_doc'))
              .width(20)
            Text(`文档${id}`)
              .fontSize(18)
              .onClick(() => {
                router.pushUrl({
                  url:'pages/Page3'
                })
              })
          }
          .width('100%')
        })
      }
      .width('100%')
      .height('100%')
      .padding(20)
    }
  }
}

编写内容代码：

import router from '@ohos.router'
@Entry
@Component
struct Page3 {
  @State editTitle: boolean = true
  @State title: string = '标题'
  @State content: string = ''

  build() {
    Row() {
      Column({ space: 10 }) {
        Row({ space: 10 }) {
          Image($r('app.media.ic_public_back'))
            .width(30)
            .onClick(() => {
              router.back()
            })
          if (!this.editTitle) {
            Text(this.title)
              .fontSize(30)
              .fontWeight(FontWeight.Bold)
              .onClick(() => this.editTitle = true)
          } else {
            TextInput({
              placeholder: '请输入标题',
              text: this.title
            })
              .layoutWeight(1)
              .onChange(val => this.title = val)
            Button('确定')
              .onClick(() => this.editTitle = false)
          }
        }
        .width('100%')

        Divider()
        TextArea({
          placeholder: '请输入文档内容',
          text: this.content
        })
          .layoutWeight(1)
          .onChange(val => this.content = val)
      }
      .padding(10)
      .width('100%')
      .height('100%')
    }
  }
}

2.效果图

创建记事本效果图：

编写内容效果图：

---

总结

        这段代码使用OHOS框架提供的组件和属性来构建页面，并通过State属性来管理页面状态。通过点击事件和路由跳转实现页面之间的交互。整体设计简单清晰，易于理解和扩展。