案例介绍

本教程将介绍如何实现文件管理器的基础布局结构。通过RowSplit组件，我们可以创建一个包含标题栏、左侧导航区和右侧内容区的界面布局，并支持拖动调整区域大小。

代码实现

@Entry
@Component
struct FileManagerPage {
  build() {
    Column() {
      // 顶部标题栏
      Row() {
        Text('文件管理器').fontSize(20).fontWeight(FontWeight.Bold)
        Blank()
        Button('新建文件夹')
          .fontSize(14)
          .height(32)
          .backgroundColor('#0A59F7')
      }
      .width('100%')
      .height(50)
      .padding({ left: 16, right: 16 })
      .backgroundColor('#F2F2F2')

      // 主内容区域
      RowSplit() {
        // 左侧导航区
        Column() {
          Text('文件夹').fontSize(16).fontWeight(FontWeight.Bold).margin({ bottom: 10 })
          List() {
            ListItem() {
              Row() {
                Image($r('app.media.folder'))
                  .width(24)
                  .height(24)
                  .margin({ right: 8 })
                Text('我的文件')
                  .fontSize(14)
              }
              .width('100%')
              .padding(8)
              .borderRadius(4)
              .backgroundColor(this.currentFolder === '我的文件' ? '#E0E0E0' : 'transparent')
              .onClick(() => {
                this.currentFolder = '我的文件';
              })
            }
          }
        }
        .width('25%')
        .height('100%')
        .backgroundColor('#F5F5F5')
        .padding(16)

        // 右侧区域
        ColumnSplit() {
          // 文件列表区域
          Column() {}
          .width('100%')
          .height('70%')
          .backgroundColor('#FFFFFF')
          .padding(16)

          // 预览区域
          Column() {}
          .width('100%')
          .height('30%')
          .backgroundColor('#F8F8F8')
          .padding(16)
        }
        .width('75%')
        .height('100%')
      }
      .width('100%')
      .height('calc(100% - 50px)')
      .resizeable(true)
      .divider({
        strokeWidth: 4,
        color: '#0A59F7',
        startMargin: 0,
        endMargin: 0
      })
      .minSizes([200, 400])
    }
    .width('100%')
    .height('100%')
  }
}

代码详解

1. 整体布局结构

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

1. 顶部标题栏：固定高度50px
2. 主内容区域：使用calc计算剩余高度
3. 设置整体宽高为100%

2. 标题栏实现

1. 布局设计：

• 使用Row实现水平布局
• Text显示标题
• Blank()创建弹性空间
• Button添加新建按钮

2. 样式设置：

• 浅灰色背景
• 左右内边距16px
• 按钮使用蓝色背景

3. 分割区域实现

1. RowSplit配置：

• resizeable(true)启用拖动调整
• 设置分隔条样式
• 设置最小尺寸限制

2. 左侧导航区：

• 占据25%宽度
• 浅灰色背景
• 16px内边距

3. 右侧内容区：

• 占据75%宽度
• 使用ColumnSplit垂直分割
• 上下区域分别占70%和30%

4. 分隔条样式

使用divider属性配置：

divider({
  strokeWidth: 4,    // 宽度4px
  color: '#0A59F7',  // 蓝色
  startMargin: 0,    // 起始边距
  endMargin: 0       // 结束边距
})

总结

本教程实现了文件管理器的基础布局，包括：

1. 构建整体布局结构
2. 实现标题栏设计
3. 配置RowSplit分割区域
4. 设置分隔条样式和尺寸限制

这个基础布局为后续实现文件列表和预览功能提供了良好的结构基础。