第四节 常用布局

布局基础

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

盒子模型：在鸿蒙应用中，页面上的每个组件都可以看作是个矩形的盒子，这个盒子包含了内容区域(content)、边框(border)、内边距(padding)和外边距(margin)

• 外边距(margin)：通过margin({ top? : Length, right? : Length, bottom? : Length, left?: Length} | Length)设置，可单独设置某个方向的外边距，也可以用一个数值统一设置
• 内边距(padding)：通过padding({ top? : Length, right? : Length, bottom? : Length, left?: Length} | Length)设置，可单独设置某个方向的内边距，也可以用一个数值统一设置
• 边框(border)：通过border()方法设置，传入一个对象形式的参数
  • width：边框宽度(粗细)
  • color：边框颜色
  • radius：边框半径
  • style：边框样式，赋值一个枚举对象(Borderstyle)的选项值
    • Solid：实线边框
    • Dashed：虚线边框
    • Dotted：点线边框

线性布局

名称：LinearLayout

作用：是开发中最常用的布局，通过行(Row)和列(Column)构建页面

重要概念：Row和Column容器都有两个轴线，分别是主轴和交叉轴

• 主轴：线性布局容器在布局方向上的轴线，Row容器的主轴为横向，Column容器的主轴为纵向
• 交叉轴：垂直于主轴方向的轴线，Row容器的交叉轴为纵向，Column容器的交叉轴为横向

参数：是一个对象形式space，设置子元素在主轴方向的间距

常用属性：

• 子元素沿主轴方向的排列方式：通过justifyContent()方法设置，传入一个枚举对象(FlexAlign)的选项值作为参数
  • Start：头部对齐
  • Center：居中对齐
  • End：尾部对齐
  • SpaceBetween：均匀分布，首末两端的元素会贴边，中间的元素跟它们是等距的
  • SpaceAround：均匀分布，首末两端的元素跟边缘是一倍间距，中间的元素跟它们是两倍间距
  • SpaceEvenly：均匀分布，所有的元素之间（包括与边缘的）都是一倍间距
• 子元素沿交叉轴方向的排列方式：通过alignltems()方法设置
  • 对于Row容器来说，需要传入枚举对象(VerticalAlign)的选项值作为参数
    • Start：头部对齐
    • Center：居中对齐
    • End：尾部对齐
  • 对于Column容器来说，需要传入枚举对象(HorizontalAlign)的选项值作为参数
    • Start：头部对齐
    • Center（默认）：居中对齐
    • End：尾部对齐

实用技巧：

• Blank()组件的使用：可以作为Row和Column容器的子组件，不会显示任何内容，用于填充主轴方向的剩余空间
• layoutWeight属性的使用：可以给子组件配置主轴方向上的尺寸权重，当使用该属性之后，子组件原本的width和height会立刻失效，宽高会重新计算

层叠布局

名称：Stack

作用：将多个组件沿垂直于屏幕的方向堆叠在一起

核心组件：Stack，特点是后添加进来的元素会显示在上一层

参数：只一个参数，写成对象形式alignContent，设置子组件的对齐方式，赋值一个枚举对象(Alignment)的选项值

• TopStart
• Top
• TopEnd
• Start
• Center （默认）
• End
• BottomStart
• Bottom
• BottomEnd

实用技巧：

• 子组件Z轴控制：需要使用zIndex()方法设置，数值越大，显示的优先级就越高
• 子组件精确定位：需要使用position()方法设置，需要传入一个对象形式的参数（x,y）

弹性布局

名称 ：Flex

作用：效果类似于线性布局，但是弹性布局在子元素的排列、对齐和剩余空间的分配上更加灵活

核心组件：Flex

参数：只有一个参数，要写成对象形式的

• direction：布局方向(子元素的排列方向)(主轴)，赋予一个枚举对象(FlexDirection)的选项值
  • Row(默认)：正向水平
  • RowReverse：反向水平
  • Column：正向垂直
  • ColumnReverse：反向垂直
• justifyContent：主轴排列方式，赋予一个枚举对象(FlexAlign)的值
  • Start(默认)：起始端对齐
  • Center：居中对齐
  • End：末端对齐
  • SpaceBetween：均匀分布，首末两端的元素会贴边，中间的元素跟它们是等距
  • SpaceAround：均匀分布，首末两端的元素与边缘是一倍间距，中间的元素跟它们是两倍间距
  • SpaceEvenly：均匀分布，所有元素之间都是一倍间距
• alignltems：交叉轴对齐方式，赋予一个枚举对象(ltemAlign)的选项值
  • Start(默认)：起始端对齐
  • Center：居中对齐
  • End：末端对齐
  • Stretch：拉伸对齐
  • BaseLine：文本(西文和数字)基线对齐
• wrap：布局换行(列)，赋予一个枚举对象(FlexWrap)的选项值
  • NoWrap(默认)：不换行
  • Wrap：换行
  • WrapReverse：反向换行
• alignContent：交叉轴多行排列方式，赋予一个枚举对象(FlexAlign)的选项值
  • Start(默认)：起始端对齐
  • Center：居中对齐
  • End：末端对齐
  • SpaceBetween：均匀分布，首末两端的元素会贴边，中间的元素跟它们是等距
  • SpaceAround：均匀分布，首末两端的元素与边缘是一倍间距，中间的元素跟它们是两倍间距
  • SpaceEvenly：均匀分布，所有元素之间都是一倍间距

子组件常用属性：

• 交叉轴对齐：需要使用alignSelf()方法设置，如果某个子组件使用该方法，那么优先起作用。传入枚举对象(ltemAlign)的选项值作为参数
  • Start(默认)：起始端对齐
  • Center：居中对齐
  • End：末端对齐
  • Stretch：拉伸对齐
  • BaseLine：文本(西文和数字)基线对齐
• 自适应伸缩：
  • flexShrink：用于设置当父元素空间不足的时候，子组件被压缩的比例
  • flexGrow：用于设置当父元素空间有剩余的时候，子组件瓜分剩余空间的比例
  • flexBasis：用于设置子组件的尺寸权重，一旦使用了该方法，那么该子组件的width和height会立刻失效，flexBasis重新计算