#跟着晓明学鸿蒙# HarmonyOS NEXT应用商店的应用列表网格实现

目录

• 案例介绍
• 代码实现
• 代码详解
• 1. 应用列表组件
• 2. 应用卡片样式
• 3. 评分显示
• 4. 文本处理
• 总结

案例介绍

本案例将重点介绍应用商店首页中推荐应用和热门游戏列表的网格布局实现。通过Flex组件的灵活布局能力，我们将创建包含应用信息和评分显示的卡片网格。

代码实现

@Entry
@Component
struct AppStoreHomePage {
  private recommendedApps: Array<{name: string, icon: string, developer: string, rating: number}> = [
    { name: '音乐播放器', icon: '/assets/app1.png', developer: '开发者A', rating: 4.8 },
    { name: '视频剪辑', icon: '/assets/app2.png', developer: '开发者B', rating: 4.6 },
    { name: '笔记本', icon: '/assets/app3.png', developer: '开发者C', rating: 4.9 },
    { name: '天气预报', icon: '/assets/app4.png', developer: '开发者D', rating: 4.7 },
    { name: '日历', icon: '/assets/app5.png', developer: '开发者E', rating: 4.5 },
    { name: '计算器', icon: '/assets/app6.png', developer: '开发者F', rating: 4.4 }
  ]

  @Builder
  AppGrid(title: string, apps: Array<{name: string, icon: string, developer: string, rating: number}>) {
    Flex({ direction: FlexDirection.Column }) {
      Text(title)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .margin({ left: 15, top: 15, bottom: 10 })
      
      Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Start }) {
        ForEach(apps, (app) => {
          Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
            Image(app.icon)
              .width(60)
              .height(60)
              .objectFit(ImageFit.Contain)
              .margin({ bottom: 5 })
            
            Text(app.name)
              .fontSize(14)
              .fontWeight(FontWeight.Medium)
              .fontColor('#333333')
              .margin({ bottom: 3 })
              .maxLines(1)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
            
            Text(app.developer)
              .fontSize(12)
              .fontColor('#666666')
              .margin({ bottom: 3 })
              .maxLines(1)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
            
            Flex({ alignItems: ItemAlign.Center }) {
              Text(app.rating.toFixed(1))
                .fontSize(12)
                .fontColor('#FF9500')
                .margin({ right: 5 })
              
              // 简化的星级评分
              Row() {
                ForEach([1, 2, 3, 4, 5], (star) => {
                  Image(star <= Math.floor(app.rating) ? '/assets/star_filled.png' : '/assets/star_empty.png')
                    .width(12)
                    .height(12)
                })
              }
            }
          }
          .width('45%')
          .padding(10)
          .backgroundColor(Color.White)
          .borderRadius(10)
          .margin({ bottom: 10, right: app.name === apps[apps.length - 1].name ? 0 : '5%' })
        })
      }
      .width('90%')
    }
    .width('100%')
    .alignItems(HorizontalAlign.Center)
    .margin({ bottom: 15 })
  }

  build() {
    Scroll() {
      Flex({ direction: FlexDirection.Column }) {
        // 推荐应用
        this.AppGrid('推荐应用', this.recommendedApps)
        
        // 热门游戏
        this.AppGrid('热门游戏', this.popularGames)
      }
    }
  }
}

代码详解

1. 应用列表组件

AppGrid组件的布局结构：

• 外层使用垂直方向的Flex布局组织标题和网格
• 网格区域使用wrap属性实现两列布局
• 每个应用卡片使用垂直方向的Flex布局
• 设置固定的宽度比例和间距

2. 应用卡片样式

应用卡片的样式设计：

• 宽度设置为45%实现两列布局
• 使用白色背景和圆角创建卡片效果
• 设置内边距和外边距确保间隔
• 图标、名称和开发者信息垂直排列

3. 评分显示

评分区域的实现：

• 使用水平方向的Flex布局组织评分和星级
• 评分数值使用橙色突出显示
• 通过ForEach循环创建星级图标
• 根据评分值显示实心或空心星星

4. 文本处理

文本内容的处理方式：

• 使用maxLines和textOverflow处理文本溢出
• 为不同类型的文本设置不同的字号和颜色
• 通过margin控制文本间距

总结

本案例展示了如何使用Flex组件实现应用商店的应用列表网格布局。通过合理的布局设计和样式处理，我们创建了既美观又实用的应用展示界面。两列布局的设计既确保了足够的信息展示空间，又保持了良好的视觉效果，而评分显示的实现则为用户提供了直观的应用质量参考。