目录

案例介绍

本篇文章将介绍如何使用FolderStack组件构建一个可折叠的菜单导航系统的基础结构。通过合理的数据结构设计和组件布局，实现一个清晰、易用的分组菜单导航界面。

代码实现

@Entry
@Component
struct FoldableNavigationMenu {
  // 菜单数据结构
  private menuData: Array<{
    groupName: string,
    groupIcon: Resource,
    expanded: boolean,
    items: Array<{
      name: string,
      icon: Resource,
      badge?: number
    }>
  }> = [
    {
      groupName: '个人中心',
      groupIcon: $r('app.media.ic_user'),
      expanded: true,
      items: [
        { name: '个人资料', icon: $r('app.media.ic_profile') },
        { name: '我的订单', icon: $r('app.media.ic_order'), badge: 2 },
        { name: '收货地址', icon: $r('app.media.ic_address') },
        { name: '账号安全', icon: $r('app.media.ic_security') }
      ]
    },
    {
      groupName: '消息通知',
      groupIcon: $r('app.media.ic_notification'),
      expanded: false,
      items: [
        { name: '系统通知', icon: $r('app.media.ic_system'), badge: 5 },
        { name: '活动消息', icon: $r('app.media.ic_activity') }
      ]
    }
  ];

  build() {
    Column() {
      // 应用标题
      Row() {
        Image($r('app.media.ic_app_logo'))
          .width(32)
          .height(32)
        
        Text('我的应用')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .margin({ left: 12 })
      }
      .width('100%')
      .padding(16)
      .height(64)

      // 分割线
      Divider()
        .opacity(0.2)
        .width('100%')

      // 菜单内容区域
      Scroll() {
        Column({ space: 8 }) {
          ForEach(this.menuData, (group, groupIndex) => {
            FolderStack({ initialExpand: group.expanded }) {
              // 分组标题
              FolderStackHeader() {
                Row() {
                  Image(group.groupIcon)
                    .width(24)
                    .height(24)
                  
                  Text(group.groupName)
                    .fontSize(16)
                    .fontWeight(FontWeight.Medium)
                    .margin({ left: 12 })
                }
                .width('100%')
                .padding({ left: 16, right: 16 })
              }
              
              // 分组内容 - 菜单项列表
              FolderStackContent() {
                Column() {
                  ForEach(group.items, (item) => {
                    Row() {
                      Image(item.icon)
                        .width(20)
                        .height(20)
                        .margin({ left: 12 })
                      
                      Text(item.name)
                        .fontSize(14)
                        .margin({ left: 16 })
                    }
                    .width('100%')
                    .height(48)
                    .padding({ left: 24 })
                  })
                }
                .width('100%')
                .backgroundColor('#FFFFFF')
              }
            }
            .width('100%')
            .borderRadius(8)
            .headerBackgroundColor('#FFFFFF')
            .contentBackgroundColor('#FFFFFF')
            .dividerColor('#EEEEEE')
          })
        }
        .width('100%')
        .padding({ top: 8, bottom: 16 })
      }
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
}

代码详解

1. 数据结构设计

private menuData: Array<{
  groupName: string,
  groupIcon: Resource,
  expanded: boolean,
  items: Array<{
    name: string,
    icon: Resource,
    badge?: number
  }>
}>

• 定义菜单组数据结构，包含组名、图标和展开状态
• 每个菜单组包含多个菜单项
• 菜单项包含名称、图标和可选的徽章数字

2. 页面布局结构

Column() {
  Row() { /* 应用标题 */ }
  Divider()
  Scroll() {
    Column({ space: 8 }) { /* 菜单内容 */ }
  }
}

• 使用Column作为页面根容器
• 顶部显示应用标题和Logo
• 中间使用分割线分隔
• 菜单内容区域支持滚动

3. 菜单组实现

FolderStack({ initialExpand: group.expanded }) {
  FolderStackHeader() { /* 分组标题 */ }
  FolderStackContent() { /* 菜单项列表 */ }
}

• 使用FolderStack组件创建可折叠的菜单组
• 标题区域显示组图标和名称
• 内容区域使用Column布局菜单项

4. 菜单项布局

Row() {
  Image(item.icon)
  Text(item.name)
}
.height(48)
.padding({ left: 24 })

• 使用Row组件水平排列图标和文本
• 统一的高度和内边距
• 合理的图标和文本间距

总结

本篇文章展示了如何构建可折叠菜单导航的基础结构，主要实现了：

• 清晰的数据结构设计
• 合理的页面布局
• 基础的菜单组件结构
• 统一的样式规范

这个基础实现为后续添加交互功能和样式优化提供了良好的基础。