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

相关推荐
SameX4 小时前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
SameX4 小时前
HarmonyOS Next 打造智能家居安全系统实战
harmonyos
Random_index12 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
鸿蒙自习室15 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu717 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
zhangjr057520 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
诗歌难吟4641 天前
初识ArkUI
harmonyos
SameX1 天前
HarmonyOS Next 设备安全特性深度剖析学习
harmonyos
郭梧悠1 天前
HarmonyOS(57) UI性能优化
ui·性能优化·harmonyos
郝晨妤2 天前
鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)
android·ios·华为od·华为·华为云·harmonyos·鸿蒙