自制一款ArkUI組件-應用文件管理器（一）

作者：FFH_PETSJ 2023-02-24 16:08:09

系統 OpenHarmony

在涉及應用內部存儲的開發時，常常翻閱手機自帶的文件管理檢查。正好在學習文件管理的接口，想著實現一個第三方組件用于當前應用的文件查看和管理。

??想了解更多關于開源的內容，請訪問：??

??51CTO 開源基礎軟件社區??

??https://ost.51cto.com??

前言

介紹

類型：第三方組件.ets
語言框架：ArkTs
API版本：HarmonyOS SDK 8
模型：FA

目前已實現的功能：

上下級文件的瀏覽
查看文件基本信息（名稱、大小、修改日期）
刪除文件
文件路徑顯示
組件寬高、橫豎屏自適應

使用示例

//導入組件
import { Filer } from '../views/filemanager';
//調用組件
struct Index{
    ...
    Column() {
      Filer()
      // Filer({Width:'100%',Height:'100%'}) // 可傳入寬高參數
    }.width('100%').height('100%')
}

接下來是實現思路的簡單分析，有興趣的可以看一下源代碼。

實現思路

主要涉及兩個方面：

接口函數
交互設計（后續出）

1.接口函數

（1）接口方法整理

接口函數涉及到文件目錄的訪問、文件信息的讀取、文件的刪除等，文檔接口非常多，但只需認識基本的幾個接口就夠用了。

文檔傳送門：??@ohos.fileio (文件管理)-文件管理-接口參考（ArkTS及JS API）-手機、平板、智慧屏和智能穿戴開發-ArkTS API參考-HarmonyOS應用開發??

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

這里給大家整理了基本的接口：

相關對象	描述
fileio.Dir	目錄實例
fileio.Direct	目錄項實例
fileio.stat	文件具體信息

相關接口方法	作用
fileio.openDir(path: string)	打開目錄（文件夾）
fileio.stat(path: string)	獲取文件信息（大小、修改日期等）
fileio.unlink(path: string)	刪除文件
fileio.rmDir(path: string)	刪除目錄
fileio.Dir.read()	讀取下一個目錄項
fileio.Dir.close()	關閉目錄
fileio.Direct.name	目錄項名稱屬性
fileio.Direct.isDirectory()	是否為目錄（文件夾）
fileio.Direct.isFile()	是否為普通文件

下面是底層開放訪問的三大目錄：

相關接口方法	作用	訪問
Context.getOrCreateLocalDir()	獲取應用程序的本地根目錄	preferences目錄所在
Context.getCacheDir()	獲取該應用程序的內部存儲目錄	cache 臨時目錄 internal://cache
Context.getFilesDir()	獲取內部存儲器上此應用程序的文件目錄	files 文件（私有）目錄 internal://app

以上接口返回的路徑都是以 /data/user/0/包名/ 開頭，是多種訪問路徑的其中一種。
PS：
Stage模型中提供的目錄訪問接口與FA不同，有三個目錄：tempDir、cacheDir、filesDir，還有其它類型的目錄如數據庫目錄等，具體參考gitee文檔 ??Context模塊??。
API 9 還提供了新的文件管理接口，但是接口方法大同小異:

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

（2）代碼思路

以數據結構中最基本的樹狀結構數組來保存文件的父子關系和個體信息，每一次的文件操作相當于維護這樣的一個文件樹

每一個文件對應一個node結點：

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() // 時間戳與常用時間格式轉換

下面是部分與fileio密切相關的函數：

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()
        })
    })
}