目录

案例介绍

本篇文章将详细介绍如何在HarmonyOS NEXT中实现文件管理器的文件树导航功能。我们将重点关注如何设计数据结构和实现导航树的界面布局，以提供清晰直观的文件系统导航体验。

代码实现

@Entry
@Component
struct FileManager {
  // 文件系统数据结构
  @State fileSystem: Array<{
    id: number,
    name: string,
    type: 'folder' | 'file',
    size?: string,
    modifiedTime?: string,
    children?: Array<{
      id: number,
      name: string,
      type: 'folder' | 'file',
      size?: string,
      modifiedTime?: string
    }>
  }> = [
    {
      id: 1,
      name: '文档',
      type: 'folder',
      children: [
        {
          id: 11,
          name: '工作报告.docx',
          type: 'file',
          size: '2.5MB',
          modifiedTime: '2024-02-28 14:30'
        },
        {
          id: 12,
          name: '会议记录',
          type: 'folder'
        }
      ]
    }
  ]

  // 当前选中的文件夹ID
  @State currentFolderId: number = 1

  build() {
    Row() {
      // 导航树区域
      Column() {
        // 标题
        Text('文件管理器')
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .width('100%')
          .padding(15)

        // 导航树
        List() {
          ForEach(this.fileSystem, (item) => {
            ListItem() {
              Row() {
                Image(item.type === 'folder' ? $r('app.media.folder') : $r('app.media.file'))
                  .width(20)
                  .height(20)
                Text(item.name)
                  .fontSize(14)
                  .margin({ left: 8 })
              }
              .width('100%')
              .padding(10)
              .backgroundColor(this.currentFolderId === item.id ? '#F0F0F0' : Color.White)
              .onClick(() => {
                this.currentFolderId = item.id
              })
            }
          })
        }
        .width('100%')
        .layoutWeight(1)
      }
      .width(200)
      .height('100%')
      .backgroundColor(Color.White)
    }
    .width('100%')
    .height('100%')
  }
}

代码详解

数据结构设计

1. 文件系统数据模型

   • 使用TypeScript接口定义文件和文件夹的数据结构
   • 每个节点包含唯一的id、名称和类型
   • 文件夹节点可以包含子文件和子文件夹
   • 文件节点额外包含大小和修改时间信息

2. 状态管理

   • 使用@State装饰器管理文件系统数据
   • currentFolderId记录当前选中的文件夹
   • 初始化时默认选中第一个文件夹

导航树实现

1. 布局结构

   • 使用Column组件作为导航树的容器
   • 固定宽度为200像素
   • 标题区域显示"文件管理器"
   • List组件展示文件夹列表

2. 文件夹项渲染

   • 使用ForEach遍历fileSystem数组
   • 每个ListItem包含图标和文件夹名称
   • 根据type属性显示不同的图标
   • 选中状态通过背景色区分

3. 交互处理

   • 点击文件夹时更新currentFolderId
   • 通过backgroundColor属性实现选中效果
   • 使用onClick事件处理文件夹切换

样式优化

1. 文本样式

   • 标题使用16号字体，中等字重
   • 文件夹名称使用14号字体
   • 合理的内边距和外边距设置

2. 布局样式

   • 图标固定大小为20x20
   • 文件夹项使用10像素的内边距
   • 选中状态使用浅灰色背景

总结

本篇文章详细介绍了文件管理器导航树功能的实现，包括数据结构设计、界面布局和交互处理。通过合理的组件嵌套和状态管理，实现了一个简洁而实用的文件导航功能。关键要点包括：

1. 使用TypeScript接口定义清晰的数据结构
2. 合理使用@State装饰器管理状态
3. 通过List组件实现文件夹列表
4. 实现直观的选中状态显示
5. 优化界面样式和交互体验