FlowLayout

Introduction

FlowLayout is a component used to implement flow layout, supporting layout in both horizontal and vertical directions, as well as RTL layout direction.As a product adapted from FlowLayout, this library can run on OpenHarmony, reusing its APIs and features.

How to Install

ohpm install @ohos/flowlayout

For more information about OpenHarmony ohpm environment configuration, please refer to How to install OpenHarmony ohpm package.

How to Use

Import Components

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

Basic Usage

@Entry
@Component
struct MyPage {
  // Define child element layout params array
  @State layoutParamsArray: LayoutParams[] = [];

  aboutToAppear(): void {
    // Initialize child elements
    const items: LayoutParams[] = [];

    // Create child element with width 100 and height 50
    const item1 = new LayoutParams(100, 50);
    item1.setMargin(4);  // Set margin to 4 on all sides
    items.push(item1);

    // Create more child elements...
    const item2 = new LayoutParams(80, 50);
    item2.setMargin(4);
    items.push(item2);

    this.layoutParamsArray = items;
  }

  // Define child element builder
  @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%')
  }
}

Available APIs

FlowLayout Component Properties

Property	Type	Default	Description
`layoutParamsArray`	`LayoutParams[]`	`[]`	Array of child element layout parameters
`orientation`	`number`	`HORIZONTAL`	Layout orientation: `HORIZONTAL`(0) or `VERTICAL`(1)
`layoutDirection`	`number`	`LAYOUT_DIRECTION_LTR`	Arrangement direction: `LAYOUT_DIRECTION_LTR`(0) or `LAYOUT_DIRECTION_RTL`(1)
`gravity`	`number`	`Gravity.LEFT \| Gravity.TOP`	Alignment
`weightDefault`	`number`	`0`	Default weight value
`debugDraw`	`boolean`	`false`	Whether to enable debug drawing
`maxLines`	`number`	`0`	Maximum line limit: 0 = Unlimited
`paddingLeft`	`number`	`0`	Left padding
`paddingTop`	`number`	`0`	Top padding
`paddingRight`	`number`	`0`	Right padding
`paddingBottom`	`number`	`0`	Bottom padding
`itemBuilder`	`(index: number, layoutParams: LayoutParams) => void`	-	Child element builder

LayoutParams Class

Property	Type	Default	Description
`width`	`number`	`80`	Width
`height`	`number`	`40`	Height
`leftMargin`	`number`	`0`	Left margin
`topMargin`	`number`	`0`	Top margin
`rightMargin`	`number`	`0`	Right margin
`bottomMargin`	`number`	`0`	Bottom margin
`orientation`	`number`	`HORIZONTAL`	Layout orientation

Method	Parameters	Description
`setMargin(margin)`	`number`	Set all four margins to same value
`setGravity(gravity)`	`number`	Set child element alignment
`getGravity()`	-	Get child element alignment
`setWeight(weight)`	`number`	Set weight value
`getWeight()`	-	Get weight value
`setNewLine(newLine)`	`boolean`	Set whether to force line break
`isNewLine()`	-	Get whether to force line break
`constructor()`	`width?: number, height?: number`	Constructor function

Gravity Alignment Constants

Constant	Value	Description
`Gravity.NO_GRAVITY`	`0x0000`	No gravity setting
`Gravity.LEFT`	`0x0003`	Left alignment
`Gravity.TOP`	`0x0030`	Top alignment
`Gravity.RIGHT`	`0x0005`	Right alignment
`Gravity.BOTTOM`	`0x0050`	Bottom alignment
`Gravity.CENTER_VERTICAL`	`0x0010`	Vertical center
`Gravity.CENTER_HORIZONTAL`	`0x0001`	Horizontal center
`Gravity.CENTER`	`0x0011`	Horizontal and vertical center
`Gravity.FILL_VERTICAL`	`0x0070`	Vertical fill
`Gravity.FILL_HORIZONTAL`	`0x0007`	Horizontal fill
`Gravity.FILL`	`0x0077`	Full fill
`Gravity.START`	`0x00800003`	Start side alignment (RTL aware)
`Gravity.END`	`0x00800005`	End side alignment (RTL aware)

Explanation: The FlowLayoutManager provided by the source library is a manager specifically designed for RecyclerView. RecyclerView is a unique view in Android used to optimize performance. HarmonyOS does not have this view, so there is no need to implement FlowLayoutManager.

Constraints

Verified on the following version:

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

Directory Structure

|---- ohos_flowlayout  
|     |---- entry  # Sample code folder
|     |---- library  # flowlayout library folder
|     |     |---- src
|     |     |     └── main  
|     |     |         └── ets
|     |     |             └── components
|     |     |                 |---- FlowLayout.ets  # Flow layout component
|     |     |                 |---- Gravity.ets  # Alignment constants
|     |     |                 |---- LayoutParams.ets  # Layout params class
|     |     |                 └── LineDefinition.ets  # Line definition class
|     |     |---- Index.ets  # Public interface
|     |---- README.md  # English documentation
|     |---- README_zh.md  # Chinese documentation

How to Contribute

If you find any issues during use, please submit an Issue. Of course, we also welcome PR contributions.

License

This project is licensed under the Apache License 2.0.