鸿蒙中的九种布局概述

鸿蒙中的九种布局概述

概述

鸿蒙开发中包含就种布局，分别为线性布局、层叠布局、弹性布局、相对布局、栅格布局、媒体布局、列表、网格、轮播。
线性布局

线性布局通过Row和Column举行构建，是其他布局的底子。此中Row是程度方向排列，Column是垂直方向上排列。
Row表示图：

Column表示图

基本概念

容器布局：具有布局本领的容器组件。
布局子元素：被布局容器包罗的元素。

主轴：线性布局在布局方向上的轴线，例如程度布局（Row）的主轴是程度方向，Column的主轴是垂直方向。
交错轴：垂直与主轴的轴线。

间距：布局子元素的间距，用关键字space标记，如图Column的表示图。

语法

1、声明一个垂直线性布局，子元素间距为20，宽度充满父容器。
Column({ space: 20 }) {
  //子元素区域
}.width('100%')
2、声明一个程度线性布局，子元素间距为20，宽度充满父容器。
Row({ space: 20 }) {
  //子元素区域
}.width('100%')
属性

justifyContent

justifyContent属性用于设置子元素在容器主轴上的排列方式。
下面以垂直方向（Column）的线性布局为例，在布局内部再放三个子元素，观察三个子元素的排列方式。
Column() {
  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)

  Column() {
  }.width('80%').height(50).backgroundColor(0xD2B48C)

  Column() {
  }.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').height(300).backgroundColor('rgb(242,242,242)')
如上代码，在不设置justifyContent属性时，默认从上到下依次排列。
justifyContent(FlexAlign.Start)

默认的排列方式，元素在垂直方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。

justifyContent(FlexAlign.Center)

元素在垂直方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离雷同

justifyContent(FlexAlign.End)

元素在垂直方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐

justifyContent(FlexAlign.SpaceBetween)

垂直方向匀称分配元素，相邻元素之间距离雷同。第一个元素与行首对齐，最后一个元素与行尾对齐。

justifyContent(FlexAlign.SpaceAround)

垂直方向匀称分配元素，相邻元素之间距离雷同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。

justifyContent(FlexAlign.SpaceEvenly)

垂直方向匀称分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样

alignItems

设置子元素在交错轴上的对齐方式，此中Column取值为HorizontalAlign，Row取值为VerticalAlign。
下面仍以垂直方向（Column）的线性布局为例，在布局内部再放三个子元素，观察三个子元素的排列方式。
HorizontalAlign.Start

子元素在程度方向左对齐

HorizontalAlign.Center

子元素在程度方向居中对齐

HorizontalAlign.End

子元素在程度方向右对齐

层叠布局

层叠布局利用Stack举行定义，StackLayout包裹的子组件可以重叠和组件位置定位，默认情况下后一个子元素覆盖前一个子元素，利用zIndex属性可以设置层级顺序，利用场景有广告和卡片层叠效果等。
语法

Stack({alignContent: Alignment.罗列 }) {
//书写子组件
  }.width('100%').height(150)
对齐方式

Stack组件通过alignContent参数设置子组件的相对位置，支持九中对齐方式。

弹性布局

弹性布局利用Flex举行定义，提供更加有效的方式对容器中的子元素举行排列、对齐和分配剩余空间。
基本概念

主轴：Flex组件布局方向的轴线，子元素默认沿着主轴排列。主轴开始的位置称为主轴起始点，竣事位置称为主轴竣事点
交错轴：垂直于主轴方向的轴线。交错轴开始的位置称为交错轴起始点，竣事位置称为交错轴竣事点

（引用自官网）
语法

Flex({ direction: FlexDirection.方向}) {
  Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
  Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
  Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
}
参数

direction

决定主轴的方向，从而控制子组件的排列方向，利用FlexDirection中的属性确定
wrap

布局换行：控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex是单行布局还是多行布局，在多行布局时，通过交错轴方向，确认新行堆叠方向。利用FlexWrap中的值举行确定。
justifyContent

主轴方向的对齐方式，通过FlexAlign举行确定。
alignItems

交错轴上的对齐方式，通过ItemAlign举行确定。
alignContent

内容对齐，设置子组件各行在交错轴剩余空间内的对齐方式，只在多行的flex布局中生效
子组件属性

alignSelf

设置子组件在父容器交错轴的对齐格式，且会覆盖Flex布局容器中alignItems配置，利用ItemAlign中的值。
flexBasis

自顺应拉伸，在弹性布局父组件尺寸不敷大的时候，通过设置子组件的相关属性确定在父容器的占比，到达自顺应布局本领。
相对布局

相对布局支持基于锚点做相对位置布局，用于对容器内部的子元素设置相对位置关系。通过RelativeContainer举行定义。
基本概念

锚点：通过锚点设置当前元素基于哪个元素确定位置。
对齐方式：通过对齐方式，设置当前元素是基于锚点的上中下对齐，还是基于锚点的左中右对齐。
语法

RelativeContainer() {
  子组件()
    // 添加其他属性
    .属性({
      参数: { 参数: '锚点ID', 对齐方式 }
    })
    .id("当前组件ID")
}
栅格布局

紧张用于屏幕适配，利用GridRow和GridCol联合利用，相对复杂，请查看专题介绍。
媒体查询

媒体查询可根据差别设备类型或同设备差别状态修改应用的样式，是响应式设计的核心。
紧张用于以下两种场景：
1、针对设备和应用的属性信息（好比表现区域、深淡色、分辨率），设计出相匹配的布局。2、当屏幕发生动态改变时（好比分屏、横竖屏切换），同步更新应用的页面布局。
获取设备的信赖信息，共同其他布局方式，用于对用户展示差别的布局。
列表

当内容超过屏幕大小时，提供滚动功能。利用List组件和ListItemGroup和ListItem共同利用。
网格布局

网格布局是由“行”和“列”分割的单元格所构成，利用Grid容器组件和子组件GridItem共同利用，利用场景有九宫格图片展示、日历、计算器等。
轮播

Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件举行轮播表现。利用Swiper举行构建。
    本文档仅介绍各布局的作用，详细用法，可关注公众号“浮萍公社”，回复“鸿蒙布局专题”，获取详细利用方式。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。