# FlowLayout

**Repository Path**: hihopeorg/FlowLayout

## Basic Information

- **Project Name**: FlowLayout
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-03-19
- **Last Updated**: 2024-10-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# FlowLayout

**本项目是基于开源项目FlowLayout进行ohos化的移植和开发的，可以通过项目标签以及github地址（ https://github.com/nex3z/FlowLayout ）
追踪到原项目版本**

#### 项目介绍

- 项目名称：FlowLayout
- 所属系列：ohos的第三方组件适配移植
- 功能：以xml和java两种形式创建自定义的流式布局，实现自动换行功能，通过这两种方式也可以直接设置流式布局子标签的间距，行距等等效果。
- 项目移植状态：完成
- 调用差异：无差异。
- 项目作者和维护人：hihope
- 联系方式：hihope@hoperun.com
- 原项目Doc地址：https://github.com/nex3z/FlowLayout
- 基线release版本：V1.3.3,SHA1:a8eef3ab416afbb21bdaf459446ad14bdaa36621
- 编程语言：Java
- 外部库依赖：无

#### 效果演示
![avatar](preview.gif)

#### 安装教程

方法1.

1. 编译har包FlowLayout_ohos.har。
2. 启动 DevEco Studio，将har包导入工程目录“entry->libs”下。
3. 在moudle级别下的build.gradle文件中添加依赖，在dependences标签中增加对libs目录下har包的引用。

```
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
	……
}
```

4.在导入的har包上点击右键，选择“Add as Library”对包进行引用，选择需要引用的模块，并点击“OK”即引用成功。

方法2.

1.在工程的build.gradle的allprojects中，添加HAR所在的Maven仓地址

```
repositories {
    maven {
        url 'http://106.15.92.248:8081/repository/Releases/' 
    }
}
```

2.在应用模块的build.gradle的dependencies闭包中，添加如下代码:

```
dependencies {
    implementation 'com.nex3z.ohos:flowlayout:1.0.2'
}
```

#### 使用说明：

```xml
<com.nex3z.flowlayout.FlowLayout
    xmlns:app="http://schemas.huawei.com/res/ohos-auto"
    ohos:id="$+id:id_first_flowlayout"
    ohos:height="650px"
    ohos:width="match_parent"
    ohos:padding="16px"
    ohos:top_margin="22px"
    app:flChildSpacingForLastRow="auto"
    app:flRowSpacing="32.0f">

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="SUN"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="SUN"/>

    <!--...-->

</com.nex3z.flowlayout.FlowLayout>
```

## Attributes

| Attribute                | Format                       | Description                                                                                    |
|--------------------------|------------------------------|------------------------------------------------------------------------------------------------|
| flFlow                   | boolean                      | `true` 展示为流式布局. `false` 将所有子视图限制在一行中。默认值是 `true`                          |
| flChildSpacing           | `auto`/integer               | 子视图之间的水平间距。要么是`auto`，要么是固定大小。默认为0。                                     |
| flChildSpacingForLastRow | `auto`/`align`/<br>integer   | 最后一行的子视图之间的水平间距。`auto`、`align`或固定大小。如果没有设置，则使用`childSpacing`.     |
| flRowSpacing             | `auto`/integer               | 行之间的垂直间距。要么是`auto`，要么是固定大小。默认为0.                                          |
| flRtl                    | boolean                      | ' true '用于从右到左布局子视图。' false '从左到右布局。默认值是' false '.                         |
| flMaxRows                | integer                      | 以行数表示的FlowLayout的最大高度.                                                                |

`auto`意味着实际的间距是根据`FlowLayout`的大小和子视图(或行)的数量计算的，以便子视图(或行)被均匀地放置。

`childSpacingForLastRow`中的`align`意味着子视图在最后一行中的水平间距与上面一行中使用的间距保持相同。如果在`FlowLayout`中只有一行并且`childSpacingForLastRow`被设置为`align`，这个值被忽略并且实际的间距使用`childSpacing`计算。


#### 版本迭代

- v1.0.2

#### 版权和许可信息

Apache License, Version 2.0