前言

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的鸿蒙版本