HarmonyOS ArkUI(基于ArkTS) 开发布局 （上）
四 层叠布局 (Stack)
层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。
层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等
css
@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
css
@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）设备的布局设置。
css
breakpoints: {value: ['320vp', '520vp', '840vp', '1080vp']}
0 -322 xs 320 - 520 sm 以此类推columns 布局的总列数
GridRow({ columns: 12 }) 默认12列
direction 排列方向
可选值： Row RowReverse
css
GridRow({ direction: GridRowDirection.Row }){}gutter 子组件间距
GridRow中通过gutter属性设置子元素在水平和垂直方向的间距。
css
GridRow({ gutter: 10 }){}
GridRow({ gutter: { x: 10, y: 10 } }){}
俩种写法，上面的是等价的子组件GridCol
GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设置属性两种方式，设置span（占用列数），offset（偏移列数），order（元素序号）的值。
span
css
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) ：表示当系统为深色模式时成立。
css
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%')
}
}