第九讲_ArkUI线性布局（Row/Column）

ArkUI线性布局（Row/Column）

  • 1. 线性布局概述
  • 2. 线性容器Row
    • 2.1 子元素在主轴上的排列方式
    • 2.2 子元素在交叉轴上的对齐方式
  • 3. 线性容器Column
    • 3.1 子元素在主轴上的排列方式
    • 3.2 子元素在交叉轴上的对齐方式

1. 线性布局概述

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。

2. 线性容器Row

Row容器内子元素按照水平方向排列，通过 space 属性设置排列方向上子元素的间距。

@Entry
@Component
struct RowLayout {build() {Row({space: 20}) {Button("第一按钮")Button("第二按钮")Button("第三按钮")}}
}

在这里插入图片描述

2.1 子元素在主轴上的排列方式

在布局容器内，可以通过justifyContent属性设置子元素在容器主轴上的排列方式。Row容器的主轴是水平方向的。

  • FlexAlign.Start：子元素在水平方向首端对齐（默认值）
  • FlexAlign.Center：子元素在水平方向居中对齐
  • FlexAlign.End：子元素在水平方向尾部对齐
  • FlexAlign.SpaceBetween：子元素在水平方向均匀分配，第一个子元素与首端对齐、最后一个子元素与尾部对齐
  • FlexAlign.SpaceAround：子元素在水平方向相邻元素之间距离相同，第一个子元素到首端的距离和最后一个子元素到尾部的距离是相邻元素之间距离的一半
  • FlexAlign.SpaceEvenly：子元素在水平方向均匀分配，相邻元素之间的距离、第一个子元素与首端的距离和最后一个子元素到尾部的距离都完全一样
@Entry
@Component
struct RowLayout {build() {Row() {Button("第一按钮")Button("第二按钮")Button("第三按钮")}// 不设置Row容器宽，则Row容器的宽是子元素宽的总和.width("100%").justifyContent(FlexAlign.SpaceBetween)}
}

在这里插入图片描述

@Entry
@Component
struct RowLayout {build() {Row() {Button("第一按钮")Button("第二按钮")Button("第三按钮")}// 不设置Row容器宽，则Row容器的宽是子元素宽的总和.width("100%").justifyContent(FlexAlign.SpaceAround)}
}

在这里插入图片描述

@Entry
@Component
struct RowLayout {build() {Row() {Button("第一按钮")Button("第二按钮")Button("第三按钮")}// 不设置Row容器宽，则Row容器的宽是子元素宽的总和.width("100%").justifyContent(FlexAlign.SpaceEvenly)}
}

在这里插入图片描述

2.2 子元素在交叉轴上的对齐方式

交叉轴是垂直于主轴的，因为Row容器的主轴是水平方向的，所以Row容器的交叉轴是垂直方向的。

在布局容器内，可以通过alignItems属性设置子元素在容器交叉轴上的对齐方式。

  • VerticalAlign.Top：子元素在垂直方向顶部对齐
  • VerticalAlign.Center：子元素在垂直方向居中对齐
  • VerticalAlign.Bottom：子元素在垂直方向底部对齐
@Entry
@Component
struct RowLayout {build() {Row() {Button("第一按钮")Button("第二按钮")Button("第三按钮")}// 不设置Row容器宽，则Row容器的宽是子元素宽的总和.width("100%")// 不设置Row容器高，则Row容器的高等于子元素的高.height("100%").justifyContent(FlexAlign.SpaceEvenly).alignItems(VerticalAlign.Center)}
}

在这里插入图片描述

除了通过alignItems属性控制所有子元素在容器交叉轴上的对齐方式外，alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式，其优先级高于alignItems属性。

  • ItemAlign.Auto：使用默认值
  • ItemAlign.Start：交叉轴上首部对齐（默认值）
  • ItemAlign.Center：交叉轴上居中对齐。
  • ItemAlign.End：交叉轴上底部对齐。
  • ItemAlign.Stretch：交叉轴上拉伸填充，拉伸到容器同高（前提：子元素不设置高）
  • ItemAlign.Baseline：交叉轴上文本基线对齐。
@Entry
@Component
struct RowLayout {build() {Row() {Button("第一按钮").alignSelf(ItemAlign.Stretch)Button("第二按钮").alignSelf(ItemAlign.Start)Button("第三按钮")}// 不设置Row容器宽，则Row容器的宽是子元素宽的总和.width("100%")// 不设置Row容器高，则Row容器的高等于子元素的高.height("100%").justifyContent(FlexAlign.SpaceEvenly).alignItems(VerticalAlign.Center)}
}

在这里插入图片描述

3. 线性容器Column

Column容器内子元素按照垂直方向排列，通过 space 属性设置排列方向上子元素的间距。

@Entry
@Component
struct ColumnLayout {build() {Column({space: 20}) {Button("第一按钮")Button("第二按钮")Button("第三按钮")}}
}

在这里插入图片描述

3.1 子元素在主轴上的排列方式

在布局容器内，可以通过justifyContent属性设置子元素在容器主轴上的排列方式。Column容器的主轴是垂直方向的。

  • FlexAlign.Start：子元素在垂直方向首端对齐（默认值）
  • FlexAlign.Center：子元素在垂直方向居中对齐
  • FlexAlign.End：子元素在垂直方向尾部对齐
  • FlexAlign.SpaceBetween：子元素在垂直方向均匀分配，第一个元素与首端对齐、最后一个元素与尾部对齐
  • FlexAlign.SpaceAround：子元素在垂直方向相邻元素之间距离相同，第一个元素到首端的距离和最后一个元素到尾部的距离是相邻元素之间距离的一半
  • FlexAlign.SpaceEvenly：子元素在垂直方向均匀分配，相邻元素之间的距离、第一个元素与首端的间距、最后一个元素到尾部的间距都完全一样
@Entry
@Component
struct ColumnLayout {build() {Column({space: 20}) {Button("第一按钮")Button("第二按钮")Button("第三按钮")}// 不设置Column容器高，则Column容器的高是子元素高的总和.height("100%").justifyContent(FlexAlign.SpaceBetween)}
}

在这里插入图片描述

@Entry
@Component
struct ColumnLayout {build() {Column({space: 20}) {Button("第一按钮")Button("第二按钮")Button("第三按钮")}// 不设置Column容器高，则Column容器的高是子元素高的总和.height("100%").justifyContent(FlexAlign.SpaceAround)}
}

在这里插入图片描述

@Entry
@Component
struct ColumnLayout {build() {Column({space: 20}) {Button("第一按钮")Button("第二按钮")Button("第三按钮")}// 不设置Column容器高，则Column容器的高是子元素高的总和.height("100%").justifyContent(FlexAlign.SpaceEvenly)}
}

在这里插入图片描述

3.2 子元素在交叉轴上的对齐方式

交叉轴是垂直于主轴的，因为Column容器的主轴是垂直方向的，所以Column容器的交叉轴是水平方向的。

在布局容器内，可以通过alignItems属性设置子元素在容器交叉轴上的对齐方式。

  • HorizontalAlign.Start：子元素在水平方向左对齐（默认值）
  • HorizontalAlign.Center：子元素在水平方向居中对齐
  • HorizontalAlign.End：子元素在水平方向右对齐
@Entry
@Component
struct ColumnLayout {build() {Column({space: 20}) {Button("第一按钮")Button("第二按钮")Button("第三按钮")}// 不设置Column容器高，则Column容器的高是子元素高的总和.height("100%")// 不设置Column容器宽，则Column容器的宽等于子元素的宽.width("100%").justifyContent(FlexAlign.SpaceEvenly).alignItems(HorizontalAlign.Center)}
}

在这里插入图片描述

除了通过alignItems属性控制所有子元素在容器交叉轴上的对齐方式外，alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式，其优先级高于alignItems属性。

  • ItemAlign.Auto：使用默认值
  • ItemAlign.Start：交叉轴上首部对齐（默认值）
  • ItemAlign.Center：交叉轴上居中对齐。
  • ItemAlign.End：交叉轴上底部对齐。
  • ItemAlign.Stretch：交叉轴上拉伸填充，拉伸到容器同宽（前提：子元素不设置宽）
  • ItemAlign.Baseline：交叉轴上文本基线对齐。
@Entry
@Component
struct ColumnLayout {build() {Column({space: 20}) {Button("第一按钮").alignSelf(ItemAlign.Stretch)Button("第二按钮").alignSelf(ItemAlign.Start)Button("第三按钮")}// 不设置Column容器高，则Column容器的高是子元素高的总和.height("100%")// 不设置Column容器宽，则Column容器的宽等于子元素的宽.width("100%").justifyContent(FlexAlign.SpaceEvenly).alignItems(HorizontalAlign.Center)}
}

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Laya3.0 相机使用

Laya3.0 相机使用

摄像机，是3D场景里边最经常使用的对象了。 官方文档：点击这里学习 1.投影 Projection 透视： 模拟人眼的视觉效果，近大远小。模拟物理世界的规律，将眼睛或相机抽象成一个点，此时视锥体内的物体投影到视平…
阅读更多...
【MATLAB源码-第119期】基于matlab的GMSK系统1bit差分解调误码率曲线仿真，输出各个节点的波形以及功率谱。

【MATLAB源码-第119期】基于matlab的GMSK系统1bit差分解调误码率曲线仿真，输出各个节点的波形以及功率谱。

操作环境： MATLAB 2022a 1、算法描述 GMSK（高斯最小频移键控）是一种数字调制技术，广泛应用于移动通信，例如GSM网络。它是一种连续相位调频制式，通过改变载波的相位来传输数据。GMSK的关键特点是其频谱的…
阅读更多...
自动驾驶轨迹规划之碰撞检测（二）

自动驾驶轨迹规划之碰撞检测（二）

欢迎大家关注我的B站： 偷吃薯片的Zheng同学的个人空间-偷吃薯片的Zheng同学个人主页-哔哩哔哩视频 (bilibili.com) 目录 1.基于凸优化 2.具身足迹 3. ESDF 自动驾驶轨迹规划之碰撞检测（一）-CSDN博客 大家可以先阅读之前的博客 1.基于…
阅读更多...
回归预测 | Matlab基于OOA-SVR鱼鹰算法优化支持向量机的数据多输入单输出回归预测

回归预测 | Matlab基于OOA-SVR鱼鹰算法优化支持向量机的数据多输入单输出回归预测

回归预测 | Matlab基于OOA-SVR鱼鹰算法优化支持向量机的数据多输入单输出回归预测 目录 回归预测 | Matlab基于OOA-SVR鱼鹰算法优化支持向量机的数据多输入单输出回归预测预测效果基本描述程序设计参考资料 预测效果 基本描述 1.Matlab基于OOA-SVR鱼鹰算法优化支持向量机的数据…
阅读更多...
nginx日志分割

nginx日志分割

日志切割是线上常见的操作，能够控制单个日志文件的大小，便于对日志进行管理 给nginx主进程发送一个重新打开的信号，让nginx重新生成新的日志文件 nginx -s reopen 这个命令等同于kill -USR1 cat nginx.pid 切割日志文件shell命令 #!/bin/bas…
阅读更多...
C++参悟：正则表达式库regex（更新中）

C++参悟：正则表达式库regex（更新中）

正则表达式库regex（更新中） 一、概述二、快速上手Demo1. 查找字符串2. 匹配字符串3. 替换字符串 三、类关系梳理1. 主类1. basic_regex 2. 算法3. 迭代器4. 异常5. 特征6. 常量1. syntax_option_type2. match_flag_type3. error_type 一、概述 C标准库为…
阅读更多...
mapboxGL中的航线动画

mapboxGL中的航线动画

概述 借用上篇文章中二阶贝塞尔曲线的生成，本文实现mapboxGL中的航线动画。 效果 实现 1. 初始化地图 const from [101.797439042302, 36.5937248286007]; const to [106.9733, 35.217]; const points new ArcLine(from, to); const line new Geometry(poin…
阅读更多...
【开源】基于JAVA语言的贫困地区人口信息管理系统

【开源】基于JAVA语言的贫困地区人口信息管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 人口信息管理模块2.2 精准扶贫管理模块2.3 特殊群体管理模块2.4 案件信息管理模块2.5 物资补助模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 人口表3.2.2 扶贫表3.2.3 特殊群体表3.2.4 案件表3.2.5 物资补助表 四…
阅读更多...
java验证ftp地址是否可用

java验证ftp地址是否可用

一.前言 在实际开发中我们的业务是我们将订单发到客户的指定的地方, 我们需要验证用户的ftp地址是否真实且有效, 我们根据java程序来进行验证, 步骤和思路应该是. 步骤描述1导入所需要的 java类库(jar包依赖)2创建ftp客户端对象3设置ftp连接服务端的连接参数4建立与ftp的服务…
阅读更多...
IntelliJ IDEA 常用快捷键一览表(通用型,提高编写速度,类结构、查找和查看源码,替换与关闭,调整格式)

IntelliJ IDEA 常用快捷键一览表(通用型,提高编写速度,类结构、查找和查看源码,替换与关闭,调整格式)

文章目录 IntelliJ IDEA 常用快捷键一览表1-IDEA的日常快捷键第1组：通用型第2组：提高编写速度（上）第3组：提高编写速度（下）第4组：类结构、查找和查看源码第5组：查找、替换…
阅读更多...
【C++】文件操作

【C++】文件操作

文件操作 一、文本文件（一）写文件读文件 二、二进制文件（一）写文件（二）读文件 程序运行时产生的数据都属于临时数据，程序一旦运行结束都会被释放，通过文件可以将数据持久化&#xff…
阅读更多...
JRTP实时音视频传输(2)-使用TCP通信的案例

JRTP实时音视频传输(2)-使用TCP通信的案例

环境搭建等参考：JRTP实时音视频传输(1)-必做的环境搭建与demo测试 1.创建自己的demo 先将example1拷贝为myclienttcp.cpp和myservertcp.cpp cp example1.cpp myclienttcp.cpp cp example1.cpp myservertcp.cpp 改写jrtplib/JRTPLIB/examples/CMakeLists.txt&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023