鸿蒙开源第三方组件——自定义流式布局组件FlowLayout_ohos

 前言 

           基于安卓平台的自定义流式布局组件FlowLayout（https://blog.csdn.net/fzhhsa/article/details/103003019），实现了鸿蒙的功能化迁移和重构。代码已经开源到（https://gitee.com/isrc_ohos/flow-layout_ohos），欢迎各位开发者下载使用并提出宝贵意见！

背景

        流式布局也叫百分比布局，它具有指定的对齐方式、水平间隙和垂直间隙，特别适用于多标签的展示，可以实现组件中的标签横向对齐，也可以在多个标签的总宽度超过组件宽度时自动换行，是移动端开发中经常使用的布局方式之一。我们可以在很多应用场景下看到流式布局的使用，比如商品分类展示，搜索记录展示等。

组件效果展示

        该组件应用只包含一个显示页面。为了呈现出流式布局的效果，我们在页面布局中添加了多个标签，如“java”、“kotlin”、“ohos”、“Deveco-studio”、“app”等作为布局中的子组件。具体显示效果如图1所示。

图1 组件效果展示

Sample解析

        FlowLayout_ohos在Library中已经封装了组件的主要功能，往FlowLayout_ohos组件中放入标签会自动横向对齐并且在多个标签的总宽度超过组件宽度时自动换行，因此在Sample中我们只需要添加标签内容并使用流式布局将标签内容进行显示即可。

        在标签显示的过程中，我们可以调用一些Library暴露的接口来对子组件的显示特征进行设置，比如组件最多显示的行数等。下面将具体讲解FlowLayout_ohos组件的使用方法，共分为5个步骤：

步骤1. 导入相关类

步骤2. 初始化流式布局和数据容器

步骤3. 添加标签内容到数据容器

步骤4. 将标签内容添加进布局

步骤5. 相关特征设置

        接下来我们来看一下每一个步骤涉及的详细操作。

（1）导入相关类

        在MainAbilitySlice文件中，通过import关键字导入FlowAdapter类和FlowLayout类。FlowLayout类用于组件的显示，FlowAdapter类用于向组件设置标签。

import com.huawei.mylibrary.FlowAdapter;
import com.huawei.mylibrary.FlowLayout;

（2）初始化流式布局和数据容器

         实例化FlowLayout类的对象mFlowLayout ，然后创建元素为String类型的列表mContentList作为添加标签的容器，以下我们称之为数据容器。

private FlowLayout mFlowLayout;
private