【HarmonyOS NEXT星河版开发学习】小型测试案例04-个人中心顶部导航

个人主页→VON

收录专栏→鸿蒙开发小型案例总结​​​​​

基础语法部分会发布于github 和 gitee上面（暂未发布）

 前言

主轴对齐方式在鸿蒙开发中非常重要，通过合理选择 justifyContent 和 alignItems 属性，开发者可以精确控制 FlexLayout 或其他布局容器中子元素的排列和对齐方式，以实现灵活、美观且适应性强的用户界面设计。

 知识点概述

在鸿蒙（HarmonyOS）开发中，主轴对齐方式通常用于指定在 FlexLayout 或者类似的布局容器中，子元素沿着主轴（FlexLayout 中的行或列）的对齐方式。这些对齐方式可以帮助开发者精确控制子元素在布局容器中的位置和排列方式，以实现更灵活和美观的界面设计。

主轴对齐方式的常见选项：

justifyContent（水平主轴对齐）：

FlexLayout {
    flexDirection: 'row',
    width: 'match_parent',
    height: 'match_parent',
    justifyContent: 'center',
    content: [
        // 子元素
    ]
}

• justifyContent 属性用于控制子元素在 FlexLayout 主轴方向上的对齐方式。
• 常见取值：
  • flex-start：子元素向主轴起始位置对齐。
  • flex-end：子元素向主轴末尾位置对齐。
  • center：子元素在主轴上居中对齐。
  • space-between：子元素在主轴上平均分布，首尾没有空隙。
  • space-around：子元素在主轴上平均分布，首尾有空隙。
  • space-evenly：子元素在主轴上平均分布，包括首尾和子元素之间的空隙都相等。

alignItems（垂直主轴对齐）：

FlexLayout {
    flexDirection: 'row',
    width: 'match_parent',
    height: 'match_parent',
    justifyContent: 'center',
    content: [
        // 子元素
    ]
}

• alignItems 属性用于控制子元素在 FlexLayout 交叉轴（与主轴垂直的方向）上的对齐方式。
• 常见取值：
  • flex-start：子元素向交叉轴起始位置对齐。
  • flex-end：子元素向交叉轴末尾位置对齐。
  • center：子元素在交叉轴上居中对齐。
  • stretch：默认值，子元素沿着交叉轴拉伸。
  • baseline：子元素以基线对齐。

界面效果展示

代码展示

@Entry
@Component
struct Index {
  build() {
    Column(){
      Row(){
        Image($r('app.media.ic_public_arrow_left'))
          .width(30)
        Text('个人中心')
        Image($r('app.media.ic_gallery_photoedit_more'))
          .width(30)
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
      .height(40)
      .backgroundColor(Color.White)
      .padding({
        left:10,
        right:10
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ccc')
  }
}