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

前言

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 ListOpenHarmony 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()
}

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

相关推荐
sanzk44 分钟前
华为鸿蒙应用开发
华为·harmonyos
SoraLuna5 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
ClkLog-开源埋点用户分析6 小时前
ClkLog企业版(CDP)预售开启,更有鸿蒙SDK前来助力
华为·开源·开源软件·harmonyos
mg6686 小时前
鸿蒙系统的优势 开发 环境搭建 开发小示例
华为·harmonyos
lqj_本人7 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人7 小时前
使用 Flutter 绘制一个棋盘
harmonyos
lqj_本人10 小时前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
青瓷看世界11 小时前
华为HarmonyOS打造开放、合规的广告生态 - 插屏广告
华为·harmonyos·广告投放
青瓷看世界11 小时前
华为HarmonyOS借助AR引擎帮助应用实现虚拟与现实交互的能力2-管理AR会话
华为·ar·harmonyos·虚拟现实
2301_7955586412 小时前
鸿蒙的进化史
华为·harmonyos