HarmonyOS NEXT 中级开发笔记:基于ArkTS的简易文件浏览器实现

3 阅读1分钟

今天在适配HarmonyOS NEXT时,尝试用ArkTS应用开发语言实现了一个简易文件浏览工具。这个demo主要练习了声明式UI和文件系统接口的调用,记录几个关键点供后续参考。

 

1. 环境准备
HarmonyOS NEXT的DevEco Studio 4.1对ArkTS的支持更完善了,API12的文件管理接口相比之前版本有细微调整,需要特别注意权限声明:

typescript

  ` // module.json5  

"abilities": [{

  "permissions": [

    "ohos.permission.FILE_ACCESS",

    "ohos.permission.READ_MEDIA"

  ]

}]`

 

2. 核心功能实现
通过@ohos.file.fs获取目录列表时,ArkTS的静态类型检查确实能提前发现类型不匹配的问题。下面这段获取文件列表的代码在API12上运行稳定:

typescript

 `

import fs from '@ohos.file.fs';

import common from '@ohos.app.ability.common';

 

class FileItem {

  name: string = ''

  isDirectory: boolean = false

}

 

async function listFiles(context: common.Context, path: string): Promise<FileItem[]> {

  let dir = await fs.openDir(context.filesDir + path);

  let items: FileItem[] = [];

  let next = await dir.readDir();

  while (!next.done) {

    let stat = await fs.stat(next.value.path);

    items.push({

      name: next.value.name,

      isDirectory: stat.isDirectory()

    });

    next = await dir.readDir();

  }

  await dir.close();

  return items.sort((a, b) => Number(b.isDirectory) - Number(a.isDirectory));

}`

 

3. UI渲染优化
利用ArkTS的声明式特性,文件列表的渲染变得很简洁。这里用到了ForEach和条件渲染:

typescript

 

`@Entry

@Component

struct FileBrowser {

  @State fileList: FileItem[] = []

 

  build() {

    Column() {

      List({ space: 10 }) {

        ForEach(this.fileList, (item: FileItem) => {

          ListItem() {

            Row() {

              Image(item.isDirectory ? r(app.media.icfolder):r('app.media.ic_folder') : r('app.media.ic_file'))

                .width(24)

              Text(item.name).fontSize(16)

            }

          }

        })

      }

    }.onAppear(() => {

      this.loadFiles()

    })

  }

}`

 

遇到的问题
刚开始没注意fs.stat返回的是Promise,直接同步调用导致列表渲染异常。ArkTS的类型提示很快帮我定位到了这个问题。

这个简易浏览器还需要完善文件预览、多选操作等功能。HarmonyOS NEXT的文件管理API设计得很清晰,配合ArkTS的强类型特性,开发效率比预期要高。下次准备尝试结合分布式能力实现跨设备文件访问。