流式布局（FlowLayout）

简介

流式布局（FlowLayout）是一款用于实现流式布局的组件，支持水平与垂直方向的布局，同时也支持RTL布局方向。本库基于FlowLayout原库进行适配，以确保其能够在OpenHarmony系统上运行，并沿用了原库现有的使用方法与特性。

下载安装

ohpm install @ohos/flowlayout

OpenHarmony ohpm环境配置等更多内容，请参考 如何安装OpenHarmony ohpm包。

使用说明

导入组件

import {
  FlowLayout,
  LayoutParams,
  Gravity,
  HORIZONTAL,
  VERTICAL,
  LAYOUT_DIRECTION_LTR,
  LAYOUT_DIRECTION_RTL
} from '@ohos/flowlayout';

基本使用

@Entry
@Component
struct MyPage {
  // 定义子元素布局参数数组
  @State layoutParamsArray: LayoutParams[] = [];

  aboutToAppear(): void {
    // 初始化子元素
    const items: LayoutParams[] = [];

    // 创建子元素，宽100，高50
    const item1 = new LayoutParams(100, 50);
    item1.setMargin(4);  // 设置四周边距为4
    items.push(item1);

    // 创建更多子元素...
    const item2 = new LayoutParams(80, 50);
    item2.setMargin(4);
    items.push(item2);

    this.layoutParamsArray = items;
  }

  // 定义子元素构建器
  @Builder
  itemBuilderFunc(index: number, layoutParams: LayoutParams): void {
    Button('Item ' + index.toString())
      .fontSize(12)
      .width('100%')
      .height('100%')
  }

  build() {
    Column() {
      FlowLayout({
        layoutParamsArray: this.layoutParamsArray,
        orientation: HORIZONTAL,
        gravity: Gravity.LEFT | Gravity.TOP,
        layoutDirection: LAYOUT_DIRECTION_LTR,
        itemBuilder: this.itemBuilderFunc.bind(this)
      })
    }
    .width('100%')
    .height('100%')
  }
}

接口说明

FlowLayout 组件属性

属性名	类型	默认值	说明
layoutParamsArray	LayoutParams[]	[]	子元素布局参数数组
orientation	number	HORIZONTAL	布局方向：HORIZONTAL(0) 或 VERTICAL(1)
layoutDirection	number	LAYOUT_DIRECTION_LTR	排列方向：LAYOUT_DIRECTION_LTR(0) 或 LAYOUT_DIRECTION_RTL(1)
gravity	number	Gravity.LEFT | Gravity.TOP	对齐方式
weightDefault	number	0	默认权重值
debugDraw	boolean	false	是否开启调试绘制
maxLines	number	0	最大行数限制 0=不限制
paddingLeft	number	0	左内边距
paddingTop	number	0	上内边距
paddingRight	number	0	右内边距
paddingBottom	number	0	下内边距
itemBuilder	(index: number, layoutParams: LayoutParams) => void	-	子元素构建器

LayoutParams 类

属性名	类型	默认值	说明
width	number	80	宽度
height	number	40	高度
leftMargin	number	0	左边距
topMargin	number	0	上边距
rightMargin	number	0	右边距
bottomMargin	number	0	下边距
orientation	number	HORIZONTAL	布局方向

方法名	参数	说明
setMargin(margin)	number	设置四周边距为相同值
setGravity(gravity)	number	设置子元素对齐方式
getGravity()	-	获取子元素对齐方式
setWeight(weight)	number	设置权重值
getWeight()	-	获取权重值
setNewLine(newLine)	boolean	设置是否强制换行
isNewLine()	-	获取是否强制换行
constructor()	width?: number, height?: number	构造函数

Gravity 对齐常量

常量名	值	说明
Gravity.NO_GRAVITY	0x0000	无重力设置
Gravity.LEFT	0x0003	左对齐
Gravity.TOP	0x0030	顶部对齐
Gravity.RIGHT	0x0005	右对齐
Gravity.BOTTOM	0x0050	底部对齐
Gravity.CENTER_VERTICAL	0x0010	垂直居中
Gravity.CENTER_HORIZONTAL	0x0001	水平居中
Gravity.CENTER	0x0011	水平垂直居中
Gravity.FILL_VERTICAL	0x0070	垂直填充
Gravity.FILL_HORIZONTAL	0x0007	水平填充
Gravity.FILL	0x0077	完全填充
Gravity.START	0x00800003	起始侧对齐（支持RTL）
Gravity.END	0x00800005	结束侧对齐（支持RTL）

说明：源库提供的 FlowLayoutManager 是适配 RecyclerView 的管理器，RecyclerView 是安卓特有视图，用于优化性能，鸿蒙没有该视图，因此不涉及 FlowLayoutManager 的实现。

约束与限制

在下述版本验证通过：

• DevEco Studio NEXT Developer Beta3: (5.0.3.530), SDK: API12 (5.0.0.35(SP3))

目录结构

|---- ohos_flowlayout  
|     |---- entry  # 示例代码文件夹
|     |---- library  # flowlayout库文件夹
|     |     |---- src
|     |     |     └── main  
|     |     |         └── ets
|     |     |             └── components
|     |     |                 |---- FlowLayout.ets  # 流式布局组件
|     |     |                 |---- Gravity.ets  # 对齐常量定义
|     |     |                 |---- LayoutParams.ets  # 布局参数类
|     |     |                 └── LineDefinition.ets  # 行定义类
|     |     |---- Index.ets  # 对外接口
|     |---- README.md  # 英文说明
|     |---- README_zh.md  # 中文说明

贡献代码

使用过程中发现任何问题都可以提 Issue ，当然，也非常欢迎发 PR 共建。

开源协议

本项目基于 Apache License 2.0 ，请自由地享受和参与开源。