当前位置：首页 > article >正文

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

article 2024/11/17 0:00:12

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%')

  }
}