自制一款ArkUI组件-应用文件管理器（一）

//导入组件
import { Filer } from '../views/filemanager';
//调用组件
struct Index{
    ...
    Column() {
      Filer()
      // Filer({Width:'100%',Height:'100%'}) // 可传入宽高参数
    }.width('100%').height('100%')
}

import fileio from '@ohos.fileio';
import featureAbility from '@ohos.ability.featureAbility';
let context = featureAbility.getContext();// FA模型获取Context模块
// let context = globalThis.abilityContext;// Stage模型获取Context模块

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

type node = {
  id: number, // 当前编号
  fileName: string, // 文件名称
  fileType: FileType, // 文件类型
  path: string, // 完整有效访问路径
  parentId: number, // 父级编号
  size: number, // 文件大小
  mTime: number // 修改时间
}
enum FileType {
  'dir' = 0,// 文件夹
  'file' = 1,// 普通文件
  'else' = 2// 其它类型文件
}

//--- 文件树相关变量
private relativePath: string = '' //内部存储器上此应用程序的文件目录
private absolutePath: string = '' //根目录
private cachePath: string = '' //内部存储目录
private historyNodesTree: Array<node> = [] // 保存所有文件信息，即文件树，需要维护
private rootNodes: Array<node> = [] // 保存三大目录根的信息，不可继续往上访问

//--- 与UI相关的变量
@State private curNodes: Array<node> = [] // 展示当前层级所有文件
@State private pathArray: Array<string> = [''] // 路径分割数组，用于组件顶部路径展示
@State @Watch('onCurParentNodeChange') curParentNode: node = undefined // 保存上一级结点，方便结点和路径更新
private Width: Length = '100%' // 组件默认宽
private Height: Length = '100%' // 组件默认高

backToDir() // 返回上一级
deleteSelectedDir() // 删除操作
unlink() // 删除文件
rmdir() // 删除目录
openSelectedDir() // 打开目录，进入下一级
addNewNode() // 添加新结点
getOrCreateLocalDir() // 获取应用根目录
getFilesDir() // 获取file://根目录
getCacheDir() // 获取cache://根目录

handleFileSize() // 文件字节格式转换
fileSizeTransform() // 文件字节格式转换
timestampToDate() // 时间戳与常用时间格式转换

openSelectedDir(parentNode: node): void { // 传参：待打开的目录结点
  this.curParentNode = parentNode // 更新保存当前结点的父结点
  fileIo.opendir(parentNode.path).then(dir => { // 打开文件夹
    let direct = dir.readSync() // 读取下一个子文件
    this.curNodes.length = 0 // 刷新UI
    while (direct !== undefined) { // 找出所有子文件，逐个构造node结点
      this.addNewNode(parentNode, direct)
      direct = dir.readSync()
    }
    dir.closeSync() // 关闭目录
  }).catch(() => {})
}

addNewNode(parentNode: node, direct?: fileIo.Dirent): void { // 构造node结点并维护文件树
  if (!direct) { // 入参重载
    this.curNodes.push(parentNode)
    this.historyNodesTree.push(parentNode)
    return
  }
  let path = parentNode.path + '/' + direct.name
  let fileType = direct.isDirectory() // 是否为文件夹类型
  let size: number = -1
  let fileStat = fileIo.statSync(path) // 获取文件具体信息
  if (!fileType && fileStat.isFile()) { // 普通文件外的文件类型不展示字节大小
    size = fileStat.size
  }
  let newNode: node = { // 构造node结点
    path: path,
    fileName: direct.name,
    fileType: fileType ? 0 : direct.isFile() ? 1 : 2,
    parentId: parentNode.id,
    id: (this.historyNodesTree.length + 1),
    size: size,
    mTime: fileStat.mtime
  }
  this.curNodes.push(newNode) // 更新当前UI
  this.historyNodesTree.push(newNode) // 维护文件树
  console.info('fsj--- addNewNode: ' + newNode.fileName)
}

async rmdir(node: node) {
    let path = node.path
    await this.bfsRmdir(path) // 删除所有子文件、子目录后
    fileIo.rmdir(node.path).then(() => { // 再删除该目录
        showToast('删除成功')
        this.curNodes = this.curNodes.filter(item => item.id != node.id)
    }).catch((err) => {
        showToast('删除失败: ' + JSON.stringify(err))
    })
}
async bfsRmdir(path: string): Promise<void> { // 深度搜索遍历，删除该目录下的所有子文件、子目录
    return new Promise((res) => {
        fileIo.opendir(path).then(async (dir) => {
            let direct = dir.readSync()
            while (direct !== undefined) {
                let sonPath = path + '/' + direct.name
                if (fileIo.statSync(sonPath).isDirectory()) {
                    await this.bfsRmdir(sonPath)
                }
                fileIo.unlinkSync(sonPath)
                direct = dir.readSync()
            }
            dir.closeSync()
            res()
        })
    })
}