鸿蒙ArkUI开发:常用布局【交叉轴】

交叉轴
  1. 垂直于主轴方向的轴线。Row容器交叉轴为纵向,Column容器交叉轴为横向。
  2. 通过alignItems属性设置子元素在交叉轴(排列方向的垂直方向)上的对齐方式
  3. alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式,其优先级高于alignItems属性,如果设置了alignSelf属性,则在单个子元素上会覆盖alignItems属性
  4. 开发前请熟悉鸿蒙开发指导文档:gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。
Column容器内子元素在水平方向上的排列
typescript
复制代码
Column() {
...
}.alignItems(HorizontalAlign.Start)

image.png

  1. HorizontalAlign.Start:子元素在水平方向左对齐
  2. HorizontalAlign.Center:子元素在水平方向居中对齐
  3. HorizontalAlign.End:子元素在水平方向右对齐。
Row容器内子元素在垂直方向上的排列
typescript
复制代码
Row() {
...
}.alignItems(VerticalAlign.Top)

image.png

  1. VerticalAlign.Top:子元素在垂直方向顶部对齐
  2. VerticalAlign.Center:子元素在垂直方向居中对齐
  3. VerticalAlign.Bottom:子元素在垂直方向底部对齐

层叠布局(Stack)

  1. 层叠布局主要用于实现基于Z轴的布局,容器中的子元素(子组件)依次入栈,后一个子元素覆盖前一个子元素,子元素可以叠加,也可以通过zIndex设置位置
  2. 可以通过[alignContent参数]实现位置的相对移动
typescript
复制代码
Stack({ alignContent: Alignment.BottomStart })

搜狗高速浏览器截图20240326151450.png

image.png

弹性布局(Flex)

  1. Row和Column容器只支持单方向的布局。你可以把Flex理解为它俩的升级版,能更灵活的控制布局方向和子元素布局。
  2. 可以设置布局方向,是否自动换行等

鸿蒙开发岗位需要掌握那些核心要领?

目前还有很多小伙伴不知道要学习哪些鸿蒙技术?不知道重点掌握哪些?为了避免学习时频繁踩坑,最终浪费大量时间的。

自己学习时必须要有一份实用的鸿蒙(Harmony NEXT)资料非常有必要。 这里我推荐,根据鸿蒙开发官网梳理与华为内部人员的分享总结出的开发文档。内容包含了:【ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。

废话就不多说了,接下来好好看下这份资料。

如果你是一名Android、Java、前端等等开发人员,想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习鸿蒙OpenHarmony知识←前往。下面是鸿蒙开发的学习路线图。

针对鸿蒙成长路线打造的鸿蒙学习文档。鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开发入门教学视频,帮助大家在技术的道路上更进一步。

其中内容包含:

《鸿蒙开发基础》鸿蒙OpenHarmony知识←前往

  1. ArkTS语言
  2. 安装DevEco Studio
  3. 运用你的第一个ArkTS应用
  4. ArkUI声明式UI开发
  5. .……

《鸿蒙开发进阶》鸿蒙OpenHarmony知识←前往

  1. Stage模型入门
  2. 网络管理
  3. 数据管理
  4. 电话服务
  5. 分布式应用开发
  6. 通知与窗口管理
  7. 多媒体技术
  8. 安全技能
  9. 任务管理
  10. WebGL
  11. 国际化开发
  12. 应用测试
  13. DFX面向未来设计
  14. 鸿蒙系统移植和裁剪定制
  15. ……

《鸿蒙开发实战》鸿蒙OpenHarmony知识←前往

  1. ArkTS实践
  2. UIAbility应用
  3. 网络案例
  4. ……

最后

鸿蒙是完全具备无与伦比的机遇和潜力的;预计到年底将有 5,000 款的应用完成原生鸿蒙开发,这么多的应用需要开发,也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长,学习鸿蒙势在必行!

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-14 06:04:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-14 06:04:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-05-14 06:04:02       82 阅读
  4. Python语言-面向对象

    2024-05-14 06:04:02       91 阅读

热门阅读

  1. 喜马拉雅xm音频解码

    2024-05-14 06:04:02       33 阅读
  2. TCP传输的三次握手四次挥手策略

    2024-05-14 06:04:02       27 阅读
  3. 机器学习概念:几种常见的距离参数概念和应用

    2024-05-14 06:04:02       21 阅读
  4. 多线程中的单例模式

    2024-05-14 06:04:02       26 阅读
  5. 网络层相关协议

    2024-05-14 06:04:02       25 阅读
  6. 微信小程序、uniapp密码小眼睛

    2024-05-14 06:04:02       29 阅读
  7. springboot 开启缓存 @EnableCaching(使用redis)

    2024-05-14 06:04:02       33 阅读
  8. 蓝桥杯备战20.有奖问答_动态规划

    2024-05-14 06:04:02       33 阅读
  9. 【经验分享】SFTP使用指南

    2024-05-14 06:04:02       28 阅读
  10. 云原生周刊:Kubernetes Grafana 看板更新 | 2024.5.13

    2024-05-14 06:04:02       32 阅读
  11. C++ QT设计模式:迭代器模式

    2024-05-14 06:04:02       33 阅读