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%')
}
} https://i-blog.csdnimg.cn/direct/e2a483f170624e528aebcab51af28887.png
后一个元素会覆盖前一个元素，有点类似于小时间玩过的套娃娃，是不是很有趣？
alignContent 对齐方式
一共九种，Top Bottom Start End Center TopStart TopEnd BottomStart BottomEnd
Stack({ alignContent: Alignment.样式 })
https://i-blog.csdnimg.cn/direct/74f013f76d574d468ba89dbec20f1b28.png
zIndex 设置层级
子元素(){}.zIndex( 5) 层级越高优先级越高，同级背面元素比前面元素高
五 弹性布局 (Flex)
根本等价于css中的flex了
direction 布局方向
Flex({ direction: FlexDirection.Row }) 除了Row还可以是RowReverse Column ColumnReverse
https://i-blog.csdnimg.cn/direct/fefce65ff92b473e866f2ae35249f6c8.pnghttps://i-blog.csdnimg.cn/direct/e4b0fc7a556147b682e2a3ea32da65b6.png
https://i-blog.csdnimg.cn/direct/9009af3aed6f40e4902c34d685d6b6d8.pnghttps://i-blog.csdnimg.cn/direct/bd05ba6159f94017b4792f2ae03f2bc0.png
@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})
https://i-blog.csdnimg.cn/direct/5a235e038b6d4d0f820da12eca89dbab.png
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最小宽度范例设备。sm小宽度范例设备。md中等宽度范例设备。lg大宽度范例设备。 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%')
}
} https://i-blog.csdnimg.cn/direct/b62c528d650943c780b21cd9c2276aaa.gif
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]