WanAndroid(鸿蒙版)开发的第五篇

news/2024/5/30 17:47:11/文章来源:https://blog.csdn.net/Abner_Crazy/article/details/136709971

前言

DevEco Studio版本:4.0.0.600

WanAndroid的API链接:玩Android 开放API-玩Android - wanandroid.com

其他篇文章参考:

1、WanAndroid(鸿蒙版)开发的第一篇

2、WanAndroid(鸿蒙版)开发的第二篇

3、WanAndroid(鸿蒙版)开发的第三篇

4、WanAndroid(鸿蒙版)开发的第四篇

5、WanAndroid(鸿蒙版)开发的第五篇

效果

导航页面实现

从UI效果上可以看出是一个列表标题里面包含一些流式的数据块然后循环这样的布局,因此我们可以通过List组件中的ListItemGroup来实现,流式布局的item可以参考之前文章中的搜索页面的热搜里面的UI效果来实现:Flex({wrap: FlexWrap.Wrap })

参考链接:OpenHarmony List 、OpenHarmony ListItemGroup

因为项目模块有对BaseLibrary模块的引用,在oh-package.json5添加对其引用

1、List列表

build() {List() {ForEach(this.homeListData, (item: NavigationListBean) => {ListItemGroup({ header: this.itemHead(item.name) }) {// ListItem }}, (item: NavigationListBean) => item.name)}.width('100%').height('100%')
}

2、ListItem流式布局

ListItem() {Flex({ justifyContent: FlexAlign.Start, wrap: FlexWrap.Wrap }) {ForEach(item.articles, (project: NavigationListItemBean, index: number) => {Text(project.title).fontSize(18).fontColor(this.getTextColor(index)).padding({ left: 15, right: 15, top: 10, bottom: 10 }).margin({ top: 10, right: 10 }).maxLines(1).borderRadius(15).textOverflow({ overflow: TextOverflow.Ellipsis }).textAlign(TextAlign.Start).backgroundColor('#FFFFFF').onClick(() => {LogUtils.info(TAG, "点击了:index: " + index + " project: " + JSON.stringify(project))router.pushUrl({url: 'pages/WebPage',params: {title: project.title,uriLink: project.link}}, router.RouterMode.Single)})},(item: string) => item.toString())}.margin({ left: 10, right: 10, bottom: 10 })
}

3、动态设置item的颜色值

根据数组的index动态设置颜色值

 Text(project.title).fontColor(this.getTextColor(index))
private getTextColor(index: number): ResourceColor {if (index % 3 == 0) {return Color.Orange} else if (index % 3 == 1) {return Color.Blue} else if (index % 3 == 2) {return Color.Pink}return Color.Black
}

4、详细代码

import { HttpManager, RequestMethod } from '@app/BaseLibrary';
import LogUtils from '@app/BaseLibrary/src/main/ets/utils/LogUtils';
import { NavigationListBean } from './bean/NavigationListBean';
import { NavigationBean } from './bean/NavigationBean';
import { NavigationListItemBean } from './bean/NavigationListItemBean';
import router from '@ohos.router';const TAG = 'NavigationPage--- ';@Component
export struct NavigationPage {@State homeListData: Array<NavigationListBean> = [];aboutToAppear() {this.getNavigationData()LogUtils.info(TAG, "33333333333   aboutToAppear执行了")}private getNavigationData() {HttpManager.getInstance().request<NavigationBean>({method: RequestMethod.GET,url: 'https://www.wanandroid.com/navi/json' //wanAndroid的API:导航}).then((result: NavigationBean) => {LogUtils.info(TAG, "result: " + JSON.stringify(result))if (result.errorCode == 0) {this.homeListData = result.data}}).catch((error) => {LogUtils.info(TAG, "error: " + JSON.stringify(error))})}@BuilderitemHead(text: string) {Text(text).fontSize(20).fontColor(Color.Black).fontWeight(FontWeight.Bold).padding(10)}build() {List() {ForEach(this.homeListData, (item: NavigationListBean) => {ListItemGroup({ header: this.itemHead(item.name) }) {ListItem() {Flex({ justifyContent: FlexAlign.Start, wrap: FlexWrap.Wrap }) {ForEach(item.articles, (project: NavigationListItemBean, index: number) => {Text(project.title).fontSize(18).fontColor(this.getTextColor(index)).padding({ left: 15, right: 15, top: 10, bottom: 10 }).margin({ top: 10, right: 10 }).maxLines(1).borderRadius(15).textOverflow({ overflow: TextOverflow.Ellipsis }).textAlign(TextAlign.Start).backgroundColor('#FFFFFF').onClick(() => {LogUtils.info(TAG, "点击了:index: " + index + " project: " + JSON.stringify(project))router.pushUrl({url: 'pages/WebPage',params: {title: project.title,uriLink: project.link}}, router.RouterMode.Single)})},(item: string) => item.toString())}.margin({ left: 10, right: 10, bottom: 10 })}}}, (item: NavigationListBean) => item.name)}.width('100%').height('100%')}private getTextColor(index: number): ResourceColor {if (index % 3 == 0) {return Color.Orange} else if (index % 3 == 1) {return Color.Blue} else if (index % 3 == 2) {return Color.Pink}return Color.Black}
}

5、页面初始化获取导航数据

aboutToAppear() {this.getNavigationData()
}

源代码地址:WanAndroid_Harmony: WanAndroid的鸿蒙版本

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1007618.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[云原生] Prometheus自动服务发现部署

一、部署服务发现 1.1 基于文件的服务发现 基于文件的服务发现是仅仅略优于静态配置的服务发现方式&#xff0c;它不依赖于任何平台或第三方服务&#xff0c;因而也是最为简单和通用的实现方式。 Prometheus Server 会定期从文件中加载 Target 信息&#xff0c;文件可使用 YAM…

<JavaEE> 了解网络层协议 -- IP协议

目录 初识IP协议 什么是IP协议&#xff1f; IP协议中的基础概念 IP协议格式 图示 4bit版本号&#xff08;version&#xff09; 4bit头部长度&#xff08;headerlength&#xff09; 8bit服务类型&#xff08;TypeOfService&#xff09; 16bit总长度&#xff08;total l…

Python Web开发记录 Day10:Django part4 靓号管理与优化

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 1、数据库准备2、靓号列表3、新建靓号4、编辑靓…

点胶缺陷视觉检测都是怎么检测的?

点胶工艺是许多工业生产中不可或缺的一环&#xff0c;而点胶缺陷的存在往往直接影响到产品质量。为了提升点胶工艺的品质控制&#xff0c;点胶缺陷的视觉检测成为了一个重要的技术手段。 一、点胶缺陷的类型 点胶缺陷主要包括胶点大小不均、位置偏移、漏点、多点等。这些缺陷如…

基于word2vec 和 fast-pytorch-kmeans 的文本聚类实现,利用GPU加速提高聚类速度

文章目录 简介GPU加速 代码实现kmeans聚类结果kmeans 绘图函数相关资料参考 简介 本文使用text2vec模型&#xff0c;把文本转成向量。使用text2vec提供的训练好的模型权重进行文本编码&#xff0c;不重新训练word2vec模型。 直接用训练好的模型权重&#xff0c;方便又快捷 完整…

selenium 网页自动化-在访问一个网页时弹出的浏览器窗口,我该如何处理?

前言 相信大家在使用selenium做网页自动化时&#xff0c;会遇到如下这样的一个场景&#xff1a; 在你使用get访问某一个网址时&#xff0c;会在页面中弹出如上图所示的弹出框。 首先想到是利用Alert类来处理它。 然而&#xff0c;很不幸&#xff0c;Alert类处理的结果就是没…

springboot273基于JavaWeb的宠物商城网站设计与实现

宠物商城网站的设计与实现 摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;商品信息因为其管理内容繁杂&#xff0c;管理数量繁多导…

留学生课设|R语言|研究方法课设

目录 INSTRUCTIONS Question 1. Understanding Quantitative Research Question 2. Inputting data into Jamovi and creating variables (using the dataset) Question 3. Outliers Question 4. Tests for mean difference Question 5. Correlation Analysis INSTRUCTIO…

Elasticsearch:调整近似 kNN 搜索

在我之前的文章 “Elasticsearch&#xff1a;调整搜索速度”&#xff0c;我详细地描述了如何调整正常的 BM25 的搜索速度。在今天的文章里&#xff0c;我们来进一步探讨如何提高近似 kNN 的搜索速度。希望对广大的向量搜索开发者有一些启示。 Elasticsearch 支持近似 k 最近邻…

C#,数值计算,数据测试用的对称正定矩阵(Symmetric Positive Definite Matrix)的随机生成算法与源代码

C.Hermite 1、对称矩阵 对称矩阵(Symmetric Matrices)是指以主对角线为对称轴,各元素对应相等的矩阵。在线性代数中,对称矩阵是一个方形矩阵,其转置矩阵和自身相等。1855年,埃米特(C.Hermite,1822-1901年)证明了别的数学家发现的一些矩阵类的特征根的特殊性质,如称为埃…

Selenium 学习(0.20)——软件测试之单元测试

我又&#xff08;浪完&#xff09;回来了…… 很久没有学习了&#xff0c;今天忙完终于想起来学习了。没有学习的这段时间&#xff0c;主要是请了两个事假&#xff08;5工作日和10工作日&#xff09;放了个年假&#xff08;13天&#xff09;&#xff0c;然后就到现在了。 看了下…

15届蓝桥杯第一期模拟赛所有题目解析

文章目录 &#x1f9e1;&#x1f9e1;t1_字母数&#x1f9e1;&#x1f9e1;问题描述思路代码 &#x1f9e1;&#x1f9e1;t2_大乘积&#x1f9e1;&#x1f9e1;问题描述思路代码 &#x1f9e1;&#x1f9e1;t3_星期几&#x1f9e1;&#x1f9e1;问题描述思路代码 &#x1f9e1;…

ctfshow web入门 php特性总结

1.web89 intval函数的利用&#xff0c;intval函数获取变量的整数值&#xff0c;失败时返回0&#xff0c;空的数组返回&#xff0c;非空数组返回1 num[]1 intval ( mixed $var [, int $base 10 ] ) : int Note: 如果 base 是 0&#xff0c;通过检测 var 的格式来决定使用的进…

构建LVS集群

一、集群的基本理论&#xff08;一&#xff09;什么是集群 人群或事物聚集&#xff1a;在日常用语中&#xff0c;群集指的是一大群人或事物密集地聚在一起。例如&#xff0c;“人们群集在广场上”&#xff0c;这里的“群集”是指大量人群聚集的现象。 计算机技术中的集群&…

uniapp微信小程序_自定义交费逻辑编写

一、首先看最终效果 先说下整体逻辑,选中状态为淡紫色,点击哪个金额,充值页面上就显示多少金额 二、代码 <view class"addMoney"><view class"addMoneyTittle">充值金额</view><view class"selfaddmoney" :class"{…

【图论】计算图的n-hop邻居个数,并绘制频率分布直方图

计算图的n-hop邻居个数&#xff0c;并绘制频率分布直方图 在图论中&#xff0c;n-hop邻居&#xff08;或称为K-hop邻居&#xff09;是指从某个顶点出发&#xff0c;通过最短路径&#xff08;即最少的边数&#xff09;可以到达的所有顶点的集合&#xff0c;其中n&#xff08;或…

数据的存储底层详解 - 源码、反码、补码 浮点数的存储

数据的存储 1. 前言2. 数据类型2.1 整形家族2.2 浮点数家族2.3 构造类型&#xff08;自定义类型&#xff09;2.4 指针类型2.5 空类型&#xff08;无类型&#xff09; 3. 整数在内存中的存储4. 大小端5. 浮点数在内存中的存储 1. 前言 大家好&#xff0c;我是努力学习游泳的鱼。…

【开源】SpringBoot框架实验室耗材管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 耗材档案模块2.2 耗材入库模块2.3 耗材出库模块2.4 耗材申请模块2.5 耗材审核模块 三、系统展示四、核心代码4.1 查询耗材品类4.2 查询资产出库清单4.3 资产出库4.4 查询入库单4.5 资产入库 五、免责说明 一、摘要 1.1…

3d场景重建图像渲染 | 神经辐射场NeRF(Neural Radiance Fields)

神经辐射场NeRF&#xff08;Neural Radiance Fields&#xff09; 概念 NeRF&#xff08;Neural Radiance Fields&#xff0c;神经辐射场&#xff09;是一种用于3D场景重建和图像渲染的深度学习方法。它由Ben Mildenhall等人在2020年的论文《NeRF: Representing Scenes as Neur…

如何从 Mac 电脑外部硬盘恢复删除的数据文件

本文向您介绍一些恢复 Mac 外置硬盘数据的快速简便的方法。 Mac 的内部存储空间通常不足以存储所有数据。因此&#xff0c;许多用户通过外部驱动器扩展存储或创建数据备份。然而&#xff0c;与几乎所有其他设备一样&#xff0c;从外部硬盘驱动器丢失有价值的数据并不罕见。由于…