OpenHarmony三方库组件：vlayout

最新推荐文章于 2024-07-09 20:42:41 发布
最新推荐文章于 2024-07-09 20:42:41 发布
阅读量955 收藏 10
点赞数 19
分类专栏： 鸿蒙三方库 鸿蒙 文章标签： harmonyos 鸿蒙 华为 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/situnanQAQ/article/details/139990539
版权

简介

vlayout能够处理列表、网格和其他布局在同一个视图的复杂情况，使用者可以使用已设定好的容器布局组件，也可以在此基础上自定义容器布局组件。

效果展示：

  1. BANNER_LAYOUT滑动容器布局组件

  2. COLUMN_LAYOUT栏格容器布局组件

  3. DEFAULT_LAYOUT默认容器布局组件

  4. FIX_LAYOUT固定容器布局组件

  5. FLOAT_LAYOUT浮动容器布局组件

  6. GRID_LAYOUT复杂网格容器布局组件

  7. LINEAR_LAYOUT列表容器布局组件

  8. ONEN_LAYOUT一拖N容器布局组件

  9. ONEN_EX_LAYOUT一拖N拓展容器布局组件

  10. RANGEGRID_LAYOUT区域网格容器布局组件

  11. SCROLL_FIX_LAYOUT滚动固定容器布局组件

  12. SINGLE_LAYOUT通栏容器布局组件

  13. STAGGEREDGRID_LAYOUT交错网格容器布局组件

  14. STICKY_LAYOUT吸顶容器布局组件

  15. 跳转item项位置

下载安装

  1. 参考安装教程 如何安装OpenHarmony ohpm包

  2. 安装命令如下：

    ohpm install @ohos/vlayout

使用说明

使用前言

1.通过ArkTS实现的vlayout与源库存在部分使用差异，在此会根据不同的容器组件来详细介绍基于openHarmony ArkTS实现的vlayout自定义容器组件的使用说明；

2.使用vlayout自定义容器组件需要给定最基本的三大要素：要显示的vLayoutContent布局内容、vLayoutData数据源以及vLayoutAttribute容器属性；

3.vlayout提供14种自定义容器组件，使用步骤主要分为两步：①导入需要使用的对应容器组件；②创建对应的容器组件对象并提供需要显示的布局内容；

4.局限性：

①vlayout建议在previewer屏宽720，屏高1280，DPI为240下进行预览；

②ArkTS原生Grid组件在无rowsTemplate属性的时候表示Grid可以进行内部滑动，但一旦嵌套在List中并且List能开始滑动之后grid的内部滑动就失效了；即List-ListItem存在滑动事件的时候，Grid的滑动事件就失效了；所以Grid可内部滑动的条件为设置宫格高并且ListItem不能可滑动，想要不内部滑动的条件为不设置宫格高度；

③GRID_LAYOUT存在合并单元格的功能，由于合并单元格需要对每一个单元格进行操作，故只能在数据源当中加入colsSpan的key来进行合并单元格；

④其中FLOAT_LAYOUT，FIX_LAYOUT，SCROLL_FIX_LAYOUT以及STICKY_LAYOUT在使用时，父容器必须使用Stack堆叠容器进行加载；

⑤在以下使用示例当中，当父容器为Column表明根布局可以为Column或是List等其他已有的基础容器；

⑥父容器建议的搭配为：Stack+List+ListItem或Scroll+Column；使用固定布局们，需使用Stack+List+ListItem的组合；

⑦宽度和高度是可显式提供的布局容器(仅当单提供layoutHeight高度属性时，同时给定的左右外边距才能生效)：BANNER_LAYOUT、SINGLE_LAYOUT、ONEN_LAYOUT、ONEN_EX_LAYOUT、FIX_LAYOUT、SCROLL_FIX_LAYOUT、STICKY_LAYOUT、FLOAT_LAYOUT；

⑧高度是计算出来的布局容器(个别无法显式提供高度，高度是由Builder内提供的组件计算出来的高度)：GRID_LAYOUT、RANGEGRID_LAYOUT、STAGGEREDGRID_LAYOUT、LINEAR_LAYOUT、DEFAULT_LAYOUT、COLUMN_LAYOUT；其中前四个可以显式提供布局高度，当布局高度小于Builder内提供的组件的总高时，可以进行内部滑动；

⑨使用者同时提供aspectRatio属性以及Builder里组件的高度的情况下，会出现布局异常，解决方案为：Builder内的height给定值为'100%'或给定由我们布局传出来的高度；

⑩具体使用demo请参考开源库sample页面的实现；

属性接口

1.在构建自定义容器组件时，必须给定以下属性

属性是否必填说明（不同布局组件存在不同的属性）
vLayoutContent是布局，使用@Builder构建自定义页面
vLayoutData: layoutDataType[],number[],string[]是数据源
vLayoutAttribute: Attributes是属性类型

2.vlayout通过声明的方式进行属性的设置，为了方便管理各个容器布局类的属性，以下为vLayoutAttribute属性类，均为非必填属性

export class GridAttributes {
  /*
   * GridLayoutHelper
   * RangeGridLayoutHelper
   */
  range?: Array<number> //可显示的条目，默认值为[0,数据源长度]
  spanCount?: number //列数，默认值为1
  weights?: Array<number> //列占比集合：数组元素数值约分为占比，默认值为[100]
  autoExpand?: boolean //余子项宽度自适应，当weights未定义时有效，且与colsSpan存在互斥关系，默认值为true
  aspectRatio?: number //GridItem的单行纵横比，默认值为0
  layoutHeight?: Length //Grid容器高度
  bgColor?: ResourceColor //Grid容器背景颜色，默认值为透明
  zIndex?: number //z序，默认值为0
  gap?: number //行列间距，默认值为0
  vGap?: number //行与行的间距，默认值为0
  hGap?: number //列与列的间距，默认值为0
  padding?: Length[] //内边距，默认值为[]，优先级比单给内边距高
  topPadding?: Length //上内边距，默认值为0
  rightPadding?: Length //右内边距，默认值为0
  bottomPadding?: Length //下内边距，默认值为0
  leftPadding?: Length //左内边距，默认值为0
  margin?: Length[] //外边距，默认值为[]，优先级比单给外边距高
  topMargin?: Length //上外边距，默认值为0
  rightMargin?: Length //右外边距，默认值为0
  bottomMargin?: Length //下外边距，默认值为0
  leftMargin?: Length //左外边距，默认值为0
}

export class StaggeredGridAttributes {
  /*
   * StaggeredGridLayoutHelper
   */
  range?: Array<number> //可显示的条目，默认值为[0,数据源长度]
  lanes?: number //列数，默认值为1
  bgColor?: ResourceColor //容器背景颜色，默认值为透明
  zIndex?: number //z序，默认值为0
  gap?: number //行列间距，默认值为0
  vGap?: number //行与行的间距，默认值为0
  hGap?: number //列与列的间距，默认值为0
  padding?: Length[] //内边距，默认值为[]，优先级比单给内边距高
  topPadding?: Length //上内边距，默认值为0
  rightPadding?: Length //右内边距，默认值为0
  bottomPadding?: Length //下内边距，默认值为0
  leftPadding?: Length //左内边距，默认值为0
  margin?: Length[] //外边距，默认值为[]，优先级比单给外边距高
  topMargin?: Length //上外边距，默认值为0
  rightMargin?: Length //右外边距，默认值为0
  bottomMargin?: Length //下外边距，默认值为0
  leftMargin?: Length //左外边距，默认值为0
}

export class AbstractFullFillAttributes {
  /*
   * SingleLayoutHelper
   * ColumnLayoutHelper
   * OnePlusNLayoutHelper
   * OnePlusNLayoutHelperEx
   */
  range?: Array<number> //可显示的条目，默认值为[0,数据源长度]
  rowWeights?: Array<number> //行权重，默认值为[]，仅OnePlusNLayoutHelper、OnePlusNLayoutHelperEx支持
  colWeights?: Array<number> //列权重，默认值为[]
  hasHeader?: boolean //第一个子项变成一行一列，默认值为false，仅OnePlusNLayoutHelper支持
  hasFooter?: boolean //最后一个子项变成一行一列，默认值为false，仅OnePlusNLayoutHelper支持
  layoutWidth?: Length //容器宽度
  layoutHeight?: Length //容器高度
  aspectRatio?: number //容器纵横比
  bgColor?: ResourceColor //容器背景颜色，默认值为透明
  zIndex?: number //z序，默认值为0
  padding?: Length[] //内边距，默认值为[]，优先级比单给内边距高
  topPadding?: Length //上内边距，默认值为0
  rightPadding?: Length //右内边距，默认值为0
  bottomPadding?: Length //下内边距，默认值为0
  leftPadding?: Length //左内边距，默认值为0
  margin?: Length[] //外边距，默认值为[]，优先级比单给外边距高
  topMargin?: Length //上外边距，默认值为0
  rightMargin?: Length //右外边距，默认值为0
  bottomMargin?: Length //下外边距，默认值为0
  leftMargin?: Length //左外边距，默认值为0
}

export class BannerAttributes {
  /*
   * BannerLayoutHelper
   */
  range?: Array<number> //可显示的条目，默认值为[0,数据源长度]
  layoutWidth?: Length //容器宽度
  layoutHeight?: Length //容器高度
  aspectRatio?: number //容器纵横比
  bgColor?: ResourceColor //容器背景颜色，默认值为透明
  layoutIndex?: number //设置当前在容器中显示的子组件的索引值，默认值为0
  layoutAutoPlay?: boolean //子组件是否自动播放，自动播放状态下，导航点不可操作，默认值为false
  layoutInterval?: number //使用自动播放时播放的时间间隔，单位为毫秒，默认值为1000
  layoutIndicator?: boolean //是否启用导航点指示器，默认值为false
  layoutLoop?: boolean //是否开启循环，默认值为false
  layoutDuration?: number //子组件切换的动画时长，单位为毫秒，默认值为400
  layoutVertical?: boolean //是否为纵向滑动，默认值为false
  layoutItemSpace?: number | string //设置子组件与子组件之间间隙，默认值为0
  layoutEffectMode?: EdgeEffect //滑动效果，默认值为None
  zIndex?: number //z序，默认值为0
  padding?: Length[] //内边距，默认值为[]，优先级比单给内边距高
  topPadding?: Length //上内边距，默认值为0
  rightPadding?: Length //右内边距，默认值为0
  bottomPadding?: Length //下内边距，默认值为0
  leftPadding?: Length //左内边距，默认值为0
  margin?: Length[] //外边距，默认值为[]，优先级比单给外边距高
  topMargin?: Length //上外边距，默认值为0
  rightMargin?: Length //右外边距，默认值为0
  bottomMargin?: Length //下外边距，默认值为0
  leftMargin?: Length //左外边距，默认值为0
}

export class LinearAttributes {
  /*
   * LinearLayoutHelper
   * DefaultLayoutHelper
   */
  range?: Array<number> //可显示的条目，默认值为[0,数据源长度]
  dividerHeight?: number | string //列表项垂直间距，默认值为0
  layoutHeight?: Length //容器高度
  aspectRatio?: number //ListItem的单行纵横比，默认值为0
  bgColor?: ResourceColor //容器背景颜色，默认值为透明
  zIndex?: number //z序，默认值为0
  padding?: Length[] //内边距，默认值为[]，优先级比单给内边距高
  topPadding?: Length //上内边距，默认值为0
  rightPadding?: Length //右内边距，默认值为0
  bottomPadding?: Length //下内边距，默认值为0
  leftPadding?: Length //左内边距，默认值为0
  margin?: Length[] //外边距，默认值为[]，优先级比单给外边距高
  topMargin?: Length //上外边距，默认值为0
  rightMargin?: Length //右外边距，默认值为0
  bottomMargin?: Length //下外边距，默认值为0
  leftMargin?: Length //左外边距，默认值为0
}

export enum AlignType {
  TOP_LEFT = 0,
  TOP_RIGHT = 1,
  BOTTOM_LEFT = 2,
  BOTTOM_RIGHT = 3
}

export class FixAreaAttributes {
  /*
   * FixLayoutHelper
   * ScrollFixLayoutHelper
   * StickyLayoutHelper
   * FloatLayoutHelper
   */
  range?: Array<number> //可显示的条目，默认值为[0,数据源长度]
  layoutWidth?: Length //容器宽度
  layoutHeight?: Length //容器高度，当容器纵横比为0时有效
  aspectRatio?: number //容器纵横比
  bgColor?: ResourceColor //容器背景颜色，默认值为透明
  xOffset?: Length //水平偏移量，默认值为0，只有StickyLayoutHelper不支持
  yOffset?: Length //竖直偏移量，默认值为0，只有StickyLayoutHelper不支持
  alignType?: AlignType //固定的位置，只有StickyLayoutHelper不支持，优先级比单给xy高，FloatLayoutHelper中与defaultLocation进行累加
  sketchMeasure?: boolean //宽度占满屏幕，只有FixLayoutHelper, ScrollFixLayoutHelper支持
  stickyStart?: boolean //true：吸顶，false：吸底，只有StickyLayoutHelper支持
  defaultLocation?: number[] //默认位置，只有FloatLayoutHelper支持，优先级比单给xy高，与alignType进行累加
  zIndex?: number //z序，默认值为0
  padding?: Length[] //内边距，默认值为[]，优先级比单给内边距高
  topPadding?: Length //上内边距，默认值为0
  rightPadding?: Length //右内边距，默认值为0
  bottomPadding?: Length //下内边距，默认值为0
  leftPadding?: Length //左内边距，默认值为0
  margin?: Length[] //外边距，默认值为[]，优先级比单给外边距高
  topMargin?: Length //上外边距，默认值为0
  rightMargin?: Length //右外边距，默认值为0
  bottomMargin?: Length //下外边距，默认值为0
  leftMargin?: Length //左外边距，默认值为0
}

export class dataType {
  layoutData: number[] | layoutDataType[] | string[] = []
  rowsTemplate?: string[] = []
}

export class layoutDataType {
  layoutText: number | string = 0
  colsSpan?: number = 0
  layoutColor?: string = '#FF0000'
  layoutWeight?: number = 1
  textSize?: number = 25
  textColor?: string = '#999999'
  bgColor?: string = '#CFCFCF'
  top?: number = 0
  left?: number = 0
  tag?: string = ''
}

GRID_LAYOUT宫格容器布局组件的使用

1.导入GRID_LAYOUT容器

import { GRID_LAYOUT } from '@ohos/vlayout'

2.创建GRID_LAYOUT对象并提供需要显示的布局内容

@Builder gridLayoutContent(item: layoutDataType, position: number, gridItemHeight: number) {
 Text(`${item.layoutText}`)
   .width('100%')
   .height(200)
   .backgroundColor(0x33EEEEEE)
   .border({ width: 1, color: '#000000', radius: 0, style: BorderStyle.Solid })
   .fontColor(0x999999)
   .fontSize(50)
   .fontWeight(FontWeight.Bold)
   .textAlign(TextAlign.Center)
   .onClick(() => {
     console.info('position = ' + position)
   })
}

build() {
 Column() {
   GRID_LAYOUT({
     vLayoutContent: (item: layoutDataType, position: number, gridItemHeight: number) => {
       this.gridLayoutContent(item, position, gridItemHeight)
     },
     vLayoutData: [
       { layoutText: 1 }, { layoutText: 2 }, { layoutText: 3 }, { layoutText: 4 },
       { layoutText: 5 }, { layoutText: 6 }, { layoutText: 7 }, { layoutText: 8 },
     ],
     vLayoutAttribute: {
       range: [0, 7],
       spanCount: 3,
       weights: [25, 25],
       layoutHeight: 300,
       bgColor: Color.Pink,
       gap: 10,
       padding: [10, 10, 10, 10],
       margin: [10, 10, 10, 10],
     }
   })
 }
}

RANGEGRID_LAYOUT区域宫格容器布局组件的使用

1.导入RANGEGRID_LAYOUT容器

import { RANGEGRID_LAYOUT } from '@ohos/vlayout'

2.创建RANGEGRID_LAYOUT对象并提供需要显示的布局内容

@Builder rangeGridLayoutContent(item: layoutDataType, position: number, gridItemHeight: number) {
  Column() {
    Text(`${item.layoutText}`)
      .width('100%')
      .height('100%')
      .backgroundColor(0x22EEEEEE)
      .border({ width: 1, color: '#000000', radius: 0, style: BorderStyle.Solid })
      .fontColor('#999999')
      .fontSize(25)
      .fontWeight(FontWeight.Bold)
      .maxLines(1)
      .textAlign(TextAlign.Center)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .onClick(() => {
        console.info('position = ' + position)
      })
  }
  .backgroundColor(item.bgColor)
  .padding(5)
  .margin({
    top: position == 4 || position == 5 || position == 8 || position == 9 ? 5 : 0,
    right: position == 5 || position == 7 || position == 9 || position == 11 ? 10 : 0,
    bottom: position == 6 || position == 7 || position == 10 || position == 11 ? 5 : 0,
    left: position == 4 || position == 6 || position == 8 || position == 10 ? 10 : 0
  })
}

build() {
  Column() {
    RANGEGRID_LAYOUT({
      vLayoutContent: (item: layoutDataType, position: number, gridItemHeight: number) => {
        this.rangeGridLayoutContent(item, position, gridItemHeight)
      },
      vLayoutData: [
        { layoutText: 1 },
        { layoutText: 2 },
        { layoutText: 3 },
        { layoutText: 4 },
        { layoutText: 5, colsSpan: 2, bgColor: '#FF0000' },
        { layoutText: 6, colsSpan: 2, bgColor: '#FF0000' },
        { layoutText: 7, colsSpan: 2, bgColor: '#FF0000' },
        { layoutText: 8, colsSpan: 2, bgColor: '#FF0000' },
        { layoutText: 9, colsSpan: 2, bgColor: '#FFFF00' },
        { layoutText: 10, colsSpan: 2, bgColor: '#FFFF00' },
        { layoutText: 11, colsSpan: 2, bgColor: '#FFFF00' },
        { layoutText: 12, colsSpan: 2, bgColor: '#FFFF00' },
        { layoutText: 13 },
        { layoutText: 14 },
        { layoutText: 15 },
        { layoutText: 16 },
      ],
      vLayoutAttribute: {
        spanCount: 4,
        weights: [20, 26.6, 26.6, 26.6],
        aspectRatio: 4,
        bgColor: '#00FF00',
        padding: [10, 10, 10, 10],
        margin: [10, 10, 10, 10]
      }
    })
  }
}

STAGGEREDGRID_LAYOUT瀑布流容器布局组件的使用

1.导入STAGGEREDGRID_LAYOUT容器

import { STAGGEREDGRID_LAYOUT } from '@ohos/vlayout'

2.创建STAGGEREDGRID_LAYOUT对象并提供需要显示的布局内容

@Builder staggeredGridLayoutContent(item: layoutDataType, position: number) {
  if (position % 2 == 0) {
    Text(`${item.layoutText}`)
      .width('100%')
      .height(220)
      .backgroundColor('#33EEEEEE')
      .border({ width: 1, color: '#000000', radius: 0, style: BorderStyle.Solid })
      .fontColor('#999999')
      .fontSize(25)
      .fontWeight(FontWeight.Bold)
      .textAlign(TextAlign.Center)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .onClick(() => {
        console.info('position = ' + position + ', item = ' + JSON.stringify(item))
      })
  } else {
    Text(`${item.layoutText}`)
      .width('100%')
      .height(150)
      .backgroundColor('#33EEEEEE')
      .border({ width: 1, color: '#000000', radius: 0, style: BorderStyle.Solid })
      .fontColor('#999999')
      .fontSize(25)
      .fontWeight(FontWeight.Bold)
      .textAlign(TextAlign.Center)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      .onClick(() => {
        console.info('position = ' + position + ', item = ' + JSON.stringify(item))
      })
  }
}

build() {
  Column() {
    STAGGEREDGRID_LAYOUT({
      vLayoutContent: (item: layoutDataType, position: number) => {
        this.staggeredGridLayoutContent(item, position)
      },
      vLayoutData: [
        { layoutText: 1 },
        { layoutText: 2 },
        { layoutText: 3 },
        { layoutText: 4 },
        { layoutText: 5 },
        { layoutText: 6 },
        { layoutText: 7 },
        { layoutText: 8 },
        { layoutText: 9 },
        { layoutText: 10 },
      ],
      vLayoutAttribute: {
        range: [0, 8],
        lanes: 3,
        gap: 10,
        bgColor: Color.Pink,
        padding: [10, 10, 10, 10],
        margin: [10, 10, 10, 10],
      },
      vLayoutId: 'STAGGERED'
    })
  }
}

COLUMN_LAYOUT栏格容器布局组件的使用

1.导入COLUMN_LAYOUT容器

import { COLUMN_LAYOUT } from '@ohos/vlayout'

2.创建COLUMN_LAYOUT对象并提供需要显示的布局内容

@Builder columnLayoutContent(item: layoutDataType, position: number | undefined, layoutHeight: number | undefined) {
  Text(`${item.layoutText}`)
    .width('100%')
    .height(100)
    .backgroundColor(0x22EEEEEE)
    .border({ width: 1, color: '#000000', radius: 0, style: BorderStyle.Solid })
    .fontSize(25)
    .fontColor('#999999')
    .fontWeight(FontWeight.Bold)
    .textAlign(TextAlign.Center)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .onClick(() => {
      console.info('position = ' + position)
    })
}

build() {
  Column() {
    COLUMN_LAYOUT({
      vLayoutContent: (item: layoutDataType, position: number | undefined, layoutHeight: number | undefined) => {
        this.columnLayoutContent(item, position, layoutHeight)
      },
      vLayoutData: [
        { layoutText: 1 },
        { layoutText: 2 },
        { layoutText: 3 },
        { layoutText: 4 },
        { layoutText: 5 },
      ],
      vLayoutAttribute: {
        bgColor: Color.Pink,
        colWeights: [30, 20, 20],
        padding: [10, 10, 10, 10],
        margin: [10, 10, 10, 10],
      }
    })
  }
}

SINGLE_LAYOUT通栏容器布局组件的使用

1.导入SINGLE_LAYOUT容器

import { SINGLE_LAYOUT } from '@ohos/vlayout'

2.创建SINGLE_LAYOUT对象并提供需要显示的布局内容

@Builder singleLayoutContent(item: layoutDataType, position: number) {
  Text(`${item}`)
    .width('100%')
    .height('100%')
    .backgroundColor(0x22EEEEEE)
    .border({ width: 1, color: '#000000', radius: 0, style: BorderStyle.Solid })
    .fontSize(25)
    .fontColor('#999999')
    .fontWeight(FontWeight.Bold)
    .maxLines(1)
    .textAlign(TextAlign.Center)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .onClick(() => {
      console.info('position = ' + position)
    })
}

build() {
  Column() {
    SINGLE_LAYOUT({
      vLayoutContent: (item: layoutDataType, position: number | undefined) => {
        this.singleLayoutContent(item, position)
      },
      vLayoutData: ['SINGLE'],
      vLayoutAttribute: {
        layoutHeight: 70,
        bgColor: Color.Blue,
        topMargin: 5,
        bottomMargin: 90,
      }
    })
  }
}

ONEN_LAYOUT一拖N容器布局组件的使用

1.导入ONEN_LAYOUT容器

import { ONEN_LAYOUT }from '@ohos/vlayout'

2.创建ONEN_LAYOUT对象并提供需要显示的布局内容

@Builder onenLayoutContent(item: layoutDataType) {
  Text(`${item.layoutText}`)
    .width('100%')
    .height('100%')
    .backgroundColor(0x22EEEEEE)
    .border({ width: 1, color: '#000000', radius: 0, style: BorderStyle.Solid })
    .fontSize(25)
    .fontColor('#999999')
    .fontWeight(FontWeight.Bold)
    .textAlign(TextAlign.Center)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .onClick(() => {
  	  console.info('item = ' + JSON.stringify(item))
	})
}

build() {
  Column() {
    ONEN_LAYOUT({
      vLayoutContent: (item: layoutDataType) => {
        this.onenLayoutContent(item)
      },
      vLayoutData: [1, 2, 3, 4, 5],
      vLayoutAttribute: {
        rowWeights: [10, 20],
        colWeights: [100, 20, 30, 40, 10],
        hasHeader: true,
        hasFooter: false,
        layoutHeight: 200,
        bgColor: Color.Pink,
        padding: [5, 5, 5, 5],
        margin: [5, 15, 5, 15],
      }
    })
  }
}

ONEN_EX_LAYOUT一拖N拓展容器布局组件的使用

1.导入ONEN_EX_LAYOUT容器

import { ONEN_EX_LAYOUT }from '@ohos/vlayout'

2.创建ONEN_EX_LAYOUT对象并提供需要显示的布局内容

@Builder onenExLayoutContent(item: layoutDataType) {
  Text(`${item.layoutText}`)
    .width('100%')
    .height('100%')
    .backgroundColor('#33EEEEEE')
    .border({ width: 1, color: '#000000', radius: 0, style: BorderStyle.Solid })
    .fontColor('#999999')
    .fontSize(25)
    .fontWeight(FontWeight.Bold)
    .textAlign(TextAlign.Center)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .onClick(() => {
      console.info('item = ' + JSON.stringify(item))
    })
}

build() {
  Column() {
    ONEN_EX_LAYOUT({
      vLayoutContent: (item: layoutDataType) => {
        this.onenExLayoutContent(item)
      },
      vLayoutData: [1, 2, 3, 4, 5, 6],
      vLayoutAttribute: {
        rowWeights: [10, 20],
        colWeights: [40, 45, 15, 10, 30, 30],
        layoutHeight: 200,
        bgColor: Color.Pink,
        padding: [5, 5, 5, 5],
        margin: [5, 15, 5, 15],
      }
    })
  }
}

BANNER_LAYOUT滑动容器布局组件的使用

1.导入BANNER_LAYOUT容器

import { BANNER_LAYOUT }from '@ohos/vlayout'

2.创建BANNER_LAYOUT对象并提供需要显示的布局内容

@Builder bannerLayoutContent(item: layoutDataType, position: number) {
  Text('Banner:' + item)
    .width('100%')
    .height('100%')
    .backgroundColor(0x22EEEEEE)
    .border({ width: 1, color: '#000000', radius: 0, style: BorderStyle.Solid })
    .fontSize(20)
    .fontColor('#999999')
    .fontWeight(FontWeight.Bold)
    .maxLines(1)
    .textAlign(TextAlign.Center)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .onClick(() => {
      console.info('position = ' + position)
    })
}

build() {
  Column() {
    BANNER_LAYOUT({
      vLayoutContent: (item: layoutDataType, position: number | undefined) => {
        this.bannerLayoutContent(item, position)
      },
      vLayoutData: [0, 1, 2, 3, 4, 5],
      vLayoutAttribute: {
        aspectRatio: 4,
        bgColor: Color.Pink,
        padding: [10, 10, 10, 10],
        margin: [10, 0, 10, 0],
      },
    })
  }
}

LINEAR_LAYOUT列表容器布局组件的使用

1.导入LINEAR_LAYOUT容器

import { LINEAR_LAYOUT }from '@ohos/vlayout'

2.创建LINEAR_LAYOUT对象并提供需要显示的布局内容

@Builder linearLayoutContent(item: layoutDataType, position: number) {
  Text(`${item}`)
    .width('100%')
    .height('100%')
    .backgroundColor(0x22EEEEEE)
    .border({ width: 1, color: '#000000', radius: 0, style: BorderStyle.Solid })
    .fontSize(25)
    .fontColor('#999999')
    .fontWeight(FontWeight.Bold)
    .maxLines(1)
    .textAlign(TextAlign.Center)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .onClick(() => {
      console.info('position = ' + position)
    })
}

build() {
  Column() {
    LINEAR_LAYOUT({
      vLayoutContent: (item: layoutDataType, position: number | undefined) => {
        this.linearLayoutContent(item, position)
      },
      vLayoutData: [0, 1, 2, 3, 4, 5, 6],
      vLayoutAttribute: {
        dividerHeight: 10,
        aspectRatio: 4,
        layoutHeight: 500,
        bgColor: Color.Pink,
        padding: [10, 10, 10, 10],
        margin: [10, 10, 10, 10],
      },
    })
  }
}

DEFAULT_LAYOUT默认线性容器布局组件的使用

1.导入DEFAULT_LAYOUT容器

import { DEFAULT_LAYOUT }from '@ohos/vlayout'

2.创建DEFAULT_LAYOUT对象并提供需要显示的布局内容

@Builder defaultLayoutContent(item: layoutDataType, position: number | undefined) {
  Text(`${item}`)
    .width('100%')
    .height('100%')
    .backgroundColor(position % 2 == 0 ? '#aa00ff00' : '#ccff00ff')
    .border({ width: 0, color: '#000000', radius: 0, style: BorderStyle.Solid })
    .fontColor(0x000000)
    .fontSize(18)
    .fontWeight(FontWeight.Normal)
    .textAlign(TextAlign.Start)
    .align(Alignment.TopStart)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .onClick(() => {
      console.info('position = ' + position)
    })
}

build() {
  Column() {
    DEFAULT_LAYOUT({
      vLayoutContent: (item: layoutDataType, position: number | undefined) => {
        this.defaultLayoutContent(item, position)
      },
      vLayoutData: [0, 1, 2, 3, 4, 5],
      vLayoutAttribute: {
        dividerHeight: 5,
        aspectRatio: 4,
        margin: [5, 5, 5, 5],
      }
    })
  }
}

FLOAT_LAYOUT浮动容器布局组件的使用

1.导入FLOAT_LAYOUT容器

import { FLOAT_LAYOUT } from '@ohos/vlayout'

2.创建FLOAT_LAYOUT对象并提供需要显示的布局内容，由于浮动组件需要在父容器进行叠层显示，所以推荐使用Stack为根布局

enum AlignType {
  TOP_LEFT = 0,
  TOP_RIGHT = 1,
  BOTTOM_LEFT = 2,
  BOTTOM_RIGHT = 3
}

@Builder floatLayoutContent(item: layoutDataType, position: number) {
  Text(`${item}`)
    .width('100%')
    .height('100%')
    .textAlign(TextAlign.Center)
    .border({ width: 1, color: '#000000', radius: 0, style: BorderStyle.Solid })
}

build() {
  Stack() {
    Text('TEXT')
    
    FLOAT_LAYOUT({
      vLayoutContent: (item: layoutDataType, position: number | undefined) => {
        this.floatLayoutContent(item, position)
      },
      vLayoutData: ['FLOAT'],
      vLayoutAttribute: {
        layoutWidth: 150,
        layoutHeight: 150,
        bgColor: Color.Pink,
        defaultLocation: [-50, -150],
        alignType: AlignType.BOTTOM_RIGHT,
      }
    })
  }
}

FIX_LAYOUT固定容器布局组件的使用

1.导入FIX_LAYOUT容器

import { FIX_LAYOUT } from '@ohos/vlayout'

2.创建FIX_LAYOUT对象并提供需要显示的布局内容，由于固定组件需要在父容器进行叠层显示，所以推荐使用Stack为根布局

enum AlignType {
  TOP_LEFT = 0,
  TOP_RIGHT = 1,
  BOTTOM_LEFT = 2,
  BOTTOM_RIGHT = 3
}

@Builder fixLayoutContent(item: layoutDataType, position: number) {
  Text(`${item}`)
    .width('100%')
    .height('100%')
    .backgroundColor(0x22EEEEEE)
    .border({ width: 1, color: '#000000', radius: 0, style: BorderStyle.Solid })
    .fontSize(25)
    .fontColor('#999999')
    .fontWeight(FontWeight.Bold)
    .textAlign(TextAlign.Center)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .onClick(() => {
      console.info('position = ' + position)
    })
}

build() {
  Stack() {
    Text('TEXT')
    FIX_LAYOUT({
      vLayoutContent: (item: layoutDataType, position: number | undefined) => {
        this.fixLayoutContent(item, position)
      },
      vLayoutData: ['FIX'],
      vLayoutAttribute: {
        layoutWidth: 100,
        layoutHeight: 100,
        sketchMeasure: false,
        bgColor: Color.Pink,
        alignType: AlignType.TOP_RIGHT,
      }
    })
  }
}

SCROLL_FIX_LAYOUT滚动固定容器布局组件的使用

1.导入SCROLL_FIX_LAYOUT容器

import { SCROLL_FIX_LAYOUT }from '@ohos/vlayout'

2.创建SCROLL_FIX_LAYOUT对象并提供需要显示的布局内容，由于滑动固定组件需要在父容器进行叠层显示并且需要在父容器滑动至某一位置之后出现，所以推荐使用Stack为根布局，并且在父容器中进行实现该效果，且必须与JumpBar进行连用

enum AlignType {
  TOP_LEFT = 0,
  TOP_RIGHT = 1,
  BOTTOM_LEFT = 2,
  BOTTOM_RIGHT = 3
}

@Builder scrollFixLayoutContent(item: layoutDataType, position: number | undefined) {
  Text(`${item}`)
    .width('100%')
    .height('100%')
    .backgroundColor(0x22EEEEEE)
    .border({ width: 1, color: '#000000', radius: 0, style: BorderStyle.Solid })
    .fontSize(25)
    .fontColor(0x999999)
    .fontWeight(FontWeight.Bold)
    .textAlign(TextAlign.Center)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .onClick(() => {
      console.info('position = ' + position)
    })
}

build() {
  Stack({ alignContent: Alignment.Bottom }) {
    SCROLL_FIX_LAYOUT({
      vLayoutContent: (item: layoutDataType, position: number | undefined) => {
        this.scrollFixLayoutContent(item, position)
      },
      vLayoutData: [7],
      vLayoutAttribute: {
        layoutWidth: 15,
        layoutHeight: 25,
        bgColor: '#ccff00ff',
        xOffset: '85%',
        yOffset: '5%',
      }
    })
  }
}

STICKY_LAYOUT吸顶吸底容器布局组件的使用

1.导入STICKY_LAYOUT容器

import { STICKY_LAYOUT } from '@ohos/vlayout'

2.创建STICKY_LAYOUT对象并提供需要显示的布局内容，由于吸顶组件需要在父容器进行叠层显示并且需要在父容器滑动至某一位置之后吸顶或吸底，所以推荐使用Stack加List-ListItem为根布局，并且在父容器中进行实现该效果

@Builder stickyLayoutContent(item: layoutDataType, position: number) {
  Text(`${item}`)
    .width('100%')
    .height('100%')
    .backgroundColor(0x22EEEEEE)
    .border({ width: 1, color: '#000000', radius: 0, style: BorderStyle.Solid })
    .fontSize(25)
    .fontColor('#999999')
    .fontWeight(FontWeight.Bold)
    .textAlign(TextAlign.Center)
    .textOverflow({ overflow: TextOverflow.Ellipsis })
    .onClick(() => {
      console.info('position = ' + position)
    })
}

build() {
  List() {
    ListItem() {
      STICKY_LAYOUT({
        vLayoutContent: (item: layoutDataType, position: number | undefined) => {
          this.stickyLayoutContent(item, position)
        },
        vLayoutData: ['STICKY'],
        vLayoutAttribute: {
          aspectRatio: 4,
          bgColor: '#22EEEEEE',
        }
      })
    }.sticky(Sticky.Normal)
  }.edgeEffect(EdgeEffect.None)
}

约束与限制

在下述版本验证通过：

  • DevEco Studio 版本： 4.1 Canary(4.1.3.317)

  • OpenHarmony SDK:API11 (4.1.0.36)

目录结构

|---- vlayout  
|     |---- entry  # 示例代码文件夹
|     |---- library  # vlayout库文件夹
|           |---- index.ets  # 对外接口
|           |---- src
|		|---- main
|			|---- ets
|				|---- components
|					|---- common  # 组件文件夹
|						|---- BannerLayoutHelper.ets  # 滑动容器布局组件
|						|---- ColumnLayoutHelper.ets  # 横向容器布局组件
|						|---- DefaultLayoutHelper.ets  # 默认线性容器布局组件
|						|---- FixLayoutHelper.ets  # 固定容器布局组件
|						|---- FloatLayoutHelper.ets  # 浮动容器布局组件
|						|---- GridLayoutHelper.ets  # 宫格容器布局组件
|						|---- JumpBar.ets  # 跳转功能栏
|						|---- LinearLayoutHelper.ets  # 列表容器布局组件
|						|---- OnePlusNLayoutHelper.ets  # 一拖多容器布局组件
|						|---- OnePlusNLayoutHelperEx.ets  # 一拖多拓展容器布局组件
|						|---- RangeGridLayoutHelper.ets  # 区域宫格容器布局组件
|						|---- ScrollFixLayoutHelper.ets  # 滚动固定容器布局组件
|						|---- SingleLayoutHelper.ets  # 单项容器布局组件
|						|---- StaggeredGridLayoutHelper.ets  # 瀑布流容器布局组件
|						|---- StickyLayoutHelper.ets  # 吸顶吸底容器布局组件
|					|---- core  # 属性文件夹
|						|---- VLayoutAttributes.ets  # 容器布局组件的属性
|     |---- README.md  # 安装使用方法

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

司徒南QAQ
关注
  • 19
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android阿里巴巴推出RecyclerView得扩展库vlayout
03-26
这时，阿里巴巴团队推出的vlayout扩展库就显得尤为重要。 vlayout库是专门为RecyclerView设计的一套强大的布局管理器，它基于FlowLayout和GridLayoutManager，提供了更丰富的布局类型，如瀑布流、宫格等。vlayout的...
vlayout的示例代码
08-10
Vlayout是阿里巴巴开源的一款强大的布局管理器，专为Android平台设计，主要用于解决在RecyclerView中复杂的布局排列问题。它扩展了Android的RecyclerView，提供了更高效、更灵活的布局解决方案，尤其适用于构建类似...
android vlayout 阿里,Android阿里巴巴推出RecyclerView得扩展库vlayout
weixin_29013129的博客
05-27 413
效果图： 项目结构： 引用库// gradlecompile ('com.alibaba.android:vlayout:1.0.1@aar') {transitive = true}MainActivity中package android.zhh.com.myvlayout;import android.app.Activity;import android.graphics.Rect;impo...
Android UI 阿里VLayout使用
初心一点的专栏
05-02 1442
Android UI 阿里VLayout使用 开源地址(2017.03开源)：https://github.com/alibaba/vlayout/ VirtualLayout是一个针对RecyclerView的LayoutManager扩展, 主要提供一整套布局方案和布局间的组件复用 可以很方便的利用VLayout来实现 淘宝首页 类似的复杂布局 首先我们先学会使用VLayout 首先导入 ...
使用Alibaba开源库vLayout实现淘宝首页
One X的博客
01-04 6549
按照自己之前写简书的习惯，先上效果图：(图片素材来自于淘宝手机客户端) 在研究具体的使用的时候，先看看官方对于vLayout 的介绍和使用方法： vLayout的官方地址： https://github.com/alibaba/vlayout 官方的介绍： 通过定制化的LayoutManager，接管整个RecyclerView的布局逻辑；LayoutManager管理了一系列L
JetPack知识点实战系列七：vlayout嵌套横向RecyclerView和Banner 实现主页的展示，自定义Moshi的JsonAdapter
lcl130的专栏
09-24 1260
本节教程我们来实现云音乐的主页展示，实现的效果如下图所示: 本节内容您将学习到如下内容： vlayout的介绍 vlayout嵌套横向RecyclerView的使用 Banner三方库的简单使用 自定义Moshi的JsonAdapter来解析同一个字段不同的数据类型的数据 vlayout架构分析 vlayout是RecyclerView的LayoutManager扩展库，VirtualLayoutManager这个类负责RecyclerView的UI布局。继承于RecyclerView.Adapter
vlayout:RecyclerView 的 LayoutManager 扩展-开源
07-07
vlayout 自定义了一个 VirtualLayoutManager，它继承自 LinearLayoutManager 并引入了 LayoutHelper 虚拟布局管理器管理一系列的 layouthelper，并赋予 LayoutHelper 特定的布局能力。 每个 LayoutHelper 都提供了一...
VLayout实例
03-28
VLayout是阿里巴巴开源的一款高效的Android布局管理器，它在ListView、RecyclerView等滚动视图...通过学习和实践VLayout实例，你可以更好地理解和掌握这一高效布局库的用法，为你的Android应用开发带来显著的性能提升。
Android阿里布局框架VLayout
04-02
Android阿里布局框架VLayout，该框架提供一系列基本单元布局，通过快速拼装就能搭建出一个具备多种布局的页面，就像使用七巧板 通过现有板块 快速拼凑出 多样的形状一样。 在性能方面，希望 贴近Native开发，重点：...
鸿蒙语言基础类库：【@ohos.util.ArrayList (线性容器ArrayList)】
最新发布
2301_76813281的博客
07-09 496
本模块首批接口从API version 8开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。点击或者复制转到。ArrayList是一种线性数据结构，底层基于数组实现。ArrayList会根据实际需要动态调整容量，每次扩容增加50%。ArrayList和[Vector]相似，都是基于数组实现。它们都可以动态调整容量，但Vector每次扩容增加1倍。ArrayList和[LinkedList]相比，ArrayList的随机访问效率更高。
鸿蒙NEXT
2301_81771576的博客
06-29 1830
据了解，除了已经公开亮相华为开发者大会的腾讯视频、腾讯新闻、QQ 浏览器、搜狗输入法、腾讯自选股、QQ音乐、酷狗音乐、酷我音乐、全民K歌、懒人听书、起点读书外，腾讯旗下多款产品已在进行鸿蒙系统的开发适配工作，希望尽快保障用户平滑、安全、稳定地过渡到新系统。其次就是，鸿蒙NEXT针对一些基础、高频、创新的场景， 通过 API、控件等方式向第三方应用开放如实时朗读、智能荐图、自动填写、图文翻译、OCR 服务识别推荐、主体抠图、人脸检测、卡证识别等能力，和开发者共同打造生态级的鸿蒙原生智能。
加入运动健康数据开放平台，共赢鸿蒙未来
HarmonyOS SDK闭源开放能力技术团队
07-05 985
优质应用服务联合三方设备，结合运动健康服务提供的运动健康数据服务，共同打造"智能运动健康设备+华为终端+应用服务"生态，为用户带来安全、智慧、便捷的运动健康体验。华为运动健康开放平台提供了多种形式的开放能力，支持应用生态开放能力和设备接入开放能力。提供丰富的运动健康类的API，支持多种运动类型和健康数据的应用开发准备，如步数、心率等。
HarmonyOS APP应用开发项目- MCA助手（Day02持续更新中~）
Varin
06-30 896
鸿蒙APP开发是指在华为的HarmonyOS平台上构建应用程序的过程，它利用华为提供的DevEco Studio集成开发环境（IDE）以及一套丰富的API库，支持Java、JavaScript等语言，采用组件化和模块化设计原则。开发者可以通过创建Ability和Particle组件，构建具有分布式能力的应用，实现一次开发，多端部署的目标，让应用能够在手机、平板、穿戴设备、智能家电等不同设备之间无缝流转，提供统一的用户体验和强大的跨设备协同能力。鸿蒙APP开发旨在简化开发流程，降低开发成本，同时增强应用的安全
鸿蒙语言基础类库：【@ohos.util (util工具函数)】
2301_76813281的博客
07-09 648
本模块首批接口从API version 7开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。点击或者复制转到。该模块主要提供常用的工具函数，实现字符串编解码（TextEncoder，TextDecoder）、有理数运算（RationalNumber）、缓冲区管理（LruBuffer）、范围判断（Scope）、Base64编解码（Base64）、内置对象类型检查（Types）等功能。
【HarmonyOS NEXT】鸿蒙线程安全容器集collections.Array
wu1004019946的博客
07-08 1144
从ArkTS Array中移除并返回最后一个元素。对Array中的每个元素执行提供的回调函数，并返回一个新的Array，该Array包含回调函数的结果。返回Array中第一个满足指定测试函数的元素的值，如果所有元素都不满足，则返回undefined。返回一个新的ConcatArray，该ConcatArray是原始ConcatArray的切片。返回Array中第一个满足指定测试函数的元素的索引，如果所有元素都不满足，则返回-1。返回一个新的Array，该Array是原始ArkTS Array的切片。
【鸿蒙学习笔记】使用动画
张紫娃的博客
07-09 278
/ 第一步：使用@AnimatableExtend装饰器，自定义可动画属性接口@Entry@Componentbuild() {Row() {Text("点击我").backgroundColor(Color.Pink).width(300).height(140).textAlign(TextAlign.Center)30 : 20;})
HarmonyOS应用开发前景及使用工具
Crowd_chips的博客
07-07 325
学习之前，需要有一定的开发基础（如：java、c#、c++、WEB前端的一些了解)。HarmonyOS开发使用的ArkTS，ArkTS是在TS的基础之上进行封装的，而TS是由JS进行封装起来的，因此需要先熟悉thml,CSS,JS等相关知识。
HarmonyOS Next系列之Echarts图表组件（折线图、柱状图、饼图等)实现（八）
pixle的博客
07-03 895
HarmonyOS Next（基于API11）实现Echarts图表组件（折线图、柱状图、饼图等)。
vlayout->addStretch();记过
06-07
这行代码的作用是在 QVBoxLayout 中添加一个伸缩项，它会拉长 QVBoxLayout，使得布局中的其他部件（如 QPushButton、QLabel 等）在垂直方向上尽可能地均匀分布。当 QVBoxLayout 的大小发生变化时，伸缩项会自动调整...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值