案例介绍

本教程将介绍如何实现文件管理器的文件列表区域。这个区域需要显示当前文件夹的内容，包括文件名、类型、大小和修改日期等信息，并支持文件的选择操作。

代码实现

@Entry
@Component
struct FileManagerPage {
  build() {
    Column() {
      // 文件列表区域
      Column() {
        // 头部信息
        Row() {
          Text(this.currentFolder).fontSize(16).fontWeight(FontWeight.Bold)
          Blank()
          Text(`${this.files.length} 个项目`).fontSize(14).fontColor('#666666')
        }.width('100%').margin({ bottom: 10 })

        // 表头
        Row() {
          Text('名称').width('40%').fontSize(14).fontWeight(FontWeight.Bold)
          Text('类型').width('20%').fontSize(14).fontWeight(FontWeight.Bold)
          Text('大小').width('20%').fontSize(14).fontWeight(FontWeight.Bold)
          Text('修改日期').width('20%').fontSize(14).fontWeight(FontWeight.Bold)
        }
        .width('100%')
        .padding({ top: 8, bottom: 8 })
        .borderBottom({ width: 1, color: '#E0E0E0' })

        // 文件列表
        List() {
          ForEach(this.files, (file) => {
            ListItem() {
              Row() {
                Text(file.name).width('40%').fontSize(14)
                Text(file.type).width('20%').fontSize(14)
                Text(file.size).width('20%').fontSize(14)
                Text(file.date).width('20%').fontSize(14)
              }
              .width('100%')
              .padding({ top: 12, bottom: 12 })
              .borderRadius(4)
              .backgroundColor(this.selectedFile === file.name ? '#E0E0E0' : 'transparent')
              .onClick(() => {
                this.selectedFile = file.name;
              })
            }
          })
        }
        .width('100%')
      }
      .width('100%')
      .height('70%')
      .backgroundColor('#FFFFFF')
      .padding(16)
    }
  }
}

代码详解

1. 列表区域结构

使用Column组件构建垂直布局：

1. 头部信息：显示当前文件夹和文件数量
2. 表头：显示各列的标题
3. 文件列表：使用List组件显示文件项

2. 头部信息实现

1. 布局设计：

• 使用Row实现水平布局
• 左侧显示当前文件夹名称
• 右侧显示文件数量
• Blank()实现两端对齐

2. 样式设置：

• 文件夹名称使用粗体
• 文件数量使用灰色字体
• 底部margin增加间距

3. 表头实现

1. 列宽分配：

• 名称列：40%
• 类型列：20%
• 大小列：20%
• 日期列：20%

2. 样式处理：

• 统一的字体大小和粗细
• 上下内边距8px
• 底部边框分隔

4. 文件列表实现

1. List组件应用：

• 使用ForEach遍历文件数组
• ListItem构建列表项

2. 列表项布局：

• Row组件排列文件信息
• 与表头保持相同的列宽
• 统一的字体大小

3. 交互处理：

• onClick更新selectedFile
• 根据选中状态改变背景色
• 添加内边距和圆角

总结

本教程实现了文件管理器的列表区域，包括：

1. 构建三层列表结构
2. 实现合理的列宽分配
3. 添加文件选择功能
4. 设置统一的样式规范

通过这些实现，为用户提供了清晰的文件浏览和选择界面。