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效果上我们知道是可滑动的tab,切换tab时内容切换,因此通过Tabs组件实现

参考链接:OpenHarmony Tabs

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

1、Tabs列表实现(ProjectList)

build() {
   Tabs({
      barPosition: BarPosition.Start,
      controller: this.tabsController,
   }) {
      ForEach(this.projectListData, (item: ProjectListItemBean) => {
         TabContent() {
            TabContentLayout({ tabId: item.id, onDataFinish: () => {
               this.onDataFinish()
            } })
         }
         .padding({ left: 12, right: 12 })
         .tabBar(new SubTabBarStyle(item.name))
      }, (item: ProjectListItemBean) => item.name)
   }
   .width('100%')
   .height('100%')
   .barMode(BarMode.Scrollable)
}

2、TabContentLayout列表内容实现

import { HttpManager, RefreshController, RefreshListView, RequestMethod } from '@app/BaseLibrary';
import LogUtils from '@app/BaseLibrary/src/main/ets/utils/LogUtils';
import { TabContentItemBean } from '../bean/TabContentItemBean';
import { TabContentBean } from '../bean/TabContentBean';
import router from '@ohos.router';

const TAG = 'TabContentLayout--- ';

@Component
export struct TabContentLayout {
   @State controller: RefreshController = new RefreshController()
   @State tabContentItemData: Array<TabContentItemBean> = [];
   @State pageNum: number = 1 //从1开始
   @State isRefresh: boolean = true
   @Prop tabId: number
   private onDataFinish: () => void //数据加载完成回调

   aboutToAppear() {
      LogUtils.info(TAG, "tabId: " + this.tabId)
      this.getTabContentData()
   }

   private getTabContentData() {
      LogUtils.info(TAG, "pageNum: " + this.pageNum)
      HttpManager.getInstance()
         .request<TabContentBean>({
            method: RequestMethod.GET,
            header: { "Content-Type": "application/json" },
            url: `https://www.wanandroid.com/project/list/${this.pageNum}/json?cid=${this.tabId}`
         })
         .then((result: TabContentBean) => {
            LogUtils.info(TAG, "result: " + JSON.stringify(result))
            if (this.isRefresh) {
               this.controller.finishRefresh()
            } else {
               this.controller.finishLoadMore()
            }
            if (result.errorCode == 0) {
               if (this.isRefresh) {
                  this.tabContentItemData = result.data.datas
               } else {
                  this.tabContentItemData = this.tabContentItemData.concat(result.data.datas)
               }
            }
            this.onDataFinish()
         })
         .catch((error) => {
            LogUtils.info(TAG, "error: " + JSON.stringify(error))
            if (this.isRefresh) {
               this.controller.finishRefresh()
            } else {
               this.controller.finishLoadMore()
            }
            this.onDataFinish()
         })
   }

   build() {
      RefreshListView({
         list: this.tabContentItemData,
         controller: this.controller,
         refreshLayout: (item: TabContentItemBean, index: number): void => this.itemLayout(item, index),
         onItemClick: (item: TabContentItemBean, index: number) => {
            LogUtils.info(TAG, "点击了:index: " + index + " item: " + item)
            router.pushUrl({
               url: 'pages/WebPage',
               params: {
                  title: item.title,
                  uriLink: item.link
               }
            }, router.RouterMode.Single)
         },
         onRefresh: () => {
            //下拉刷新
            this.isRefresh = true
            this.pageNum = 0
            this.getTabContentData()
         },
         onLoadMore: () => {
            //上拉加载
            this.isRefresh = false
            this.pageNum++
            this.getTabContentData()
         }
      })
   }

   @Builder
   itemLayout(item: TabContentItemBean, index: number) {
      RelativeContainer() {
         //封面
         Image(item.envelopePic)
            .alt($r('app.media.ic_default_cover'))
            .width(110)
            .height(160)
            .borderRadius(5)
            .id('imageEnvelope')
            .alignRules({
               top: { anchor: '__container__', align: VerticalAlign.Top },
               left: { anchor: '__container__', align: HorizontalAlign.Start }
            })

         //title
         //标题
         Text(item.title)
            .fontColor('#333333')
            .fontWeight(FontWeight.Bold)
            .maxLines(2)
            .textOverflow({
               overflow: TextOverflow.Ellipsis
            })
            .fontSize(18)
            .margin({ left: 15 })
            .maxLines(2)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .id("textTitle")
            .alignRules({
               top: { anchor: '__container__', align: VerticalAlign.Top },
               left: { anchor: 'imageEnvelope', align: HorizontalAlign.End },
               right: { anchor: '__container__', align: HorizontalAlign.End }
            })

         //描述
         Text(item.desc)
            .fontColor('#666666')
            .fontSize(16)
            .id("textDesc")
            .margin({ left: 15, top: 15 })
            .maxLines(4)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .alignRules({
               top: { anchor: 'textTitle', align: VerticalAlign.Bottom },
               left: { anchor: 'imageEnvelope', align: HorizontalAlign.End },
               right: { anchor: '__container__', align: HorizontalAlign.End }
            })

         //时间
         Text(item.niceDate + "  " + "作者:" + item.author)
            .fontColor('#666666')
            .fontSize(14)
            .margin({ left: 15 })
            .id("textNiceDate")
            .alignRules({
               bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
               left: { anchor: 'imageEnvelope', align: HorizontalAlign.End }
            })
      }
      .width('100%')
      .height(180)
      .padding(10)
      .margin({ left: 10, right: 10, top: 6, bottom: 6 })
      .borderRadius(10)
      .backgroundColor(Color.White)
   }
}

3、项目页面对布局引用

import { LoadingDialog } from '@app/BaseLibrary';
import LogUtils from '@app/BaseLibrary/src/main/ets/utils/LogUtils';
import { ProjectList } from './widget/ProjectList';

@Component
export struct ProjectPage {
   @State projectLoadDataStatus: boolean = false

   aboutToAppear() {
      //弹窗控制器,显示
      this.dialogController.open()
      LogUtils.info("33333333333  ProjectPage  aboutToAppear执行了")
   }

   private dialogController = new CustomDialogController({
      builder: LoadingDialog(),
      customStyle: true,
      alignment: DialogAlignment.Center
   })

   build() {
      Column() {
         ProjectList({ onDataFinish: () => {
            this.dialogController.close()
            this.projectLoadDataStatus = true
         } })
      }
      .visibility(this.projectLoadDataStatus ? Visibility.Visible : Visibility.Hidden)
      .width('100%')
      .height('100%')
   }
}

4、页面初始化获取Tabs数据

aboutToAppear() {
   this.getProjectListData()
}

5、根据选中的Tab获取对应Tab的内容数据

aboutToAppear() {
   LogUtils.info(TAG, "tabId: " + this.tabId)//选中的tab的id
   this.getTabContentData()
}

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

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

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

相关文章

(三)OpenOFDM符号对齐

符号对齐 模块&#xff1a;sync_long.v输入&#xff1a;I (16), Q (16), phase_offset (32), short_gi (1)输出&#xff1a;long_preamble_detected (1), fft_re (16), fft_im (16) 检测到数据包后&#xff0c;下一步是精确确定每个 OFDM 符号的起始位置。在802.11中&#xf…

基于大语言模型(LLM)的表格理解任务探索与实践

大语言模型&#xff08;LLMs&#xff09;的发展日新月异&#xff0c;为表格理解任务带来了新的可能性。表格理解任务&#xff0c;如基于表格的问答和表格事实验证&#xff0c;要求从自由形式的文本和半结构化的表格数据中提取深层次的语义信息。与泛化的文本推理任务不同&#…

数字电子技术实验(八)

单选题 1.3线-8线译码器74138&#xff0c;当输入时&#xff0c;输出有效的是哪路信号 答案&#xff1a;D 评语&#xff1a;0分 单选题 2.用74161计数器实现十进制计数器&#xff0c;置数端的输入信号为&#xff1f; 答案&#xff1a;C 评语&#xff1a;0分 单选题 3.电路中…

《ElementPlus 与 ElementUI 差异集合》el-input 多包裹一层 el-input__wrapper

差异 element-ui el-input 中&#xff0c;<div class"el-input"> 下一级就是 <input> 标签 &#xff1b;element-plus el-input中&#xff0c;<div class"el-input"> 和 <input> 标签之间多了一层 <div class"el-input__…

【LabVIEW FPGA入门】FPGA中的数据流

LabVIEW 以数据流方式执行代码。 当节点的所有输入上都存在数据时&#xff0c;该节点就会执行。 当节点完成执行时&#xff0c;节点的输出将数据传递到下游的下一个节点。 LabVIEW FPGA 使用三个组件来维护这种数据流范例。 节点具有与其功能相对应的逻辑 同步&#xff0c;该组…

直播预告 | 同立海源联合景达生物、星奕昂生物共话“NK细胞药物研发进展及工艺开发策略”!

2023年&#xff0c;免疫细胞治疗领域的产业化步伐显著加快&#xff0c;多种新型细胞治疗药物的上市进程不断推进&#xff0c;为市场带来了多元化和差异化的发展机遇。通用型免疫细胞产品、TCR-T、TIL等创新药物的涌现&#xff0c;不仅丰富了治疗选择&#xff0c;还推动了整个行…

redis学习-redis介绍

目录 1.redis介绍 2.redis常用命令&#xff08;可以在官网的命令中查看redis的所有命令&#xff09; 2.1终端命令 2.2 redis通用命令 2.3五大基本类型的命令以及特殊情况分析 &#xff08;导航&#xff09; 3.事务 4. redis实现消息订阅 5. redis的两种持久化策略 …

第二证券|换手率高代表什么?

换手率是衡量一只股票交易是否活泼的重要目标之一&#xff0c;换手率越高阐明该股交易越活泼&#xff0c;换手率越低阐明该股越不活泼&#xff0c;其所呈现的方位不同&#xff0c;其含义也有所不同。 当股票经过长期的上涨之后&#xff0c;在高位呈现较高的换手率时&#xff0c…

使用ChatGPT高效完成简历制作[中篇2]-有爱AI实战教程(九)

演示站点&#xff1a; https://ai.uaai.cn 对话模块 官方论坛&#xff1a; www.jingyuai.com 京娱AI 一、导读&#xff1a; 在使用 ChatGPT 时&#xff0c;当你给的指令越精确&#xff0c;它的回答会越到位&#xff0c;举例来说&#xff0c;假如你要请它帮忙写文案&#xff0c…

算法——贪心

「贪心的本质是选择每一阶段的局部最优&#xff0c;从而达到全局最优」 贪心无套路 1. 分发饼干 贪心策略&#xff1a; &#xff08;1&#xff09;局部最优就是大饼干喂给胃口大的&#xff0c;充分利用饼干尺寸喂饱一个&#xff0c;全局最优就是喂饱尽可能多的小孩 &#xff08…

智能化代采系统在供应链管理中的应用探讨

随着信息技术的飞速发展和智能化技术的应用&#xff0c;供应链管理领域迎来了巨大的变革。智能化代采系统作为一种先进的供应链管理工具&#xff0c;正在逐渐改变传统的采购和供应链管理模式。本文将从系统集成与优化、数据分析与预测、智能采购决策、供应商管理、风险控制与优…

[HackMyVM] Quick

kali:192.168.56.104 主机发现 arp-scan -l # arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:d2:e0:49, IPv4: 192.168.56.104 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.56.1 0a:00:27:00:00:05 (Un…

总说上下文切换耗性能,那他到底耗了多少性能?

大家好&#xff0c;我是「云舒编程」&#xff0c;今天我们来聊聊上下文切换性能消耗。 文章首发于微信公众号&#xff1a;云舒编程 关注公众号获取&#xff1a; 1、大厂项目分享 2、各种技术原理分享 3、部门内推 一、前言 众所周知&#xff0c;操作系统是一个分时复用系统&…

天童美语开学季|开启“热辣滚烫”的新学期

新学期伊始&#xff0c;孩子们即将踏入一个充满挑战和机遇的学习环境。在这个关键时刻&#xff0c;学校和家庭需要更加紧密地协调合作&#xff0c;以确保孩子们能够得到充分的支持和帮助&#xff0c;顺利成长。    在假期生活分享中开启新学期第一课      寒假里孩子们…

深度学习 精选笔记(12)卷积神经网络-理论基础2

学习参考&#xff1a; 动手学深度学习2.0Deep-Learning-with-TensorFlow-bookpytorchlightning ①如有冒犯、请联系侵删。 ②已写完的笔记文章会不定时一直修订修改(删、改、增)&#xff0c;以达到集多方教程的精华于一文的目的。 ③非常推荐上面&#xff08;学习参考&#x…

【leetcode】二叉树的前序遍历➕中序遍历➕后序遍历

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家刷题&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 1. 二叉树的前序遍历2. 二叉树的中序遍历3. 二叉树的后序遍历 1. 二叉树的前序遍历 点击查看题目 根…

保护IP地址安全:维护网络安全

在今天的数字化时代&#xff0c;IP地址是互联网通信的基础&#xff0c;也是网络安全的重要组成部分。保护IP地址安全至关重要&#xff0c;因为恶意攻击者可能利用IP地址进行网络入侵、数据泄露、服务拒绝等攻击。因此&#xff0c;制定有效的保护措施&#xff0c;维护IP地址的安…

【算法】火柴排队(离散化、归并排序)

涵涵有两盒火柴&#xff0c;每盒装有 n 根火柴&#xff0c;每根火柴都有一个高度。现在将每盒中的火柴各自排成一列&#xff0c;同一列火柴的高度互不相同&#xff0c;两列火柴之间的距离定义为&#xff1a; ∑i(ai−bi)^2&#xff0c;其中 ai 表示第一列火柴中第 i个火柴…

网络工程师之路由交换协议篇

网络工程师之路由交换篇 路由交换静态路由RIPOSPFISISBGP 以下均为个人笔记&#xff0c;摘录到csdn做备份 路由交换 路由 优先级 RIP 100 OSPF ASE 150 OSPF NSSA 150 IBGP 255 EBGP 255 IS-IS 15 OSPF 10 静态 60 默认开销是0 路由算法类型 D-V&#xff1a; 距离矢量算法 RI…