鸿蒙 ArkUI 基础布局

鸿蒙 ArkUI 提供了灵活的 UI 组件和布局方式,支持声明式 UI 开发,使开发者能够快速构建界面。本教程介绍 ArkUI 的基础布局方式,包括 Flex、Row、Column、Grid 和 Stack 组件的使用。


1. ArkUI 布局基础

鸿蒙 ArkUI 使用 声明式 UI 进行布局,主要使用 Row(行)、Column(列)、Flex(弹性布局)、Grid(网格) 和 Stack(堆叠) 进行界面布局。

  • Row:水平排列子元素
  • Column:垂直排列子元素
  • Flex:弹性布局,支持自动伸缩
  • Grid:网格布局,适用于多列布局
  • Stack:堆叠布局,子组件可以相互覆盖

2. Row 与 Column

Row 组件用于创建 水平布局Column 组件用于 垂直布局

2.1 Row 示例(水平布局)

@Entry
@Component
struct RowExample {
  build() {
    Row() {
      Text("左边").backgroundColor(Color.Red).padding(10)
      Text("中间").backgroundColor(Color.Green).padding(10)
      Text("右边").backgroundColor(Color.Blue).padding(10)
    }.justifyContent(FlexAlign.SpaceBetween).height(50)
  }
}

说明

  • justifyContent(FlexAlign.SpaceBetween) 使得子组件均匀分布
  • height(50) 限制了 Row 的高度

2.2 Column 示例(垂直布局)

@Entry
@Component
struct ColumnExample {
  build() {
    Column() {
      Text("上").backgroundColor(Color.Red).padding(10)
      Text("中").backgroundColor(Color.Green).padding(10)
      Text("下").backgroundColor(Color.Blue).padding(10)
    }.alignItems(HorizontalAlign.Center).height(200)
  }
}

说明

  • alignItems(HorizontalAlign.Center) 让子元素居中
  • height(200) 让 Column 组件高度固定

3. Flex 弹性布局

Flex 是更高级的布局方式,支持 横向、纵向 布局,并能自动适配子元素。

@Entry
@Component
struct FlexExample {
  build() {
    Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround}) {
      Text("1").backgroundColor(Color.Red).padding(10)
      Text("2").backgroundColor(Color.Green).padding(10)
      Text("3").backgroundColor(Color.Blue).padding(10)
    }.height(50)
  }
}

说明

  • FlexDirection.Row 让子元素按行排列
  • justifyContent(FlexAlign.SpaceAround) 让子元素等间距排列

4. Grid 网格布局

Grid 用于 多列布局,适用于表格或网格结构。

@Entry
@Component
struct GridExample {
  build() {
    Grid({columns: 3}) {
      ForEach(["A", "B", "C", "D", "E", "F"], (item) => {
        Text(item).backgroundColor(Color.Gray).padding(10).margin(5)
      })
    }
  }
}

说明

  • columns: 3 表示网格有 3 列
  • ForEach 用于动态创建子元素

5. Stack 叠层布局

Stack 允许子元素 层叠 放置,适用于 覆盖效果

@Entry
@Component
struct StackExample {
  build() {
    Stack() {
      Image("background.png").width(200).height(200)
      Text("前景文字").fontSize(20).fontColor(Color.White).align(Alignment.Center)
    }.width(200).height(200)
  }
}

说明

  • Image 作为背景
  • Text 叠加在 Image 上方,并居中

6. 结论

本文介绍了鸿蒙 ArkUI 的 基础布局组件,包括 RowColumnFlexGridStack,这些组件可以组合使用,以适应不同的 UI 需求。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值