鸿蒙系统导航栏,HarmonyOS三方件开发指南(18)-Flexbox流式布局组件

本文主要是介绍鸿蒙系统导航栏,HarmonyOS三方件开发指南(18)-Flexbox流式布局组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

引言

上一篇给大家介绍底部导航栏的组件使用及开发指南,本篇将给大家带来另一个鸿蒙三方件的是实现:Flexbox,何为Flexbox,如果对Java的Swing比较熟悉的话一定不会陌生,就是控件根据ViewGroup的宽,自动的往右添加,如果当前行剩余空间不足,则自动添加到下一行。有点所有的控件都往左飘的感觉,第一行满了,往第二行飘~所以也叫流式布局。鸿蒙并没有提供流式布局,但是某些场合中,流式布局还是非常适合使用的,比如关键字标签,搜索热词列表等,比如下图:

dcd5d1b8f3e2a5582bfdad2ba5340674.png

789978478d908f799c9ae7b6c0d84d64.png

这些都特别适合使用Flexbox,本篇会带领大家自己实现Flexbox,然后使用我们自己定义的Flexbox实现上面的标签效果。学会使用一个控件和学会写一个控件,我相信大家都明白,授人以鱼不如授人以渔。

接下来看下鸿蒙模拟器的实现效果,效果图如下:

图(1)默认标签状态

13d4d7be42ec6281304829c5bd70ed53.png

图(2)标签选中状态

ebcaa0d164aad0d76412105bcf0c7d18.png

VideoCache使用指南

Ø 新建工程, 添加组件Har包依赖

在应用模块中添加HAR,只需要将flexboxlibrary-debug.har复制到entry\libs目录下即可

Ø 修改配置文件

1. 在布局中添加如下代码:

ohos:id="$+id:viewgroup"

ohos:height="match_content"

ohos:width="match_parent"

ohos:background_element="gray"

ohos:orientation="vertical"

/>1.2.3.4.5.6.7.

复制

2.在代码中通过以下方式使用://mNames 是item的数据源,可以是任意需要显示的数据类型,根据实际情况去定义

parentLayout = (HWFlowViewGroup) findComponentById(ResourceTable.Id_viewgroup);

parentLayout.HWFlowViewGroup(getContext(), mNames, parentLayout);

parentLayout.setOnItemClickListener((Component view) -> {

//item点击之后的回调

Text text = (Text)view;

if(text.isSelected()){

text.setTextColor(Color.BLACK);

}else{

text.setTextColor(Color.WHITE);

}

});1.2.3.4.5.6.7.8.9.10.11.12.13.

复制

VideoCache开发指南

在上述中,已经说明Flexbox 如何在开发过程中使用,接下来简单的分析下Flexbox 实现思路

1、对于Flexbox ,需要指定的LayoutConfig,我们目前只需要能够识别margin、padding即可

2、measureChild中计算所有childView的宽度,然后根据childView的宽度,计算当前每一行的宽度

3、最后根据计算之后的宽度,对中所有的childView进行布局。

以text为例,计算每个childView 的代码如下:private float measureChild(Text text) {

Paint paint = new Paint();

paint.setTextSize(text.getTextSize());

float childWidth = paint.measureText(text.getText());

childWidth = childWidth + text.getPaddingLeft() + text.getPaddingRight() + text.getMarginLeft() + text.getMarginRight();

return childWidth;

}1.2.3.4.5.6.7.

复制

初始化每行的布局,代码如下:private DirectionalLayout initDirtLayout() {

DirectionalLayout childLayout = new DirectionalLayout(mContext);

childLayout.setOrientation(Component.HORIZONTAL);

DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_CONTENT);

layoutConfig.setMargins(10, 10, 10, 10);

childLayout.setLayoutConfig(layoutConfig);

return childLayout;

}1.2.3.4.5.6.7.8.

复制

获取屏幕的宽度,代码如下:private void getParentWidthAndHeight() {

Optional display = DisplayManager.getInstance().getDefaultDisplay(mContext);

Point pt = new Point();

display.get().getSize(pt);

mParentWidth = (int) pt.getPointX();

}1.2.3.4.5.6.

复制

动态布局:private void initChildViews() {

for (int i = 0; i 

Text text = new Text(mContext);

text.setId(i);

text.setText(mNames[i]);

text.setTextSize(100);

text.setSelected(false);

text.setTextColor(Color.WHITE);

text.setPadding(10, 10, 10, 10);

ShapeElement background = new ShapeElement();

background.setRgbColor(new RgbColor(205, 92, 92));

text.setBackground(background);

DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT);

layoutConfig.setMargins(20, 10, 20, 10);

text.setLayoutConfig(layoutConfig);

if (i == 0) {

childLayout = initDirtLayout();

mLineWidth = measureChild(text);

childLayout.addComponent(text);

} else {

mLineWidth = mLineWidth + measureChild(text);

if (mLineWidth > (mParentWidth - childLayout.getMarginLeft() - childLayout.getMarginRight())) {

mParentLayout.addComponent(childLayout);

childLayout = initDirtLayout();

mLineWidth = measureChild(text);

}

childLayout.addComponent(text);

if (i == mNames.length - 1) {

mParentLayout.addComponent(childLayout);

}

}

ComponentBean bean = new ComponentBean(text, false);

list.add(bean);

text.setClickedListener(component -> {

text.setSelected(!text.isSelected());

mOnItemClickListener.onItemClick(text);

});

}

}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.41.42.

复制

定义接口,实现item的点击事件public interface OnItemClickListener {

void onItemClick(Component view);

}

public void setOnItemClickListener(OnItemClickListener onItemClickListener) {

mOnItemClickListener = onItemClickListener;

}1.2.3.4.5.6.7.

复制

按照思路看下来,是不是很简单呢?我们只需要把握住如何计算childview 的宽度,以及什么情况下添加新的一行即可。

这篇关于鸿蒙系统导航栏,HarmonyOS三方件开发指南(18)-Flexbox流式布局组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/828280

相关文章

Spring Boot结成MyBatis-Plus最全配置指南

《SpringBoot结成MyBatis-Plus最全配置指南》本文主要介绍了SpringBoot结成MyBatis-Plus最全配置指南,包括依赖引入、配置数据源、Mapper扫描、基本CRUD操... 目录前言详细操作一.创建项目并引入相关依赖二.配置数据源信息三.编写相关代码查zsRArly询数据库数

SpringBoot启动报错的11个高频问题排查与解决终极指南

《SpringBoot启动报错的11个高频问题排查与解决终极指南》这篇文章主要为大家详细介绍了SpringBoot启动报错的11个高频问题的排查与解决,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一... 目录1. 依赖冲突:NoSuchMethodError 的终极解法2. Bean注入失败:No qu

JavaScript错误处理避坑指南

《JavaScript错误处理避坑指南》JavaScript错误处理是编程过程中不可避免的部分,它涉及到识别、捕获和响应代码运行时可能出现的问题,本文将详细给大家介绍一下JavaScript错误处理的... 目录一、错误类型:三大“杀手”与应对策略1. 语法错误(SyntaxError)2. 运行时错误(R

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

Python使用date模块进行日期处理的终极指南

《Python使用date模块进行日期处理的终极指南》在处理与时间相关的数据时,Python的date模块是开发者最趁手的工具之一,本文将用通俗的语言,结合真实案例,带您掌握date模块的六大核心功能... 目录引言一、date模块的核心功能1.1 日期表示1.2 日期计算1.3 日期比较二、六大常用方法详

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具?核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件

Linux系统之主机网络配置方式

《Linux系统之主机网络配置方式》:本文主要介绍Linux系统之主机网络配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、查看主机的网络参数1、查看主机名2、查看IP地址3、查看网关4、查看DNS二、配置网卡1、修改网卡配置文件2、nmcli工具【通用

Linux系统之dns域名解析全过程

《Linux系统之dns域名解析全过程》:本文主要介绍Linux系统之dns域名解析全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、dns域名解析介绍1、DNS核心概念1.1 区域 zone1.2 记录 record二、DNS服务的配置1、正向解析的配置

MySQL中慢SQL优化方法的完整指南

《MySQL中慢SQL优化方法的完整指南》当数据库响应时间超过500ms时,系统将面临三大灾难链式反应,所以本文将为大家介绍一下MySQL中慢SQL优化的常用方法,有需要的小伙伴可以了解下... 目录一、慢SQL的致命影响二、精准定位问题SQL1. 启用慢查询日志2. 诊断黄金三件套三、六大核心优化方案方案