当前位置: 首页 > news >正文

鸿蒙项目云捐助第七讲鸿蒙App应用的首页推荐模块布局的实现

鸿蒙项目云捐助第七讲鸿蒙App应用的首页推荐模块布局的实现

最后设置首页的推荐模块,参考模板如下图所示。

一、首页热门推荐模块的实现

对于热门推荐模块,先有上面的小标题栏,这里的标题栏也有一个小图标,首先从“百度图库”中搜索热门推荐的图标。

然后把下载的热门小图标放在resources文件夹下的base文件夹下的media目录中,如下图所示。

有了图标的准备,还需要文字,文字需要把资源放在resources目录下的zh_CN目录下的string.json文件中,如下图所示。

有了图标和文字,就可以使用Flex弹性盒子继续布局IndexComponent的组件,代码如下图所示。

这里弹性盒子Flex使用FlexDirection.Row进行横向布局,由于只有图标和文字两个元素,这里使用FlexAlign.SpaceBetween进行两端对齐,图标在左边,文字在右边,弹性盒子Flex又使用alignItem的ItemAlign.Center进行竖向居中。

对于Flex中的Image和Text也是添加资源后,对于Image添加width宽和height高,对于Text添加fontColor的字体颜色。

整体的Flex热门推荐小题目条也需要添加backgroundColor的背景颜色,margin的外边距和padding的内边距,这里的外边距只添加上部的外边距,其大小是20。

设置热门推荐条后

接下来就需要首页推荐项目的条目设置,这里参照的布局模板如下图所示。

从模板上看,需要收集4幅热门推荐的图片,这里可以从“百度图库”中搜索捐助类相关的推荐类项目图片,如下图所示。

这里通过搜索找到4幅图片,把图片放在项目resources目录的base目录下的media目录中。如下图所示。

这个组件还是在首页中显示,代码需要写在IndexComponent的组件中,同时这里也需要热门捐助图片及热门捐助文字的组合,也需要建立json数据文件进行图片和文字的对应关系,在之前创建的文件夹mockjs的目录下建立remmand.js的数据模拟文件,如下图所示。

这里创建recommand.js文件后,使用const方法定义recommand的推荐数组参数,最后使有export导出定义的数组参数。代码如下图所示。

有了模拟数据后,按照之前首页模块中图片文字对应关系的开发思想,还需要有一个鸿蒙ArkTS的类与推荐的数据进行对应。由于这里需要的也是图片和文字,因此与之前建立的某些鸿蒙类相似,我们就使用之前创建的鸿蒙类MyNews来对应推荐模块的功能。代码如下图所示。

有了模拟数据和鸿蒙类对象后就可以进行IndexComponent首页组件的推荐功能列表实现。这里首先导入模拟的推荐列表数据,如下图所示。

导入数据后,就可以在IndexComponent组件中的build()方法中添加推荐模块布局代码。代码如下图所示。

这里也使用Flex的弹性盒子,弹性盒子使用{wrap:FlexWrap.Wrap}声明当元素超出一行后进行换行处理。在Flex弹性盒子中使用ForEach遍历所有的推荐数据数组,对于每一个遍历的子项item就是鸿蒙MyNews类,在ForEach的循环体中有UI的组件Column()对其中的元素进行竖向列排列,这里需要排列的有Image图像组件和Text文本组件。文本Text组件和Image图像组件分别设置width宽度,在Image组件中设置width宽度和height高度。对于整体包括图像组件Image和文字组件Text的元素Column()列元素设置其border边框及height高度,还有margin外边距和padding的内边距。

代码在DevEco Studio编辑工具的预览窗口中预览得到的结果如下图所示。

这里显示布局混乱是由于首页中轮播图组件,分类导航组件再加上资讯组件及热门捐赠组件竖向排列在一起,已经超出了手机屏幕显示的一屏,需要使用鸿蒙Next的Scroll进行屏幕的滚动。

设置Scroll元素标签时,把首页组件中Swiper的滑动轮播,分类导航组件Flex,资讯分类组件Flex及热门推荐组件Flex都放在Scroll的标签中,代码如下图所示。

图中阴影部分的代码需要全部放在Scroll的标签当中,代码结构如下图所示。

设置成功后,首页的内容可以向上拖动,并显示出“热门推荐”的项目条。具体效果如下图所示。

至此,首页部分已大功告成。后面持续完成捐助页,捐助岛等相关的功能页面,请持续关注。

相关文章:

鸿蒙项目云捐助第七讲鸿蒙App应用的首页推荐模块布局的实现

鸿蒙项目云捐助第七讲鸿蒙App应用的首页推荐模块布局的实现 最后设置首页的推荐模块,参考模板如下图所示。 一、首页热门推荐模块的实现 对于热门推荐模块,先有上面的小标题栏,这里的标题栏也有一个小图标,首先从“百度图库”中…...

【网络安全设备系列】1、防火墙

0x00 前言 最近由于工作原因,需要详细如今各类网络安全设备,所以开了此系列文章,希望通过对每个网络安全设备进行整理总结,来详细了解各类网络安全设备作用功能以及实现原理、部署配置方法等。 0x01 定义:防火墙指的…...

C# 备份文件夹

C# 备份目标文件夹 方法1:通过 递归 或者 迭代 结合 C# 方法 参数说明: sourceFolder:源文件夹路径destinationFolder:目标路径excludeNames:源文件夹中不需备份的文件或文件夹路径哈希表errorLog:输出错…...

【sizeof】各种数据类型所占空间大小

各种数据类型所占空间大小 文章目录 前言 一、sizeof是什么? 二、使用步骤 1.整型 2.字符型 总结 前言 ‌sizeof在C语言中是一个运算符,用于获取数据类型或变量在内存中所占的字节数。‌它可以在编译时计算数据类型或变量的内存大小,而…...

水仙花数(流程图,NS流程图)

题目:打印出所有的100-999之间的"水仙花数",并画出流程图和NS流程图。所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身。例如:153是一个"水仙花数",因为1531的三次方&#…...

wireshark捕获过滤和操作方式详解

大家觉得有用记得关注和点赞,谢谢。 一、Wireshark介绍 Wireshark(前身是Ethereal)是一个网络封包分析软件,目前是全球使用最广泛的开源抓包软件,别名小鲨鱼或者鲨鱼鳍。 网络封包分析软件的功能是截取网卡进出的网络…...

ChatGPT Search开放:实时多模态搜索新体验

点击访问 chatTools 免费体验GPT最新模型,包括o1推理模型、GPT4o、Claude、Gemini等模型! ChatGPT Search:功能亮点解析 本次更新的ChatGPT Search带来了多项令人瞩目的功能,使其在搜索引擎市场中更具竞争力。 1. 高级语音模式&…...

【docker】docker swarm常用命令以及电商平台构建案例

1. 初始化Swarm集群 用于初始化一个Swarm集群&#xff0c;并将当前节点设置为Manager节点。 docker swarm init 用法&#xff1a; docker swarm init --advertise-addr <Manager节点IP>示例&#xff1a; docker swarm init --advertise-addr 192.168.1.100这会将当前节…...

3D计算机视觉概述

3D计算机视觉 3D计算机视觉概述 像机标定 文章目录 3D计算机视觉前言一、人类视觉二、计算机视觉2.1 计算机视觉的研究目的2.2 计算机视觉的研究任务2.3 计算机视觉的研究方法2.4 视觉计算理论2.5 马尔框架中计算机视觉表达的四个层次2.5.1 图像&#xff08;像素表达&#xff…...

23. 合并 K 个升序链表(java)

题目描述&#xff1a; 给你一个链表数组&#xff0c;每个链表都已经按升序排列。 请你将所有链表合并到一个升序链表中&#xff0c;返回合并后的链表。 示例 1&#xff1a; 输入&#xff1a;lists [[1,4,5],[1,3,4],[2,6]] 输出&#xff1a;[1,1,2,3,4,4,5,6] 解释&#xff…...

与乐鑫相约 CES 2025|创新技术引领物联网与嵌入式未来

2025 国际消费电子产品展览会 (International Consumer Electronics Show, CES) 将于 2025 年 1 月 7 至 10 日在美国拉斯维加斯盛大开幕。作为全球规模最大、水准最高&#xff0c;且影响力最广的消费电子类科技盛会&#xff0c;CES 每年都吸引着全球行业领袖、开发者和技术爱好…...

MIPS指令集(一)基本操作

目录 计算机硬件的操作数 存储器操作数 常数或立即数操作数 有符号数和无符号数 指令的格式 逻辑操作 决策指令 循环 计算机硬件的操作数 先从一条C语句入手 a b c; 将其翻译为MIPS add a, b, c 其中a&#xff0c;b&#xff0c;c就是这条指令的操作数。表示将b与c…...

半导体数据分析(二):徒手玩转STDF格式文件 -- 码农切入半导体系列

一、概述 在上一篇文章中&#xff0c;我们一起学习了STDF格式的文件&#xff0c;知道了这是半导体测试数据的标准格式文件。也解释了为什么码农掌握了STDF文件之后&#xff0c;好比掌握了切入半导体行业的金钥匙。 从今天开始&#xff0c;我们一起来一步步地学习如何解构、熟…...

在window环境下安装openssl生成钥私、证书和签名,nodejs利用express实现ssl的https访问和测试

在生成我们自己的 SSL 证书之前&#xff0c;让我们创建一个简单的 Express应用程序。 要创建一个新的 Express 项目&#xff0c;让我们创建一个名为node-ssl -server 的目录&#xff0c;用终端cmd中进入node-ssl-server目录。 cd node-ssl-server 然后初始化一个新的 npm 项目…...

C++中类和对象的细节原理

文章目录 一、C中的构造函数二、C中的析构函数三、两者的配合与注意事项四、C中的静态成员变量五、C中的静态成员函数六、C中普通成员函数和静态成员函数的区别七、C中的const成员变量八、C中的const 成员函数九、C中构造函数的初始化列表十、C中的浅拷贝操作十一、C中的深拷贝…...

解决并发情况下调用 Instruct-pix2pix 模型推理错误:index out of bounds 问题

解决并发情况下调用 Instruct-pix2pix 模型推理错误&#xff1a;index out of bounds 问题 背景介绍 在对 golang 开发的 图像生成网站 进行并发测试时&#xff0c;调用基于 Instruct-pix2pix 模型和 FastAPI 的图像生成 API 遇到了以下错误&#xff1a; Model inference er…...

OpenXLSX开源库在 Ubuntu 18.04 的编译、交叉编译与使用教程

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…...

windows和LINUX下校验文件的哈希值(MD5、SHA256)

可以通过两个文件的哈希值来对比两个文件是不是一模一样&#xff0c;有没有缺失 1、windows CertUtil -hashfile 文件路径 MD5 CertUtil -hashfile 文件路径 SHA256 2、Liunx 校验当前目录下所有文件 sha256sum . 校验指定文件名 sha256sum 文件名...

〔 MySQL 〕视图

以下是上述文章的目录&#xff1a; 一、视图概述 视图的定义 二、基本使用 创建视图查询视图修改视图影响基表查询验证删除视图 三、视图规则和限制 命名规则数量限制索引和触发器安全性ORDER BY规则与表一起使用 四、实战案例 牛客实战OJ修改基表影响视图查询验证删除…...

嵌入式硬件产品:CC254x 蓝牙升级

目录 固件更新 OAD原理 作者简介 固件更新 支持固件更新的CC2541芯片中, 包括三段代码: Boot Image Manager(BIM)、ImageA、Im...

Drag and Drop API 实现 JavaScript 中的原生拖放功能

理解什么是拖放&#xff0c;我们先做个简单的实验。鼠标移动到页面左上角“CSDN” 图片上方&#xff0c;点击左键不放开&#xff0c;拖动鼠标&#xff0c;发现图片随着鼠标移动&#xff0c;松开鼠标时&#xff0c;图片消失。 一、拖放&#xff08;Drag and Drop&#xff09;有…...

人脸检测的若干思考!!!

1.目前主要有人脸检测方法分类&#xff1f; 主要包含两类&#xff1a;传统人脸检测算法和基于深度学习的人脸检测算法。 传统人脸检测算法主要可以分为4类&#xff1a; 基于知识、模型、特征和外观的人脸检测方法&#xff1b; 基于深度学习的方法&#xff1a;基于级联CNN的人脸…...

【时间序列分析】斯皮尔曼(Spearman)相关系数理论基础及python代码实现

文章目录 1. 斯皮尔曼相关系数1.1 公式定义1.2 计算过程1.3 计算示例1.4 注意事项&#xff08;当有重复值时&#xff09; 2. 优缺点2.1 优点2.2 缺点 3. 适用场景4. Python代码实现4.1 调用scipy库 5 思考5.1 什么是单调关系&#xff1f;与线性关系的区别是什么&#xff1f;5.2…...

python | linux | ModuleNotFoundError: No module named ‘WFlib‘ |找不到模块

问题&#xff1a; (base) beautyby521-7:~/Website-Fingerprinting-Library-master$ bash scripts/NetCLR.sh Traceback (most recent call last):File "/home/beauty/Website-Fingerprinting-Library-master/exp/pretrain.py", line 8, in <module>from WFli…...

B-TREE详解

B - tree 的详细结构特点 节点结构细节 关键字存储方式&#xff1a;B - tree 节点中的关键字是按照一定顺序排列的&#xff0c;这个顺序可以是升序或者降序。例如&#xff0c;在一个以数字为关键字的 B - tree 中&#xff0c;关键字从左到右依次增大。每个关键字都有一个分隔作…...

Kotlin复习

一、Kotlin类型 1.整数 2.浮点 显示转换&#xff1a; 所有数字类型都支持转换为其他类型&#xff0c;但是转换前会检测长度。 toByte(): Byte toShort(): Short toInt(): Int toLong(): Long toFloat(): Float toDouble(): Double 不同进制的数字表示方法&#xff08;为了提高…...

批处理文件的创建与编辑方法

批处理命令保存在以BAT为扩展名地文本文件中&#xff0c;因此可以使用任何字处理软件创建、编辑批处理文件&#xff0c;如Word、WinHex、Editpuls等。 案例一 使用copy con命令创建批处理文件 ”copy con“是一个功能简单、易于使用的创建文本文件命令&#xff0c;命令中”con…...

Spring Boot集成Kafka:最佳实践与详细指南

文章目录 一、生产者1.引入库2.配置文件3.配置类PublicConfig.javaMessageProducer.java 4.业务处理类 三、消费者1.引入库2.配置类PublicConfig.javaMessageConsumer.java 3.业务类 一、生产者 1.引入库 引入需要依赖的jar包&#xff0c;引入POM文件&#xff1a; <depend…...

maven 中 有历史模块缓存 怎么清

Maven 在运行时会将一些数据保存在本地仓库中&#xff0c;以加快构建过程。其中一部分是项目的依赖项&#xff0c;还有就是“历史模块缓存”。这些缓存信息保存在本地仓库的 _remote.repositories 文件中。 解决方案&#xff1a; 手动删除缓存文件&#xff1a; 进入你的Maven本…...

云计算HCIP-OpenStack04

书接上回&#xff1a; 云计算HCIP-OpenStack03-CSDN博客 12.Nova计算管理 Nova作为OpenStack的核心服务&#xff0c;最重要的功能就是提供对于计算资源的管理。 计算资源的管理就包含了已封装的资源和未封装的资源。已封装的资源就包含了虚拟机、容器。未封装的资源就是物理机提…...

【信息系统项目管理师-论文真题】2015下半年论文详解

更多内容请见: 备考信息系统项目管理师-专栏介绍和目录 文章目录 论题一:大项目或多项目的成本管理解题思路写作要点论题二:项目的采购管理解题思路写作要点论题一:大项目或多项目的成本管理 随着移动互联网、物联网、云计算、大数据等新一代信息技术的广泛应用,我国目前…...

C# 面试中常见递归算法

前言 今天我们主要总结一下C#面试中常见递归算法。 C#经典十大排序算法&#xff08;完结&#xff09; C#递归算法计算阶乘的方法 一个正整数的阶乘&#xff08;factorial&#xff09;是所有小于及等于该数的正整数的积&#xff0c;并且0的阶乘为1。自然数n的阶乘写作n!。180…...

qemu源码解析【02】qom基本概念

目录 qemu源码解析【02】qom基本概念参考资料基本数据结构TypeImplObjectClassObjectTypeInfo qemu源码解析【02】qom基本概念 参考资料 https://blog.csdn.net/u011364612/article/details/53485856qemu中为了模拟各种虚拟设备和总线&#xff0c;采用了面向对象的思想&#…...

C++算法第八天

本篇文章我们继续学习c算法 目录 第一题 题目链接 题目展示 代码原理 代码编写 第二题 题目链接 题目展示 代码原理 代码编写 第三题 题目链接 题目展示 代码原理 代码编写 第一题 题目链接 69. x 的平方根 - 力扣&#xff08;LeetCode&#xff09; 题目展示…...

大语言模型的常用微调方法

文章目录 数据构造与清洗数据构造方法1.基于 Self-Instruct 方法的数据构造2.面向结构化知识的数据构造 数据清洗方法1.IFD 指标法2. MoDS 方法 2.2 分词器构造2.2.1 分词器概述BPE 分词器WordPiece 分词器Unigram 分词器 2.3 大型语言模型的微调方法前缀调优提示调优P-Tuning …...

安卓获取所有可用摄像头并指定预览

在Android设备中&#xff0c;做预览拍照的需求的时候&#xff0c;我们会指定 CameraSelector DEFAULT_FRONT_CAMERA前置 或者后置CameraSelector DEFAULT_BACK_CAMERA 如果你使用的是平板或者工业平板&#xff0c;那么就会遇到多摄像头以及外置摄像头问题&#xff0c;简单的指…...

Jwt和Session的区别和优缺点

目录 一、Authentication和Authorization的区别 二、用户认证的两种主流方法 ① 、基于session认证流程如下&#xff1a; ②、基于token&#xff08;令牌&#xff09;用户认证如下&#xff1a; 三、区别和优缺点 JWT的优点&#xff1a; JWT的缺点&#xff1a; 安全性 …...

如何使用 Python 读取和写入 CSV 文件?

在Python中&#xff0c;处理CSV文件是一项常见的任务&#xff0c;通常用于数据交换和数据存储。 Python的标准库csv模块提供了一种方便的方式来读取和写入CSV文件。 下面我将详细介绍如何使用Python的csv模块来读取和写入CSV文件&#xff0c;并提供一些实际开发中的建议和注意…...

FR2012富芮坤PMU:设置PMU GPIO为输入读取状态;在睡眠功能中读取IO;PMU GPIO设置唤醒源中断

从事嵌入式单片机的工作算是符合我个人兴趣爱好的,当面对一个新的芯片我即想把芯片尽快搞懂完成项目赚钱,也想着能够把自己遇到的坑和注意事项记录下来,即方便自己后面查阅也可以分享给大家,这是一种冲动,但是这个或许并不是原厂希望的,尽管这样有可能会牺牲一些时间也有哪天原…...

私有云dbPaaS为何被Gartner技术成熟度曲线标记为“废弃”?

当云计算席卷而来&#xff0c;基于云基础设施的数据库部署也改变了数据库。在传统的私有化部署&#xff08;On-premises&#xff09;和公有云部署&#xff08;Public Cloud&#xff09;之间&#xff0c;不断融合的混合IT&#xff08;Mixed IT&#xff09;形式成为最常见的企业级…...

RabbitMQ 高级特性——延迟队列

文章目录 前言延迟队列延迟队列的概念TTL 死信队列模拟延迟队列设置队列的 TTL设置消息的 TTL 延迟队列插件安装并且启动插件服务使用插件实现延迟功能 前言 前面我们学习了 TTL 和死信队列&#xff0c;当队列中的消息达到了过期时间之后&#xff0c;那么这个消息就会被死信交…...

Perl 引用

Perl 引用 Perl&#xff0c;作为一种灵活而强大的编程语言&#xff0c;广泛用于系统管理、网络编程、GUI开发等领域。在Perl编程中&#xff0c;引用&#xff08;References&#xff09;是一个核心概念&#xff0c;它允许变量引用其他数据&#xff0c;从而创建复杂的数据结构&a…...

llama2——微调lora,第一次参考教程实践完成包括训练和模型

前言&#xff1a;磕磕绊绊&#xff0c;不过收获很多&#xff0c;最大的收获就是解决报错error的分析方法和解决思路 1、首先&#xff0c;我参考的是这篇博客&#xff1a;怎样训练一个自己的大语言模型&#xff1f;全网最简单易懂的教程&#xff01;_开源模型训练出一个语言模型…...

【人工智能数学基础篇】——深入详解矩阵分解:奇异值分解(SVD)与主成分分析(PCA)在数据降维与特征提取中的应用

目录 1. 引言 2. 矩阵分解概述 2.1 矩阵分解的意义 3. 奇异值分解&#xff08;SVD&#xff09; 3.1 定义与数学基础 3.2 SVD 的性质 3.3 SVD 在数据降维中的应用 3.4 示例代码&#xff1a;使用 SVD 进行图像压缩 3.5 结果分析 4. 主成分分析&#xff08;PCA&#xff0…...

C++常见面试题-初级2

1. C和C有什么区别&#xff1f; C是面向对象的语言&#xff0c;而C是面向过程的语言&#xff1b;C引入new/delete运算符&#xff0c;取代了C中的malloc/free库函数&#xff1b;C引入引用的概念&#xff0c;而C中没有&#xff1b;C引入类的概念&#xff0c;而C中没有&#xff1…...

R square 的计算方法和一点思考

模型的性能评价指标有几种方案&#xff1a;RMSE&#xff08;平方根误差&#xff09;、MAE&#xff08;平均绝对误差&#xff09;、MSE(平均平方误差)、R2_score 其中&#xff0c;当量纲不同时&#xff0c;RMSE、MAE、MSE难以衡量模型效果好坏。这就需要用到R2_score&#xff1…...

梳理你的思路(从OOP到架构设计)_简介EIT造形

目录 1、 复习<基类 /子类>的扩充(extends)结构 典型的<基类/子类>代码结构 <基类/子类>代码结构的变形 2、 从<基类/子类>结构到EIT造形 3、 EIT造形的基本形与变形 1、 复习<基类 /子类>的扩充(extends)结构 典型的<基类/子类>代码…...

梳理你的思路(从OOP到架构设计)_认识EIT造形与内涵

目录 1、 认识类(Class)与内涵 2、 认识EIT造形与内涵 EIT造形&#xff1a; 类造形的组合​编辑 复习EIT的基本形与变形​编辑 不同内涵 EIT造形 1、 认识类(Class)与内涵 回顾 类(Class)是比较小的造形 各种不同内涵&#xff0c;可以透过类(Class)的形式(Form)来呈现出…...

【FTP】FTP基础知识点

文章目录 一、概述二、 工作原理2.1 两个连接2.2 安全性 三、代码实现&#xff1a;1. 选择合适的库2. 连接配置和初始化3. 连接状态检查4. 重连机制5. 文件操作6. 安全性7. 资源管理 参考&#xff1a; 一、概述 将某台计算机中的文件通过网络传送到可能相距很远的另一台计算机…...

排序算法(7):堆排序

问题 排序 [30, 24, 5, 58, 18, 36, 12, 42, 39] 堆排序 堆排序是一种基于堆数据结构的排序算法。堆是一个近似完全二叉树的结构&#xff0c;即除了最后一层外&#xff0c;每一层都必须填满&#xff0c;且最后一层从左往右填充。 堆可以分为大根堆和小根堆。在大根堆中&…...