【鸿蒙开发】ArkTs布局(上)----面试题库
- 什么是线性布局
线性布局(LinearLayout)是开发中最常用的布局,通过线性容器Row和Column构建。线性布局是其他布局的基础,其子元素在线性方向上(水平方向和垂直方向)依次排列。线性布局的排列方向由所选容器组件决定,Column容器内子元素按照垂直方向排列,Row容器内子元素按照水平方向排列。
Column容器内子元素排列示意图:
Row容器内子元素排列示意图:
-
线性布局对齐方式
布局子元素在主轴上的对齐方式: 属性: justifyContent()
布局子元素在交叉轴上的对齐方式: 属性: alignItems() -
线性布局的自适应拉伸、缩放、延伸
拉伸:常用空白填充组件Blank,在容器主轴方向自动填充空白空间。Row和Column作为容器,只需要添加宽高为百分比。
缩放:父容器尺寸确定时,使用layoutWeight属性设置子元素和兄弟元素在主轴上的权重,忽略元素本身尺寸设置,使它们在任意尺寸的设备下自适应占满剩余空间。
延伸:使用Scrol、Listl组件,在不同尺寸设备下,当页面的内容超出屏幕大小而无法完全显示时,可以通过滚动条进行拖动展示。 -
什么是弹性布局(堆叠)
● 弹性布局(Flex)提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。
● 弹性布局分为单行布局和多行布局。默认情况下,Flex 容器中的子元素都排在一条线(又称“轴线”)上。子元素尺寸总和大于 Flex 容器尺寸时,子元素尺寸会自动挤压。
● wrap 属性控制当子元素主轴尺寸之和大于容器主轴尺寸时,Flex 是单行布局还是多行布局。在多行布局时,通过交叉轴方向,确认新行排列方向