目录

案例介绍

本案例将实现一个应用商店首页的响应式布局基础结构，包括屏幕宽度适配和网格布局的计算逻辑。通过Flex组件的布局能力，我们将创建一个能够自适应不同屏幕尺寸的应用商店界面。

代码实现

@Entry
@Component
struct AppStoreHomePage {
  @State currentBannerIndex: number = 0
  @State screenWidth: number = 0
  
  // 计算每行显示的项目数
  private getItemsPerRow(): number {
    if (this.screenWidth <= 320) return 3
    if (this.screenWidth <= 520) return 4
    return 5
  }
  
  // 计算项目宽度
  private getItemWidth(): string {
    const itemsPerRow = this.getItemsPerRow()
    const gap = 10 // 项目之间的间距
    const totalGap = gap * (itemsPerRow - 1)
    const availableWidth = 100 - (totalGap / this.screenWidth * 100)
    return `${availableWidth / itemsPerRow}%`
  }
  
  // 模拟数据
  private banners: string[] = [
    '/assets/banner1.jpg',
    '/assets/banner2.jpg',
    '/assets/banner3.jpg'
  ]
  
  private categories: Array<{name: string, icon: string}> = [
    { name: '游戏', icon: '/assets/game.png' },
    { name: '社交', icon: '/assets/social.png' },
    { name: '工具', icon: '/assets/tools.png' },
    { name: '教育', icon: '/assets/education.png' },
    { name: '音乐', icon: '/assets/music.png' },
    { name: '视频', icon: '/assets/video.png' },
    { name: '购物', icon: '/assets/shopping.png' },
    { name: '健康', icon: '/assets/health.png' },
    { name: '美食', icon: '/assets/food.png' },
    { name: '旅行', icon: '/assets/travel.png' }
  ]
  
  aboutToAppear() {
    // 获取屏幕宽度
    this.screenWidth = px2vp(window.getWindowWidth())
  }

  build() {
    Scroll() {
      Flex({ direction: FlexDirection.Column }) {
        // 顶部搜索栏
        this.SearchBar()
        
        // 轮播广告
        this.BannerSwiper()
        
        // 分类快捷入口
        this.CategoryGrid()
        
        // 推荐应用
        this.AppGrid('推荐应用', this.recommendedApps)
        
        // 热门游戏
        this.AppGrid('热门游戏', this.popularGames)
      }
      .width('100%')
    }
    .width('100%')
    .height('100%')
    .scrollBar(BarState.Off)
    .backgroundColor('#F5F5F5')
  }
}

代码详解

1. 响应式布局设计

实现响应式布局的核心逻辑：

• 使用@State装饰器定义screenWidth跟踪屏幕宽度
• 在aboutToAppear生命周期中获取实际屏幕宽度
• 提供getItemsPerRow方法根据屏幕宽度计算列数
• 通过getItemWidth方法计算项目实际宽度

2. 网格计算逻辑

getItemWidth方法的计算过程：

• 根据屏幕宽度确定每行显示的项目数
• 考虑项目间距计算总间距
• 计算实际可用宽度
• 返回百分比形式的项目宽度

3. 页面结构设计

整体页面采用嵌套的布局结构：

• 使用Scroll组件实现内容滚动
• 主容器采用垂直方向的Flex布局
• 设置统一的宽度和背景色
• 隐藏滚动条优化视觉效果

4. 数据管理

使用私有属性管理静态数据：

• banners数组存储轮播图数据
• categories数组存储分类数据
• 使用TypeScript接口定义数据结构

总结

本案例展示了如何使用Flex组件实现应用商店首页的响应式布局框架。通过合理的屏幕宽度计算和网格布局设计，我们创建了一个能够自适应不同设备的界面结构。这种实现方式为后续添加具体的网格内容提供了可靠的基础。