鸿蒙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):主轴方向均匀分配元素,相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/622382.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vc小程序源码:利用opencv 实现九宫格切图

#include "stdafx.h" #include<opencv2/opencv.hpp> using namespace std; using namespace cv;int main() {Mat src imread("福利.png");if (src.empty()){cout << "No Image!" << endl;system("pause");return -…

PCIE协议-2-事务层规范-Completion Rules

2.2.9 完成规则 所有Read、Non-Posted Write和AtomicOp请求都需要完成&#xff08;Completion&#xff09;。完成包含一个完成头标&#xff0c;对于某些类型的完成&#xff0c;完成头标之后会跟随一定数量的DWs数据。完成头标的每个字段的规则在以下各节中定义。 完成通过ID路…

C# WinForm —— 18 NumericUpDown 介绍

1. 简介 数字显示框&#xff0c;通过向上、向下按钮来 增加/减小 显示的数值 2. 常用属性 属性解释(Name)控件ID&#xff0c;在代码里引用的时候会用到,一般以 numUD 开头Hexadecimal数值 up-down 控件的值是否应以十六进制显示Increment每单击一下按钮&#xff0c;增加或减…

孙宇晨对话大公网:香港Web3政策友好环境示范意义重大

日前,全球知名华文媒体大公网发布《湾区web3大有可为》重磅系列报道。报道通过对中国香港与大湾区其他城市Web3政策、行业创新和生态建设等方面的梳理,以及对行业领袖和重要行业机构的走访,全面展现了在大湾区一体化发展的背景下,Web3等数字经济模式在该地区的长远发展潜力。 …

ABB机器人程序类型介绍

ABB机器人编程语言为rapid语言&#xff0c;在例行程序中可分为三类&#xff1a;普通程序、功能程序和中断程序。例如新建一个例行程序&#xff0c;会选择一个程序类型&#xff0c;三种类型的区别如下&#xff1a; 1、普通程序&#xff08;procedures&#xff09;&#xff1a;常…

移动 App 入侵与逆向破解技术-iOS 篇

如果您有耐心看完这篇文章&#xff0c;您将懂得如何着手进行app的分析、追踪、注入等实用的破解技术&#xff0c;另外&#xff0c;通过“入侵”&#xff0c;将帮助您理解如何规避常见的安全漏洞&#xff0c;文章大纲&#xff1a; 简单介绍ios二进制文件结构与入侵的原理介绍入…

HUE工具介绍使用

一、HUE工具介绍使用 HUE是CDH提供一个hive和hdfs的操作工具&#xff0c;在hue中编写了hiveSQl也可以操作hdfs的文件 http://hadoop01:9870 hdfs的web访问端口 hdfs://hadoop01:8020 hdfs的程序访问端口 进入hue

基于SpringBoot的垃圾分类网站的设计与实现

一、引言 随着网络不断的普及发展&#xff0c;垃圾分类网站依靠网络技术的支持得到了快速的发展&#xff0c;首先要从用户的实际需求出发&#xff0c;通过了解用户的需求开发出具有针对性的垃圾分类、垃圾图谱等功能&#xff0c;利用目前网络给用户带来的方便快捷这一特点对系统…

springboot+vue+mybatis生活废品回收系统+PPT+论文+讲解+售后

该生活废品回收系统采用B/S架构、前后端分离以及MVC模型进行设计&#xff0c;并采用java语言以及springboot框架进行开发。该系统主要设计并完成了管理过程中的用户登录、个人信息修改、义捐活动、在线咨询、订单评价、废品订单、废品、回收再利用技巧、废品回收员、用户等功能…

MyBatis——模拟MyBatis框架

一、dom4j 解析 XML 文件 在 dom4j 中&#xff0c;DOMReader 和 SAXReader 是两种不同的 XML 解析器。 它们的主要区别在于解析 XML 的方式和所提供的功能&#xff1a; DOMReader&#xff1a; DOMReader 使用 DOM&#xff08;Document Object Model&#xff09;模型来表示整个…

基于MetaGPT的智能体理论与实践-Task01

Task01: MetaGPT环境配置 学习教程&#xff1a;https://github.com/datawhalechina/hugging-multi-agent 1 环境准备 1.1 安装python3.9 通过&#xff1a;python3 --version, 查看此python版本为3.10.3 1.2 下载MetaGPT 开始&#xff0c;借用清华镜像&#xff0c;拉取…

CSS常用滤镜效果

CSS 提供了多种滤镜效果&#xff0c;可以通过 filter 属性应用于 HTML 元素。以下是一些常用的 CSS 滤镜效果&#xff1a; 一、灰度 (Grayscale) 将图像转换为灰度图像。值在 0%&#xff08;原始图像&#xff09;和 100%&#xff08;完全灰度&#xff09;之间。 filter: gra…

ORA-609频繁出现在alert.log,如何解决?

ORA-609就alertlog中比较常见的一个报错&#xff0c;虽然并没有太大的影响&#xff0c;但是频繁的出现在alert log也是很让人厌烦的事情&#xff0c;本文介绍如何排查解决ORA-609问题。 1.ORA-609官方定义 could not attach to incoming connection Cause Oracle process cou…

【话题】Agent AI智能体的未来

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读小5的系列文章&#xff0c;这是《话题》系列文章 目录 背景一、Agent AI智能体的角色二、Agent AI智能体的发展路径三、Agent AI智能体可能带来的挑战文章推荐 背景 随着Agent AI智能体的智能化水平不断提高&#xff0c;它们…

centos7.6安装mysql

博客主页&#xff1a;花果山~程序猿-CSDN博客 文章分栏&#xff1a;MySQL之旅_花果山~程序猿的博客-CSDN博客 关注我一起学习&#xff0c;一起进步&#xff0c;一起探索编程的无限可能吧&#xff01;让我们一起努力&#xff0c;一起成长&#xff01; 目录 1.在网页中寻找mysql…

《一》Word文字编辑软件---架构设计分析

1&#xff0c;简单介绍 今天&#xff0c;我们来模拟offic软件中的word文档&#xff0c;运行如图&#xff1a; 运行程序后会出现主界面&#xff0c;顶端的菜单栏包括“文件”“编辑”“格式”“窗口”和“帮助五个主菜单。 菜单栏下面是工具栏&#xff0c;包含了系统常用的功能按…

深入理解C#中的IO操作:File类的详解

文章目录 一、File类的概述二、File类的常用方法2.1 File.Exists(string path)2.2 File.Create(string path)2.3 File.WriteAllText(string path, string contents)2.4 File.ReadAllText(string path)2.5 File.Copy(string sourceFilePath, string destFilePath, bool overwrit…

ONVIF系列一:ONVIF介绍

感谢博主OceanStar的学习笔记&#xff0c;ONVIF系列二和系列三中安装操作过程及代码实现参考了这位博主的博客。 ONVIF系列&#xff1a; ONVIF系列一&#xff1a;ONVIF介绍 ONVIF系列二&#xff1a;Ubuntu安装gSOAP、生成ONVIF代码框架 ONVIF系列三&#xff1a;ONVIF客户端实现…

【QT】QT环境搭建

本专栏内容为&#xff1a;QT学习专栏 通过本专栏的深入学习&#xff0c;你可以了解并掌握QT。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;QT &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库&#x1f69a; &#x1f339;&#x1f…

无刷电机中对霍尔同步电角度的理解

在霍尔无刷电机驱动时需要进行初始电角度定位&#xff0c;根据ST电机库提供的方法首先我们要测量同步电角度。 在自己的驱动程序中也使用了ST的方法来测量同步电角度&#xff0c;然后根据当前霍尔的状态再确定启动时的电角度 之前用上面的方法测量同步电角度&#xff0c;程序…