鸿蒙系统导航栏,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

相关文章

CentOS7更改默认SSH端口与配置指南

《CentOS7更改默认SSH端口与配置指南》SSH是Linux服务器远程管理的核心工具,其默认监听端口为22,由于端口22众所周知,这也使得服务器容易受到自动化扫描和暴力破解攻击,本文将系统性地介绍... 目录引言为什么要更改 SSH 默认端口?步骤详解:如何更改 Centos 7 的 SSH 默认端口1

SpringBoot多数据源配置完整指南

《SpringBoot多数据源配置完整指南》在复杂的企业应用中,经常需要连接多个数据库,SpringBoot提供了灵活的多数据源配置方式,以下是详细的实现方案,需要的朋友可以参考下... 目录一、基础多数据源配置1. 添加依赖2. 配置多个数据源3. 配置数据源Bean二、JPA多数据源配置1. 配置主数据

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

python中各种常见文件的读写操作与类型转换详细指南

《python中各种常见文件的读写操作与类型转换详细指南》这篇文章主要为大家详细介绍了python中各种常见文件(txt,xls,csv,sql,二进制文件)的读写操作与类型转换,感兴趣的小伙伴可以跟... 目录1.文件txt读写标准用法1.1写入文件1.2读取文件2. 二进制文件读取3. 大文件读取3.1

SpringBoot中配置Redis连接池的完整指南

《SpringBoot中配置Redis连接池的完整指南》这篇文章主要为大家详细介绍了SpringBoot中配置Redis连接池的完整指南,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以... 目录一、添加依赖二、配置 Redis 连接池三、测试 Redis 操作四、完整示例代码(一)pom.

Linux内核参数配置与验证详细指南

《Linux内核参数配置与验证详细指南》在Linux系统运维和性能优化中,内核参数(sysctl)的配置至关重要,本文主要来聊聊如何配置与验证这些Linux内核参数,希望对大家有一定的帮助... 目录1. 引言2. 内核参数的作用3. 如何设置内核参数3.1 临时设置(重启失效)3.2 永久设置(重启仍生效

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

springboot整合阿里云百炼DeepSeek实现sse流式打印的操作方法

《springboot整合阿里云百炼DeepSeek实现sse流式打印的操作方法》:本文主要介绍springboot整合阿里云百炼DeepSeek实现sse流式打印,本文给大家介绍的非常详细,对大... 目录1.开通阿里云百炼,获取到key2.新建SpringBoot项目3.工具类4.启动类5.测试类6.测

Python列表去重的4种核心方法与实战指南详解

《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1:集合(set)去重法(最快速)方法2:顺序遍历法(保持顺序)方法3:副本删除法(原地修改)方法4:

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行