前言
DevEco Studio版本:4.0.0.600
WanAndroid的API链接:玩Android 开放API-玩Android - wanandroid.com
其他篇文章参考:
效果
导航页面实现
从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))
})
}
@Builder
itemHead(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()
}