HarmonyOS ArkUI(基于ArkTS) 开发布局 （中）

HarmonyOS ArkUI(基于ArkTS) 开发布局 （上）

四 层叠布局 (Stack)

层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等

@Entry
@Component
struct Index {build() {Stack(){Column().backgroundColor('#ff6700').width(300).height(300)Column().backgroundColor('blue').width(100).height(100)}.height('100%').width('100%')}
}

后一个元素会覆盖前一个元素，有点类似于小时候玩过的套娃娃，是不是很有趣？

alignContent 对齐方式

一共九种，Top  Bottom Start End Center  TopStart TopEnd BottomStart BottomEnd

Stack({ alignContent: Alignment.样式 })

zIndex 设置层级

子元素(){}.zIndex( 5)   层级越高优先级越高，同级后面元素比前面元素高 

五 弹性布局 (Flex)

基本等价于css中的flex了

direction 布局方向

Flex({ direction: FlexDirection.Row })   除了Row还可以是RowReverse Column ColumnReverse

@Entry
@Component
struct Index {build() {Flex({}){Column().backgroundColor('#ff6700').width(100).height(100)Column().backgroundColor('blue').width(100).height(100)}.height('100%').width('100%')}
}

wrap 布局换行

Flex({ wrap: FlexWrap.NoWrap })  还可以选  WrapReverse  Wrap

justifyContent 主轴对齐方式

Flex({justifyContent:FlexAilgn.Start})

alignItems 交叉轴对齐方式

• Flex({alignItems:ItemAlign.Auto})
• ItemAlign.Auto：使用Flex容器中默认配置。
• ItemAlign.Start：交叉轴方向首部对齐。
• ItemAlign.Center：交叉轴方向居中对齐。
• ItemAlign.End：交叉轴方向底部对齐。
• ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。
• temAlign. Baseline：交叉轴方向文本基线对齐。

子元素可以通过 . alignSelf (值同上） 的方式 设置独立的对齐方式优先于全局

alignContent 内容对齐

可以通过alignContent参数设置子元素各行在交叉轴剩余空间内的对齐方式，只在多行的Flex布局中生效，可选值有：参考 justifyContent主轴对齐

六 相对布局 (RelativeContainer)

笔者不会，等会了在补充，上面是官方链接

七 栅格布局 (GridRow/GridCol)

栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用

栅格容器GridRow

栅格系统以设备的水平宽度（屏幕密度像素值，单位vp）作为断点依据，定义设备的宽度类型，形成了一套断点规则。开发者可根据需求在不同的断点区间实现不同的页面布局效果

断点名称	取值范围（vp）	设备描述
xs	[0, 320）	最小宽度类型设备。
sm	[320, 520)	小宽度类型设备。
md	[520, 840)	中等宽度类型设备。
lg	[840, +∞)	大宽度类型设备。

breakpoints自定义修改断点的取值范围

最多支持6个断点，（xs, sm, md, lg, xl, xxl）设备的布局设置。

breakpoints: {value: ['320vp', '520vp', '840vp', '1080vp']}0 -322 xs 320 - 520 sm 以此类推

columns 布局的总列数

GridRow({ columns: 12 }) 默认12列

direction 排列方向

可选值： Row RowReverse

GridRow({ direction: GridRowDirection.Row }){}

gutter 子组件间距

GridRow中通过gutter属性设置子元素在水平和垂直方向的间距。

 GridRow({ gutter: 10 }){}GridRow({ gutter: { x: 10, y: 10 } }){}俩种写法，上面的是等价的

子组件GridCol

GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设置属性两种方式，设置span（占用列数），offset（偏移列数），order（元素序号）的值。

span

let Gspan:Record<string,number> = { 'xs': 1, 'sm': 2, 'md': 3, 'lg': 4 }
GridCol({ span: 2 }){}
GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
GridCol(){}.span(2)
GridCol(){}.span(Gspan)

offset

栅格子组件相对于前一个子组件的偏移列数，默认为0。

order

栅格子组件的序号，决定子组件排列次序。当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件设置不同的order时，order较小的组件在前，较大的在后。

媒体查询 (@ohos.mediaquery)

跟传统的ccs媒体查询不同，它类似于js监听条件然后做出改变

语法：[媒体类型media-type] [媒体逻辑操作media-logic-operations] [媒体特征(media-feature)]

例如：

• screen and (round-screen: true) ：表示当设备屏幕是圆形时条件成立。

• (max-height: 800px) ：表示当高度小于等于800px时条件成立。

• (height <= 800px) ：表示当高度小于等于800px时条件成立。

• screen and (device-type: tv) or (resolution < 2) ：表示包含多个媒体特征的多条件复杂语句查询，当设备类型为tv或设备分辨率小于2时条件成立。

• (dark-mode: true) ：表示当系统为深色模式时成立。

import { mediaquery } from '@kit.ArkUI'; //引入媒体查询
@Entry
@Component
struct Index {@State color: string = '#DB7093';listener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(orientation: landscape)');//设置监听onPortrait(mediaQueryResult:mediaquery.MediaQueryResult) {if (mediaQueryResult.matches as boolean) { // 若设备为横屏状态，更改相应的页面布局this.color = '#FFD700';} else {this.color = '#DB7093';}}aboutToAppear() {// 绑定当前应用实例// 绑定回调函数this.listener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => {this.onPortrait(mediaQueryResult)});}aboutToDisappear() {// 解绑listener中注册的回调函数this.listener.off('change');}build() {Flex({}){Column().backgroundColor(this.color).width(100).height(100)}.height('100%').width('100%')}
}