玩转HarmonyOS NEXT之常用布局一 harmonyos next开发者预览版下载
yuyutoo 2024-10-19 11:09 4 浏览 0 评论
线性布局（Row/Column）
线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。
如果布局内子元素超过1个时，且能够以某种方式线性排列时优先考虑此布局。
基本属性
线性布局组件中存在两根轴：主轴和交叉轴。它们始终相互垂直，但它们的方向取决于容器的类型。
- 主轴：在Column容器中，子组件按垂直方向从上到下排列，主轴方向是垂直的。在Row容器中，子组件按水平方向从左到右排列，主轴方向是水平的。
- 交叉轴：交叉轴与主轴垂直相交，如果主轴是垂直的，交叉轴就是水平的，反之亦然。
属性名称 | 描述 |
justifyContent | 设置主轴上的对齐格式。 |
alignItems | 设置交叉轴上的对齐格式。 |
主轴方向
对齐格式 | 描述 |
Start | 元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。 |
Center | 元素在主轴方向中心对齐，第一个元素与行首的距离以及最后一个元素与行尾距离相同。 |
End | 元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。 |
SpaceBetween | 元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。 |
SpaceAround | 元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 |
SpaceEvenly | 元素在主轴方向等间距布局，无论是相邻元素还是边界元素到容器的间距都一样。 |
交叉轴方向
- Column
- 对齐格式描述Start设置子组件在水平方向上按照起始端对齐。Center (默认值)设置子组件在水平方向上居中对齐。End设置子组件在水平方向上按照末端对齐。
- Row
- 对齐格式描述Top设置子组件在垂直方向上居顶部对齐。Center (默认值)设置子组件在垂直方向上居中对齐。Bottom设置子组件在垂直方向上居底部对齐。
层叠布局（Stack）
层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。
层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。
基本属性
Stack组件通过alignContent参数实现位置的相对移动，支持9种对齐方式。
对齐格式 | 描述 |
TopStart | 顶部起始端。 |
Top | 顶部横向居中。 |
TopEnd | 顶部尾端。 |
Start | 起始端纵向居中。 |
Center | 横向和纵向居中。 |
End | 尾端纵向居中。 |
BottomStart | 底部起始端。 |
Bottom | 底部横向居中。 |
TopEnd | 顶部尾端。 |
BottomEnd | 底部尾端。 |
弹性布局（Flex）
弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。
容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。
基本概念
- 主轴：Flex组件布局方向的轴线，子元素默认沿着主轴排列。主轴开始的位置称为主轴起始点，结束位置称为主轴结束点。
- 交叉轴：垂直于主轴方向的轴线。交叉轴开始的位置称为交叉轴起始点，结束位置称为交叉轴结束点。
布局方向
在弹性布局中，容器的子元素可以按照任意方向排列。通过设置参数direction，可以决定主轴的方向，从而控制子元素的排列方向。
属性值 | 说明 |
FlexDirection.Row（默认值） | 主轴为水平方向，子元素从起始端沿着水平方向开始排布。 |
FlexDirection.RowReverse | 主轴为水平方向，子元素从终点端沿着FlexDirection. Row相反的方向开始排布。 |
FlexDirection.Column | 主轴为垂直方向，子元素从起始端沿着垂直方向开始排布。 |
FlexDirection.ColumnReverse | 主轴为垂直方向，子元素从终点端沿着FlexDirection. Column相反的方向开始排布。 |
布局换行
弹性布局分为单行布局和多行布局。默认情况下，Flex容器中的子元素都排在一条线（又称“轴线”）上。wrap属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行排列方向。
属性值 | 说明 |
FlexWrap. NoWrap（默认值） | 不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。 |
FlexWrap. Wrap | 换行，每一行子元素按照主轴方向排列。 |
FlexWrap. WrapReverse | 换行，每一行子元素按照主轴反方向排列。 |
主轴对齐方式
通过justifyContent参数设置子元素在主轴方向的对齐方式。
属性值 | 说明 |
FlexAlign.Start（默认值） | 不子元素在主轴方向起始端对齐， 第一个子元素与父元素边沿对齐，其他元素与前一个元素对齐。 |
FlexAlign.Center | 子元素在主轴方向居中对齐。 |
FlexAlign.End | 子元素在主轴方向终点端对齐, 最后一个子元素与父元素边沿对齐，其他元素与后一个元素对齐。 |
FlexAlign.SpaceBetween | Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素和最后一个子元素与父元素边沿对齐。 |
FlexAlign.SpaceAround | Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素到主轴起始端的距离和最后一个子元素到主轴终点端的距离是相邻元素之间距离的一半。 |
FlexAlign.SpaceEvenly | Flex主轴方向元素等间距布局，相邻子元素之间的间距、第一个子元素与主轴起始端的间距、最后一个子元素到主轴终点端的间距均相等。 |
交叉轴对齐
可以通过Flex组件的alignItems参数设置子元素在交叉轴的对齐方式。
属性值 | 说明 |
ItemAlign.Auto | 使用Flex容器中默认配置。 |
ItemAlign.Start | 交叉轴方向首部对齐。 |
ItemAlign.End | 交叉轴方向底部对齐。 |
ItemAlign.Stretch | 交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。 |
ItemAlign.Baseline | 交叉轴方向文本基线对齐。 |
子元素设置交叉轴对齐
子元素的alignSelf属性也可以设置子元素在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems配置。
属性值 | 说明 |
ItemAlign.Auto | 使用Flex容器中默认配置。 |
ItemAlign.Start | 交叉轴方向首部对齐。 |
ItemAlign.End | 交叉轴方向底部对齐。 |
ItemAlign.Stretch | 交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。 |
ItemAlign.Baseline | 交叉轴方向文本基线对齐。 |
内容对齐
可以通过alignContent参数设置子元素各行在交叉轴剩余空间内的对齐方式，只在多行的Flex布局中生效。
属性值 | 说明 |
FlexAlign.Start | 子元素各行与交叉轴起点对齐。 |
FlexAlign.Center | 子元素各行在交叉轴方向居中对齐。 |
FlexAlign.End | 子元素各行与交叉轴终点对齐。 |
FlexAlign.SpaceBetween | 子元素各行与交叉轴两端对齐，各行间垂直间距平均分布。 |
FlexAlign.SpaceAround | 子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。 |
FlexAlign.SpaceEvenly | 子元素各行间距，子元素首尾行与交叉轴两端距离都相等。 |
FlexAlign.SpaceAround | 子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。 |
FlexAlign.SpaceAround | 子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。 |
自适应拉伸
在弹性布局父组件尺寸过小时，通过子元素的以下属性设置其在父容器的占比，达到自适应布局。
- flexBasis：设置子元素在父容器主轴方向上的基准尺寸。如果设置了该属性，则子项占用的空间为该属性所设置的值；如果没设置该属性，那子项的空间为width/height的值。
- flexGrow：设置父容器的剩余空间分配给此属性所在组件的比例。用于分配父组件的剩余空间。
- flexShrink: 当父容器空间不足时，子元素的压缩比例。
相关推荐
- 史上最全的浏览器兼容性问题和解决方案
-
微信ID：WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻︻▄（页底留言开放，欢迎来吐槽）●●●...
-
- 平面设计基础知识_平面设计基础知识实验收获与总结
-
CSS构造颜色，背景与图像1.使用span更好的控制文本中局部区域的文本:文本;2.使用display属性提供区块转变：display:inline（是内联的...
-
2025-02-21 16:01 yuyutoo
- 写作排版简单三步就行-工具篇_作文排版模板
-
和我们工作中日常word排版内部交流不同，这篇教程介绍的写作排版主要是用于“微信公众号、头条号”网络展示。写作展现的是我的思考，排版是让写作在网格上更好地展现。在写作上花费时间是有累积复利优势的，在排...
- 写一个2048的游戏_2048小游戏功能实现
-
1.创建HTML文件1.打开一个文本编辑器，例如Notepad++、SublimeText、VisualStudioCode等。2.将以下HTML代码复制并粘贴到文本编辑器中：html...
- 今天你穿“短袖”了吗?青岛最高23℃!接下来几天气温更刺激……
-
最近的天气暖和得让很多小伙伴们喊“热”！！！ 昨天的气温到底升得有多高呢？你家有没有榜上有名？...
- CSS不规则卡片，纯CSS制作优惠券样式，CSS实现锯齿样式
-
之前也有写过CSS优惠券样式《CSS3径向渐变实现优惠券波浪造型》，这次再来温习一遍，并且将更为详细的讲解，从布局到具体样式说明，最后定义CSS变量，自定义主题颜色。布局...
- 你的自我界限够强大吗?_你的自我界限够强大吗英文
-
我的结果:A、该设立新的界限...
- 行内元素与块级元素，以及区别_行内元素和块级元素有什么区别?
-
行内元素与块级元素首先，CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，分别为块级（block）、行内（inline）。块级元素：（以下列举比较常...
-
- 让“成都速度”跑得潇潇洒洒，地上地下共享轨交繁华
-
去年的两会期间，习近平总书记在参加人大会议四川代表团审议时，对治蜀兴川提出了明确要求，指明了前行方向，并带来了“祝四川人民的生活越来越安逸”的美好祝福。又是一年...
-
2025-02-21 16:00 yuyutoo
- 今年国家综合性消防救援队伍计划招录消防员15000名
-
记者24日从应急管理部获悉，国家综合性消防救援队伍2023年消防员招录工作已正式启动。今年共计划招录消防员15000名，其中高校应届毕业生5000名、退役士兵5000名、社会青年5000名。本次招录的...
- 一起盘点最新 Chrome v133 的5大主流特性 ?
-
1.CSS的高级attr()方法CSSattr()函数是CSSLevel5中用于检索DOM元素的属性值并将其用于CSS属性值，类似于var()函数替换自定义属性值的方式。...
- 竞走团体世锦赛5月太仓举行 世界冠军杨家玉担任形象大使
-
style="text-align:center;"data-mce-style="text-align:...
- 学物理能做什么?_学物理能做什么 卢昌海
-
作者：曹则贤中国科学院物理研究所原标题：《物理学：ASourceofPowerforMan》在2006年中央电视台《对话》栏目的某期节目中，主持人问过我一个的问题：“学物理的人，如果日后不...
-
- 你不知道的关于这只眯眼兔的6个小秘密
-
在你们忙着给熊本君做表情包的时候，要知道，最先在网络上引起轰动的可是这只脸上只有两条缝的兔子——兔斯基。今年，它更是迎来了自己的10岁生日。①关于德艺双馨“老艺...
-
2025-02-21 16:00 yuyutoo
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)