鸿蒙HarmonyOS开发:常用布局及实用技巧

文章目录

一、概述

布局是指对页面组件进行排列和定位的过程,其目的是有效地组织和展示页面内容,会涉及到组件的大小、位置以及它们之间的相互关系等等。

二、盒子模型

在鸿蒙应用中,页面上的每个组件都可以看做是一个矩形的盒子,这个盒子包含了内容区域(content)、边框(border)、内边距(padding)和外边距(margin),各部分内容如下图所示

三、线性布局(Column/Row)

线性布局(LinearLayout)是开发中最常用的布局,可通过容器组件Column和Row构建,其子组件会在垂直或者水平方向上进行线性排列,具体效果如下图所示

1、space属性

Column和Row容器的参数类型为{space?: string | number},开发者可通过space属性调整子元素在主轴方向上的间距,效果如下

2、justifyContent属性

子元素沿主轴方向的排列方式可以通过justifyContent()方法进行设置,其参数类型为枚举类型FlexAlign,可选的枚举值有

3、alignItems属性

子元素沿交叉轴方向的对齐方式可以通过alignItems()方法进行设置,其参数类型,对于Column容器来讲是HorizontalAlign,对于Row容器来讲是VerticalAlign,两者都是枚举类型,可选择枚举值也都相同,具体内容如下

四、实用技巧

1、Blank组件的使用

Blank可作为Column和Row容器的子组件,该组件不显示任何内容,并且会始终充满容器主轴方向上的剩余空间,效果如下:

2、layoutWeight属性的使用

layoutWeight属性可用于Column和Row容器的子组件,其作用是配置子组件在主轴方向上的尺寸权重。配置该属性后,子组件沿主轴方向的尺寸设置(width或height)将失效,具体尺寸根据权重进行计算,计算规则如下图所示:

相关推荐
欧阳大帅哥5 个月前
CSS(盒子模型,定位,浮动,扩展)
前端·css·盒子模型
梁辰兴1 年前
CSS 盒子模型:Box Model
前端·css·盒子模型·div
Cosmoshhhyyy1 年前
CSS:弹性盒子模型详解(用法 + 例子 + 效果)
前端·css·盒子模型
Cosmoshhhyyy1 年前
CSS:盒子模型 与 多种横向布局方法
前端·css·盒子模型·布局
heiyay1 年前
浅谈BFC
css·bfc·盒子模型·前端样式