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

个人主页→VON

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

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

前言

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

知识点概述

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

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

justifyContent(水平主轴对齐)

html 复制代码
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(垂直主轴对齐)

html 复制代码
FlexLayout {
    flexDirection: 'row',
    width: 'match_parent',
    height: 'match_parent',
    justifyContent: 'center',
    content: [
        // 子元素
    ]
}
  • alignItems 属性用于控制子元素在 FlexLayout 交叉轴(与主轴垂直的方向)上的对齐方式。
  • 常见取值:
    • flex-start:子元素向交叉轴起始位置对齐。
    • flex-end:子元素向交叉轴末尾位置对齐。
    • center:子元素在交叉轴上居中对齐。
    • stretch:默认值,子元素沿着交叉轴拉伸。
    • baseline:子元素以基线对齐。

界面效果展示

代码展示

html 复制代码
@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')
  }
}
相关推荐
DKPT3 小时前
Java桥接模式实现方式与测试方法
java·笔记·学习·设计模式·桥接模式
好好研究6 小时前
学习栈和队列的插入和删除操作
数据结构·学习
新中地GIS开发老师7 小时前
新发布:26考研院校和专业大纲
学习·考研·arcgis·大学生·遥感·gis开发·地理信息科学
SH11HF7 小时前
小菜狗的云计算之旅,学习了解rsync+sersync实现数据实时同步(详细操作步骤)
学习·云计算
Frank学习路上7 小时前
【IOS】XCode创建firstapp并运行(成为IOS开发者)
开发语言·学习·ios·cocoa·xcode
Chef_Chen9 小时前
从0开始学习计算机视觉--Day07--神经网络
神经网络·学习·计算机视觉
coder_pig9 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
simple丶10 小时前
【HarmonyOS】鸿蒙蓝牙连接与通信技术
harmonyos·arkts·arkui
X_StarX11 小时前
【Unity笔记02】订阅事件-自动开门
笔记·学习·unity·游戏引擎·游戏开发·大学生
MingYue_SSS11 小时前
开关电源抄板学习
经验分享·笔记·嵌入式硬件·学习