百度360必应搜狗淘宝本站头条
vba高级教程svn连接scheduledtaskmybatis plus结构体数组
当前位置：网站首页 > 编程网 > 正文

玩转HarmonyOS NEXT之常用布局一 harmonyos next开发者预览版下载

yuyutoo 2024-10-19 11:09 2 浏览 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: 当父容器空间不足时，子元素的压缩比例。

相关推荐

jQuery VS AngularJS 你更钟爱哪个?

在这一次的Web开发教程中，我会尽力解答有关于jQuery和AngularJS的两个非常常见的问题，即jQuery和AngularJS之间的区别是什么？也就是说jQueryVSAngularJS？...

Jquery实时校验，指定长度的「负小数」，小数位未满末尾补0

在可以输入【负小数】的输入框获取到焦点时，移除千位分隔符，在输入数据时，实时校验输入内容是否正确，失去焦点后，添加千位分隔符格式化数字。同时小数位未满时末尾补0。HTML代码...

如何在pbootCMS前台调用自定义表单?pbootCMS自定义调用代码示例

要在pbootCMS前台调用自定义表单，您需要在后台创建表单并为其添加字段，然后在前台模板文件中添加相关代码，如提交按钮和表单验证代码。您还可以自定义表单数据的存储位置、添加文件上传字段、日期选择器、...

编程技巧:Jquery实时验证，指定长度的「负小数」

为了保障【负小数】的正确性，做成了通过Jquery，在用户端，实时验证指定长度的【负小数】的方法。HTML代码<inputtype="text"class="forc...

一篇文章带你用jquery mobile设计颜色拾取器

【一、项目背景】现实生活中，我们经常会遇到配色的问题，这个时候去百度一下RGB表。而RGB表只提供相对于的颜色的RGB值而没有可以验证的模块。我们可以通过jquerymobile去设计颜色的拾取器...

编程技巧:Jquery实时验证，指定长度的「正小数」

为了保障【正小数】的正确性，做成了通过Jquery，在用户端，实时验证指定长度的【正小数】的方法。HTML做成方法<inputtype="text"class="fo...

jquery.validate检查数组全部验证

问题：html中有多个name[]，每个参数都要进行验证是否为空，这个时候直接用required:true话，不能全部验证，只要这个数组中有一个有值就可以通过的。解决方法使用addmethod...

Vue进阶(幺叁肆):npm查看包版本信息

第一种方式npmviewjqueryversions这种方式可以查看npm服务器上所有的...

layui中使用lay-verify进行条件校验

一、layui的校验很简单，主要有以下步骤：1.在form表单内加上class="layui-form"2.在提交按钮上加上lay-submit3.在想要校验的标签，加上lay-...

jQuery是什么?如何使用? jquery是什么功能组件

jQuery于2006年1月由JohnResig在BarCampNYC首次发布。它目前由TimmyWilson领导,并由一组开发人员维护。jQuery是一个JavaScript库，它简化了客户...

django框架的表单form的理解和用法-9

表单呈现...

jquery对上传文件的检测判断 jquery实现文件上传

总体思路：在前端使用jquery对上传文件做部分初步的判断，验证通过的文件利用ajaxFileUpload上传到服务器端，并将文件的存储路径保存到数据库。<asp:FileUploadI...

Nodejs之MEAN栈开发(四)-- form验证及图片上传

这一节增加推荐图书的提交和删除功能，来学习node的form提交以及node的图片上传功能。开始之前需要源码同学可以先在git上fork：https://github.com/stoneniqiu/R...

大数据开发基础之JAVA jquery 大数据java实战

上一篇我们讲解了JAVAscript的基础知识、特点及基本语法以及组成及基本用途，本期就给大家带来了JAVAweb的第二个知识点jquery，大数据开发基础之JAVAjquery，这是本篇文章的主要...

推荐四个开源的jQuery可视化表单设计器

jquery开源在线表单拖拉设计器formBuilder(推荐)jQueryformBuilder是一个开源的WEB在线html表单设计器，开发人员可以通过拖拉实现一个可视化的表单。支持表单常用控件...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表