鸿蒙5开发实战：ArkUI布局三剑客Flex/Grid/List深度解析

暗雨OL

发布于 2025-6-30 01:48

浏览

0收藏

鸿蒙5的ArkUI框架提供了强大的布局能力，其中Flex、Grid和List是三种最常用的布局组件，被开发者亲切地称为"布局三剑客"。本文将结合ArkCompiler开发工具，通过实战代码演示这三种布局的使用方法。

一、Flex弹性布局
Flex布局是ArkUI中最灵活的布局方式，特别适合需要动态调整子组件排列的场景。

// Flex布局示例
@Entry
@Component
struct FlexExample {
build() {
Column() {
Text(‘Flex弹性布局示例’).fontSize(20).margin(10)

  // 水平排列，子项自动换行
  Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
    ForEach([1, 2, 3, 4, 5, 6], (item) => {
      Text(`Item ${item}`)
        .width(100)
        .height(100)
        .backgroundColor(Color.Orange)
        .margin(5)
        .textAlign(TextAlign.Center)
    })
  }
  .width('100%')
  .padding(10)
  
  // 垂直排列，两端对齐
  Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween }) {
    Text('顶部').fontSize(16).backgroundColor(Color.Pink).padding(10)
    Text('中间').fontSize(16).backgroundColor(Color.Pink).padding(10)
    Text('底部').fontSize(16).backgroundColor(Color.Pink).padding(10)
  }
  .height(200)
  .margin(10)
  .border({ width: 1, color: Color.Gray })
}
.width('100%')
.alignItems(HorizontalAlign.Center)

}
}
二、Grid网格布局
Grid布局适合需要规整排列的场景，如相册、商品展示等。

// Grid布局示例
@Entry
@Component
struct GridExample {
private data: string[] = [‘美食’, ‘旅行’, ‘摄影’, ‘科技’, ‘体育’, ‘音乐’, ‘电影’, ‘阅读’]

build() {
Column() {
Text(‘Grid网格布局示例’).fontSize(20).margin(10)

  // 2列网格布局
  Grid() {
    ForEach(this.data, (item) => {
      GridItem() {
        Column() {
          Image($r('app.media.icon'))
            .width(50)
            .height(50)
            .margin(5)
          Text(item)
            .fontSize(16)
            .margin({ bottom: 5 })
        }
        .width('100%')
        .height(120)
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
        .backgroundColor(0xF5F5F5)
        .borderRadius(10)
      }
    })
  }
  .columnsTemplate('1fr 1fr') // 两列等宽
  .rowsTemplate('120px 120px 120px 120px') // 四行固定高度
  .columnsGap(10)
  .rowsGap(10)
  .width('90%')
  .margin(10)
}
.width('100%')
.alignItems(HorizontalAlign.Center)

}
}
三、List列表布局
List是展示长列表数据的最佳选择，支持高性能滚动和复用。

// List布局示例
@Entry
@Component
struct ListExample {
private data: { id: number, name: string, desc: string }[] = [
{ id: 1, name: ‘微信’, desc: ‘超过10亿人使用的社交应用’ },
{ id: 2, name: ‘支付宝’, desc: ‘领先的第三方支付平台’ },
{ id: 3, name: ‘抖音’, desc: ‘记录美好生活的短视频平台’ },
{ id: 4, name: ‘淘宝’, desc: ‘随时随地，想淘就淘’ },
{ id: 5, name: ‘高德地图’, desc: ‘专业手机地图，出行导航必备’ },
{ id: 6, name: ‘美团’, desc: ‘吃喝玩乐全都有’ },
{ id: 7, name: ‘京东’, desc: ‘多快好省，购物上京东’ },
{ id: 8, name: ‘百度’, desc: ‘全球最大的中文搜索引擎’ }
]

build() {
Column() {
Text(‘List列表布局示例’).fontSize(20).margin(10)

  // 基础列表
  List({ space: 10 }) {
    ForEach(this.data, (item) => {
      ListItem() {
        Row() {
          Image($r('app.media.icon'))
            .width(40)
            .height(40)
            .margin(10)
          
          Column() {
            Text(item.name).fontSize(18)
            Text(item.desc).fontSize(14).opacity(0.6)
          }
          .alignItems(HorizontalAlign.Start)
          .margin({ right: 10 })
        }
        .width('100%')
        .height(80)
        .backgroundColor(Color.White)
        .borderRadius(8)
        .shadow({ radius: 2, color: Color.Gray, offsetX: 1, offsetY: 1 })
      }
    })
  }
  .width('90%')
  .height('80%')
  .margin(10)
}
.width('100%')
.alignItems(HorizontalAlign.Center)

}
}
三剑客组合实战
在实际开发中，我们经常需要组合使用这三种布局：

@Entry
@Component
struct CombinedExample {
private categories = [
{ name: ‘热门推荐’, items: [‘限时秒杀’, ‘新品首发’, ‘爆款特卖’] },
{ name: ‘数码家电’, items: [‘手机’, ‘电脑’, ‘智能家居’] },
{ name: ‘服饰鞋包’, items: [‘男装’, ‘女装’, ‘箱包’] }
]

build() {
Column() {
// 顶部导航 - Flex布局
Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
Image($r(‘app.media.logo’)).width(100).height(40)
Row() {
Image($r(‘app.media.search’)).width(20).height(20).margin(10)
Image($r(‘app.media.cart’)).width(20).height(20).margin(10)
}
}
.width(‘100%’)
.padding(10)
.backgroundColor(‘#FF5722’)

  // 主体内容 - List包含Grid
  List() {
    ForEach(this.categories, (category) => {
      ListItem() {
        Column() {
          // 分类标题
          Text(category.name)
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
            .margin({ top: 15, bottom: 10, left: 15 })
            .alignSelf(HorizontalAlign.Start)
          
          // 分类内容 - Grid布局
          Grid() {
            ForEach(category.items, (item) => {
              GridItem() {
                Column() {
                  Image($r('app.media.icon'))
                    .width(40)
                    .height(40)
                    .margin(5)
                  Text(item)
                    .fontSize(14)
                    .margin({ bottom: 5 })
                }
                .width('100%')
                .height(120)
                .justifyContent(FlexAlign.Center)
                .alignItems(HorizontalAlign.Center)
                .backgroundColor(0xF5F5F5)
                .borderRadius(10)
              }
            })
          }
          .columnsTemplate('1fr 1fr 1fr')
          .columnsGap(10)
          .rowsGap(10)
          .width('95%')
          .margin({ bottom: 15 })
        }
      }
    })
  }
  .width('100%')
  .layoutWeight(1)
}
.height('100%')

}
}
性能优化建议
List优化：对于超长列表，使用LazyForEach替代ForEach，并确保列表项高度固定
Grid优化：避免在GridItem中使用过于复杂的嵌套布局
Flex优化：合理使用justifyContent和alignItems减少嵌套层级
通用优化：为重复使用的组件添加@Reusable装饰器
总结
鸿蒙5的ArkUI布局系统通过Flex、Grid和List这"三剑客"的组合，能够应对绝大多数UI布局需求。Flex适合不规则排列，Grid适合规整的网格展示，List则擅长处理长列表数据。掌握这三种布局方式及其组合使用技巧，是成为高效鸿蒙开发者的关键一步。

分类

HarmonyOS

标签

HarmonyOS5