当前位置: 首页 > news >正文

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

ArkUI中常用布局容器

线性布局(Row/Column)

  1. 线性布局的子元素在线性方向上(水平方向和垂直方向)依次排列
  2. 线性布局容器包括[Row]和[Column]。Column容器内子元素按照垂直方向排列,Row容器内子元素按照水平方向排列
  3. 开发前请熟悉鸿蒙开发指导文档:gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。
主轴
  1. 线性布局容器在布局方向上的轴线,子元素默认沿主轴排列。
  2. Row容器主轴为横向,Column容器主轴为纵向。通过justifyContent属性设置子元素在容器主轴上的排列方式
  3. 默认相邻子元素是紧贴着的,也可以通过space设置子元素间的间距
Column容器内子元素在主轴上的排列

主轴方向:垂直向下

typescript
复制代码
Column() {
...
}.justifyContent(FlexAlign.Start)

image.png

  1. justifyContent(FlexAlign.Start):元素在主轴方向首端对齐,第一个元素与行首对齐,同时后续的元素与前一个对齐
  2. justifyContent(FlexAlign.Center):元素在主轴方向中心对齐,第一个元素与行首的距离与最后一个元素与行尾距离相同
  3. justifyContent(FlexAlign.End):元素在主轴方向尾部对齐,最后一个元素与行尾对齐,其他元素与后一个对齐
  4. justifyContent(FlexAlign.Spacebetween):主轴方向均匀分配元素,相邻元素之间距离相同。第一个元素与行首对齐,最后一个元素与行尾对齐
  5. justifyContent(FlexAlign.SpaceAround):主轴方向均匀分配元素,相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半
  6. justifyContent(FlexAlign.SpaceEvenly):主轴方向均匀分配元素,相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样
Row容器内子元素在主轴上的排列

主轴方向:水平向右

typescript
复制代码
Row() {
...
}.justifyContent(FlexAlign.Start)`HarmonyOS与OpenHarmony鸿蒙文档籽料:mau123789是v直接拿`

搜狗高速浏览器截图20240326151547.png
image.png

  1. justifyContent(FlexAlign.Start):元素在主轴方向首端对齐,第一个元素与行首对齐,同时后续的元素与前一个对齐
  2. justifyContent(FlexAlign.Center):元素在主轴方向中心对齐,第一个元素与行首的距离与最后一个元素与行尾距离相同
  3. justifyContent(FlexAlign.End):元素在主轴方向尾部对齐,最后一个元素与行尾对齐,其他元素与后一个对齐
  4. justifyContent(FlexAlign.Spacebetween):主轴方向均匀分配元素,相邻元素之间距离相同。第一个元素与行首对齐,最后一个元素与行尾对齐
  5. justifyContent(FlexAlign.SpaceAround):主轴方向均匀分配元素,相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半
  6. justifyContent(FlexAlign.SpaceEvenly):主轴方向均匀分配元素,相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样
http://www.lryc.cn/news/348259.html

相关文章:

  • Spring Security 入门 2
  • C++初阶学习第七弹——探索STL奥秘(二)——string的模拟实现
  • 5.nginx常用命令和日志定时切割
  • Redis-详解(基础)
  • 记录minio的bug(Object name contains unsupported characters.)
  • 【嵌入式开发 Linux 常用命令系列 7.6 -- sed 替换指定字符串】
  • C++语言的字符数组
  • 24届电信红队实习生面经
  • linux下使用jexus部署aspnet站点
  • 代码随想录训练营Day 27|理论基础、力扣 77. 组合
  • Spring框架深度解析:打造你的Java应用梦工厂
  • Python 正则表达式(一)
  • Cocos Creator 3.8.x报错:5302
  • 网页如何集成各社区征文活动
  • 【知识碎片】2024_05_13
  • Day53代码随想录动态规划part13:300.最长递增子序列、674. 最长连续递增序列、718. 最长重复子数组
  • 自己动手为wordpress注册一个Carousel轮播区块
  • 基于Springboot的实习生管理系统(有报告)。Javaee项目,springboot项目。
  • 良心实用的电脑桌面便利贴,好用的便利贴便签小工具
  • Eayswoole 报错 crontab info is abnormal
  • 移动 App 入侵与逆向破解技术-iOS 篇
  • 2024服贸会,参展企业媒体宣传报道攻略
  • CI/CD笔记.Gitlab系列.新用户管理
  • 前端 JS 经典:JS 基础类型和 typeof
  • Java入门基础学习笔记11——关键字和标识符
  • 设计模式-解释器模式(Interpreter)
  • 机器视觉任务中语义分割方法的进化历史
  • Java并发编程: Synchronized锁升级
  • Atcoder C - Routing
  • 升级! 测试萌新Python学习之连通数据库Pymsql增删改及封装(四)