HarmonyOS鸿蒙Next ArkUI实现语音笔记应用布局 实战

HarmonyOS鸿蒙Next 5开发日记：ArkUI实现语音笔记应用布局 最近在尝试用HarmonyOS NEXT的ArkUI方舟开发框架开发一款商务办公类语音笔记应用，记录一下开发过程中的一些实践心得。

ArkUI方舟开发框架的声明式UI设计确实让界面开发效率提升不少。在构建语音笔记应用时，通过简洁的ArkTS语法就能实现复杂的界面交互。下面分享一个实现语音录制列表界面的代码片段，基于HarmonyOS NEXT API12版本：

// 语音笔记列表项组件

@Component

struct VoiceNoteItem {

  @Prop noteTitle: string

  @Prop recordTime: string

  @Prop duration: string



  build() {

    Column() {

      Row() {

        Image($r('app.media.ic_voice_note'))

          .width(24)

          .height(24)

          .margin({ right: 12 })
        
        Column() {

          Text(this.noteTitle)

            .fontSize(16)

            .fontWeight(FontWeight.Medium)

          Text(this.recordTime)

            .fontSize(12)

            .opacity(0.6)

        }
        .layoutWeight(1)
        
        Text(this.duration)

          .fontSize(14)

      }
      .padding(12)

      .width('100%')
      
      Divider()

        .strokeWidth(0.5)

        .color('#f0f0f0')

    }

  }

}

// 主页面

@Entry

@Component

struct VoiceNoteList {

  @State notes: Array<{
    title: string
    time: string
    duration: string
  }> = [
    { title: '项目会议记录', time: '2024-03-15 14:30', duration: '12:34' },
    { title: '产品需求讨论', time: '2024-03-14 10:15', duration: '08:21' }
  ]

  build() {

    Column() {

      // 标题栏

      Row() {

        Text('语音笔记')

          .fontSize(20)

          .fontWeight(FontWeight.Bold)
        
        Button('新建')

          .type(ButtonType.Capsule)

          .onClick(() => {
            
            // 跳转到录音界面
            
          })

      }
      .justifyContent(FlexAlign.SpaceBetween)

      .padding(16)
      
      // 笔记列表

      List({ space: 8 }) {

        ForEach(this.notes, (item) => {

          ListItem() {

            VoiceNoteItem({
              noteTitle: item.title,
              recordTime: item.time,
              duration: item.duration
            })

          }

        })

      }
      .layoutWeight(1)

      .width('100%')

    }
    .height('100%')

  }

}

在HarmonyOS NEXT上使用ArkUI开发时，发现其响应式设计能很好地适配不同尺寸的设备，这对商务办公场景下的多设备协同很有帮助。组件化的开发方式也让代码结构更清晰，便于后期维护。

目前还在学习ArkUI更高级的特性，比如状态管理和动画效果，希望能进一步提升应用的用户体验。HarmonyOS NEXT的分布式能力也是下一步要探索的重点，考虑如何让语音笔记在不同设备间无缝流转。