案例介绍

本教程将介绍如何实现邮件客户端的交互功能，包括文件夹选择、邮件选择和已读状态管理等功能。

代码实现

@Entry
@Component
struct EmailClientPage {
  // 省略数据模型部分...

  build() {
    Column() {
      // 省略顶部标题栏...

      // 主内容区域
      RowSplit() {
        // 左侧导航区
        Column() {
          List() {
            ForEach(this.folders, (folder) => {
              ListItem() {
                Row() {
                  Row() {
                    Image($r('app.media.folder'))
                      .width(20)
                      .height(20)
                      .margin({ right: 8 })
                    Text(folder.name)
                      .fontSize(14)
                  }

                  Text(folder.count.toString())
                    .fontSize(12)
                    .backgroundColor('#E0E0E0')
                    .borderRadius(10)
                    .padding({ left: 6, right: 6, top: 2, bottom: 2 })
                }
                .width('100%')
                .justifyContent(FlexAlign.SpaceBetween)
                .padding({ left: 16, right: 16, top: 12, bottom: 12 })
                .borderRadius(4)
                .backgroundColor(this.currentFolder === folder.name ? '#E0E0E0' : 'transparent')
                .onClick(() => {
                  this.currentFolder = folder.name;
                  this.selectedEmail = -1;
                })
              }
            })
          }
          .width('100%')
        }
        .width('20%')
        .height('100%')
        .backgroundColor('#F5F5F5')

        // 中间邮件列表区
        Column() {
          List() {
            ForEach(this.emails, (email) => {
              ListItem() {
                Row() {
                  Column() {
                    Row() {
                      if (!email.read) {
                        Circle({ width: 8, height: 8 })
                          .fill('#0A59F7')
                          .margin({ right: 8 })
                      }
                      Text(email.sender)
                        .fontSize(14)
                        .fontWeight(email.read ? FontWeight.Normal : FontWeight.Bold)
                      Blank()
                      Text(email.time)
                        .fontSize(12)
                        .fontColor('#666666')
                    }.width('100%')

                    Text(email.subject)
                      .fontSize(14)
                      .fontWeight(email.read ? FontWeight.Normal : FontWeight.Bold)
                      .margin({ top: 4 })

                    Text(email.preview)
                      .fontSize(12)
                      .fontColor('#666666')
                      .margin({ top: 4 })
                      .maxLines(1)
                      .textOverflow({ overflow: TextOverflow.Ellipsis })
                  }
                  .width('100%')
                }
                .width('100%')
                .padding(16)
                .borderRadius(4)
                .backgroundColor(this.selectedEmail === email.id ? '#E0E0E0' : 'transparent')
                .onClick(() => {
                  this.selectedEmail = email.id;
                  // 标记为已读
                  let index = this.emails.findIndex(e => e.id === email.id);
                  if (index >= 0) {
                    this.emails[index].read = true;
                  }
                })
              }
              .borderBottom({ width: 1, color: '#E0E0E0' })
            })
          }
          .width('100%')
        }
        .width('50%')
        .height('100%')
        .backgroundColor('#F8F8F8')

        // 右侧邮件内容区
        this.EmailContent()
      }
      .width('100%')
      .height('calc(100% - 50px)')
      .resizeable(true)
      .divider({
        strokeWidth: 4,
        color: '#0A59F7',
        startMargin: 0,
        endMargin: 0
      })
      .minSizes([200, 400])
    }
  }
}

代码详解

文件夹选择功能

1. 点击事件处理

   • 使用onClick事件处理器监听文件夹点击
   • 更新currentFolder状态变量
   • 重置selectedEmail状态

2. 选中状态显示

   • 根据currentFolder状态设置背景色
   • 使用三元运算符实现动态样式

邮件选择功能

1. 邮件列表渲染

   • 使用List和ForEach遍历邮件数据
   • 实现邮件预览信息的布局

2. 已读状态管理

   • 点击邮件时更新selectedEmail状态
   • 将对应邮件标记为已读状态
   • 根据read状态显示不同的字体样式

RowSplit布局

1. 区域划分

   • 使用RowSplit实现左中右三栏布局
   • 设置合适的宽度比例

2. 分隔条配置

   • 启用resizeable属性实现可拖动
   • 设置分隔条样式和最小尺寸

总结

本教程介绍了邮件客户端交互功能的实现，包括：

1. 文件夹和邮件的选择功能
2. 邮件已读状态的管理
3. 可调整的三栏布局

通过这些交互功能的实现，我们为用户提供了良好的邮件管理体验。