鸿蒙 ArkUI 框架中List、Row、Column 和 Flex 的区别是什么?

鸿蒙 ArkUI 框架中,List、Row、Column 和 Flex 是常见的布局组件,每个都有不同的使用场景和特性。下面是它们的区别和适用场景的详细解析:


1. List(列表)

特点

• List 组件用于创建 可滚动的垂直或水平列表

性能优化 :支持 LazyForEach 进行按需加载,提高列表渲染效率。

适合大数据列表,不会一次性渲染所有子项,而是随着滚动动态创建和回收。

• 可自定义 分隔线、滑动方向、懒加载、动画 等。

使用场景

✅ 适用于 联系人列表、新闻列表、聊天记录、商品列表 等大数据列表的展示。

示例

scss 复制代码
@Entry
@Component
struct UserList {
  private users: { name: string; age: number }[] = [    { name: "张三", age: 25 },    { name: "李四", age: 30 },    { name: "王五", age: 22 }  ];

  build() {
    List() {
      ForEach(this.users, (user) => {
        ListItem() {
          Text(user.name + "(" + user.age + "岁)")
            .fontSize(18)
            .padding(10)
        }
      })
    }
    .height('100%') // 让列表充满父容器
  }
}

🔹 核心点 :List 适用于 动态数据展示,并通过 ForEach 渲染数据,提高性能。


2. Row(横向布局)

特点

• Row 组件用于 水平排列子组件

• 子组件默认 从左到右排列,但可使用 alignItems 进行调整。

• 适合 横向菜单、头像 + 文字组合、按钮组 等场景。

使用场景

✅ 适用于 导航栏、工具栏、按钮组、横向信息展示(如 头像 + 昵称)

示例

scss 复制代码
@Entry
@Component
struct UserProfile {
  build() {
    Row() {
      Image($r('app.media.avatar'))
        .width(50)
        .height(50)
        .borderRadius(25) // 圆形头像
        .margin(10)
      
      Column() {
        Text("张三")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
        Text("鸿蒙开发工程师")
          .fontSize(14)
          .opacity(0.6)
      }
    }
    .alignItems(VerticalAlign.Center) // 垂直居中
  }
}

🔹 核心点 :Row 适用于 小型横向布局 ,如 图文组合、按钮排列


3. Column(纵向布局)

特点

• Column 组件用于 垂直排列子组件

• 子组件默认 从上到下排列,可使用 alignItems 进行调整。

• 适用于 页面布局、卡片内容、表单输入框等场景

使用场景

✅ 适用于 卡片布局、表单、对话框、垂直内容排布(如 个人信息展示)

示例

scss 复制代码
@Entry
@Component
struct UserCard {
  build() {
    Column() {
      Text("张三")
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .padding(10)
      
      Text("鸿蒙开发工程师,专注于 ArkUI 开发")
        .fontSize(16)
        .padding(10)
      
      Button("关注")
        .backgroundColor(Color.Blue)
        .fontSize(16)
        .width(100)
        .height(40)
        .borderRadius(10)
        .margin(10)
    }
    .padding(20)
    .backgroundColor(Color.White)
    .borderRadius(10)
    .shadow(10) // 添加阴影
  }
}

🔹 核心点 :Column 适用于 垂直内容排列 ,比如 表单、用户卡片、文本展示


4. Flex(弹性布局)

特点

• Flex 是一个更灵活 的布局组件,允许子组件在 横向(Row)或纵向(Column) 自适应排列。

• 支持 自动换行 ,可以动态调整子组件的 间距、对齐方式

• 适用于 复杂布局(如 网格布局、响应式 UI)

使用场景

✅ 适用于 动态网格布局、响应式 UI、自动换行的按钮组或标签组

示例

scss 复制代码
@Entry
@Component
struct TagGroup {
  private tags: string[] = ["鸿蒙", "ArkUI", "开发", "前端", "后端", "跨平台"];

  build() {
    Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
      ForEach(this.tags, (tag) => {
        Text(tag)
          .fontSize(16)
          .padding(10)
          .backgroundColor(Color.Gray)
          .borderRadius(10)
          .margin(5)
      })
    }
  }
}

🔹 核心点 :Flex 适用于 网格布局、标签组、响应式 UI,自动换行和自适应布局。


对比总结

组件 作用 适用场景 主要特性
List 可滚动的垂直/水平列表 聊天列表、商品列表、大量数据展示 支持 LazyForEach 优化渲染
Row 横向布局 导航栏、头像 + 文字、按钮组 子组件 从左到右排列,可对齐
Column 纵向布局 表单、用户卡片、垂直文本展示 子组件 从上到下排列
Flex 弹性布局 自动换行、动态网格布局 可设置方向 & 自动适配

如何选择?

如果是滚动列表(如消息、商品)用 List

如果是横向排列的按钮、头像 + 文字用 Row

如果是纵向排列的表单、卡片用 Column

如果是动态标签组、网格布局用 Flex

如果你的 UI 需求较复杂,甚至可以 结合多个组件 使用,比如 List 里嵌套 Row 或 Column,以实现更加丰富的界面布局。

相关推荐
用户54574834177几秒前
HarmonyOS Next应用开发实战——底部弹框组件的实现(part1)
harmonyos
用户545748341772 分钟前
HarmonyOS Next应用开发实战——底部弹框组件的实现(part2)
harmonyos
用户545748341773 分钟前
HarmonyOS Next应用开发实战——多功能页面组件构建(part1)
harmonyos
用户545748341773 分钟前
HarmonyOS Next应用开发实战——多功能页面组件构建(part2)
harmonyos
星释13 分钟前
鸿蒙Flutter实战:18-组合而非替换,现有插件快速鸿蒙化
flutter·华为·harmonyos
90后的晨仔1 小时前
鸿蒙开发中的常见关键字简单总结
harmonyos
二流小码农1 小时前
鸿蒙开发:使用Ellipse绘制椭圆
android·ios·harmonyos
别说我什么都不会2 小时前
OpenHarmony解读之设备认证:sts协议-客户端发起start请求
物联网·嵌入式·harmonyos
聆听秋天的风2 小时前
HarmonyOS NEXT练习:跑马灯
harmonyos
二流小码农2 小时前
鸿蒙开发:使用Circle绘制圆形
android·ios·harmonyos