HarmonyOS --- 首页（新新新手版，高手误入）

一、前言

每一个App都应该有一个首页，在Android中一般由MainActivity + Navigation + Fragment * N （随便你怎么组合，用别的也一样），鸿蒙呢？瞅瞅吧。阿弥陀佛，苦逼Android学完Java学Dart、学完Dart学Kotlin、学完Kotlin学Compose、学完Compose，HarmonyOS来啦！艹（更别说还有Framework）艹艹艹。

如果您有任何疑问、对文章写的不满意、发现错误或者有更好的方法，欢迎在评论、私信或邮件中提出，非常感谢您的支持。🙏

二、准备

因为众所不周知的原因，用的是编译SDK是9。DEV版本是DevEco Studio 4.0 Release。以及我只简单的写了一下底部的Tab，具体的内容也只有一个Text作为填充物～～～ 主要还是分享给大家如何写一个首页的基本代码啦～。

三、你需要一个项目

我们使用最最最基本的项目结构就好了，你可能需要如此做

File->New->Create Project->Application->Empty Ability->Next->(API 9)->Done->Finish 完事。

四、准备一点数据

显然，一个首页会有一个底部导航栏。一般而言会是“文字+图片”的组合，并且都具有选中状态、非选中状态。再显然这玩意是个数组。我们准备下

  1. 新建一个data/MainCategory.ets文件

    记得新建一个data文件夹

    简单的在里面定义一个数据结构

 // 定义一个接口来表示项目类别的结构。export interface ItemCategory {// 当类别被选中时显示的图像资源。// 图像文件的引用selectedImage: Resource,// 未被选中时显示的图像资源。// 用于在用户界面上区分选中和未选中的状态。unselectedImage: Resource,// 类别的标题资源。// 一个字符串资源的引用title: Resource}

贴心的加上注释。PS：export表示某个实体（比如一个类、接口、变量或函数）应该被导出，使得它可以在其他文件或模块中被导入和使用。

  1. 构造一丢丢数据

    我们打算做四个页面，所以准备四个数据吧～

 export const MAIN_CATEGORIES: ItemCategory[] =[{selectedImage: $r('app.media.icon_home_select'),unselectedImage: $r('app.media.icon_home_unselect'),title: $r("app.string.main_home")},{selectedImage: $r('app.media.icon_group_select'),unselectedImage: $r('app.media.icon_group_unselect'),title: $r("app.string.main_group")},{selectedImage: $r('app.media.icon_message_select'),unselectedImage: $r('app.media.icon_message_unselect'),title: $r("app.string.main_message")},{selectedImage: $r('app.media.icon_mine_select'),unselectedImage: $r('app.media.icon_mine_unselect'),title: $r("app.string.main_mine")}]

PS：const关键字用于声明一个常量，意味着一旦被赋值后，其值就不能被改变（PPS：如果变量引用的是一个对象或数组，那么对象的属性或数组的元素是可以被修改）。

  1. 温柔的导入

回到我们的Index.ets。让我们导入刚刚准备的数据～

 import { ItemCategory, MAIN_CATEGORIES } from './data/MainCategory'

import就是导入的意思，这玩意一般在文件的最前面。

{}用来声明你要导入这个文件中的什么（PS：这玩意能换名字）

 import { ItemCategory, MAIN_CATEGORIES as NewName} from './data/MainCategory'

from 显然没什么用

./聪明的你，很清楚的知道这玩意的意思是：表示当前文件所在目录。顺带还想到了../表示：父目录。那还有......../?抱歉，没有了。但是你可以这么写

 import { ItemCategory, MAIN_CATEGORIES as NewName} from '../../main/ets/data/MainCategory'

这样你就可以无限套娃了～一直../下去吧！少年！

五、准备好Tab

首先，肯定有当前展示页面之分，所以我们需要记录下选中的页面的Tab的Index

 @State tabCurrentIndex: number = 0

PS:@State装饰的状态变量，一旦变量拥有了状态属性，就和自定义组件的渲染绑定起来。当状态改变时，UI会发生对应的渲染改变(官网抄的)。

我们直接使用鸿蒙之超能Tab之Tab，

 import { ItemCategory, MAIN_CATEGORIES } from './data/MainCategory'/*生成的别管*/@Entry/*生成的别管*/@Component/*struct 生成的别管*/struct Index {@State tabCurrentIndex: number = 0/*build UI都写在这*/build() {// 创建 Tabs 组件，设置其属性Tabs({ barPosition: BarPosition.End }) {// ForEach 用于遍历 MAIN_CATEGORIES，为每个元素创建 TabContent 组件ForEach(MAIN_CATEGORIES, (item: ItemCategory, index: number) => {// 创建 TabContent 组件TabContent() {// 在这里可以添加 TabContent 组件的内容}// 设置 TabContent 组件的 tabBar 属性.tabBar(/* 这里可以设置 tabBar 相关属性 */)})}// 设置 Tabs 组件的其他属性.scrollable(false) // 设置是否可滚动 （首页一般来说，左右不能滑动吧？）.barHeight(56) // 设置选项卡高度.barWidth('100%') // 设置选项卡宽度.vertical(false) // 设置选项卡排列方式（垂直或水平）.backgroundColor(0xFFFEFEFE) // 设置背景色// 设置当选项卡改变时的回调函数.onChange((index: number) => {this.tabCurrentIndex = index; // 更新当前选中的选项卡索引})}}

可以看到，我们的Tab已经准备好了！然后我们需要填充下TabBar。

 // 使用 @Builder 装饰器，表示 TabBarBuilder 是一个构建器方法@BuilderTabBarBuilder(index: number, selectedImage: Resource, unselectedImage: Resource, tabBarName: Resource) {// 构建一个列布局（Column），用于垂直排列子组件Column() {// 在列中添加一个图像组件// 如果当前索引与传入的索引相同，则显示选中的图像，否则显示未选中的图像Image(this.tabCurrentIndex === index ? selectedImage : unselectedImage).width(24) // 设置图像宽度.height(24) // 设置图像高度.margin({ bottom: 4 }) // 设置底部外边距​// 在列中添加一个文本组件，用于显示选项卡名称Text(tabBarName).fontSize(10) // 设置字体大小.fontFamily('HarmonyHeiTi-Medium') // 设置字体.fontColor(this.tabCurrentIndex === index ? 0xFF2E2F2E : 0xFF848683) // 设置字体颜色，根据选中状态改变}// 设置列组件的宽度为 100%.width('100%')// 设置列组件的内边距.padding({ top: 6, bottom: 6 })// 设置子项在水平方向上的对齐方式为居中.alignItems(HorizontalAlign.Center)// 设置组件的 ID，使用索引来确保唯一性.id(`tabBar${index}`)}

那么往Tab组件里面一塞

 tabBar(this.TabBarBuilder(index, item.selectedImage, item.unselectedImage, item.title))

那么Tab就完成啦～～～

六、TabContent

重要的页面来了。

为了不让Index内太臃肿，我们直接！新建一个 MainPageContainer类,并塞入一个Text

 @Componentexport struct MainPageContainer {private mTitle: Resource;build() {Column() {Text(this.mTitle) // 使用 mTitle 作为文本内容.fontSize(50) .width('100%').height('100%') .textAlign(TextAlign.Center) .fontColor(0xFF9FE748) }.height('100%').padding({ top: 12 })}}

然后我们直接在Index中导入一下

 import { MainPageContainer } from './MainPageContainer'

再这么一用

 TabContent() {MainPageContainer({ mTitle: item.title })}

完事～

最后效果放在最前面啦～

七、总结

这玩意挺简单了，但是这DevEco-Studio是我用过的最垃圾的工具了。真的烂。这代码提醒，这代码补全，不如不要，啥也提醒不了，就只会“Did you mean xxxx”、“ignore x x x x"。💩。

为了能让大家更好的学习鸿蒙 (Harmony OS) 开发技术，这边特意整理了《鸿蒙 (Harmony OS)开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙 (Harmony OS)开发学习手册》

入门必看：https://qr21.cn/FV7h05

  1. 应用开发导读(ArkTS)
  2. 应用开发导读(Java)

HarmonyOS 概念：https://qr21.cn/FV7h05

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全

如何快速入门：https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. 构建第一个JS应用
  4. ……

开发基础知识：https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

✺ch5——纹理贴图

✺ch5——纹理贴图

目录 加载纹理图像文件纹理坐标在着色器中使用纹理：采样器变量和纹理单元纹理贴图：示例程序多级渐远纹理贴图各向异性过滤环绕和平铺透视变形材质——更多OpenGL细节补充说明 纹理贴图是在栅格化的模型表面上覆盖图像的技术。 它是为渲染场景添加真实感的…
阅读更多...
Jmeter实现性能测试--高频率（高吞吐量）

Jmeter实现性能测试--高频率（高吞吐量）

高频率场景通常涉及系统需要在极短时间内处理大量请求或事件。这些场景可能要求系统在短时间内执行多次操作，例如高频率的数据更新、传感器数据采集、金融交易、实时监控等。以下是一些高频率场景的示例： 金融交易： 高频交易系统需要在极短时…
阅读更多...
路由表route

路由表route

目录 Windows维护路由表，利用route命令，VPN完美异地组网什么是多网络环境这里我做个情景演示重置ipv4网络再次确认一下网络背景网关是什么多网络规划思路最后拓展内容实测一下网关切换选项网关的网关命令整理 Windows维护路由表，利用route命令…
阅读更多...
MongoDB与大数据处理：构建高性能分布式数据库

MongoDB与大数据处理：构建高性能分布式数据库

MongoDB是一种非关系型数据库，具有高度灵活性和可扩展性。在处理大量数据时，索引的优化是提升查询性能的关键。下面将介绍一些MongoDB索引优化的指南，帮助用户更好地利用索引来提高查询性能。 一、选择适当的索引类型 1、单字段索引&#xf…
阅读更多...
吴恩达深度学习intuition

吴恩达深度学习intuition

这里是看吴恩达课程的一些记录和联想（因为以前听过，因此不会很细致，只做个人记录） 课程链接 首先提到training set, validation set (dev set)，test set的分割问题。老师提到，最常用的划分方法传统方法是…
阅读更多...
第四节TypeScript 声明变量

第四节TypeScript 声明变量

1、typescript变量声明 变量是一种使用方便的占位符，用于引用计算机内存地址。 我们可以把变量看做存储数据的容器。 typescript变量的命名规则： 变量名称可以包含数字和字母。除了下划线_和美元$符号外，不能包含其它特殊字符&#xff0c…
阅读更多...
（备战2024）三天吃透Java面试八股文，面试通过率高达90%

（备战2024）三天吃透Java面试八股文，面试通过率高达90%

什么样的求职者能够获得面试官的青睐？求职者需要准备哪些内容来面对形形色色的面试官？这两份资料是我在几十场面试中被面试官问到的问题，比其他复制粘贴的面试题强一百倍，堪称全网最强（我不太喜欢“全网最强”这样的字…
阅读更多...
2023.12.18 制作py,shell脚本进行数据库操作与定时任务

2023.12.18 制作py,shell脚本进行数据库操作与定时任务

目录 虚拟机中已有的两个库: bi_db和shopnc_db 1.在pycharm中,使用pymysql,连接数据库进行增删改查操作 1.1 查询 1.2 修改 1.3 删除 1.4 增加 2.使用pandas,操作pycharm对数据库进行操作 2.1 对mysql进行覆盖写入 2.2 对mysql进行追加写入 3.在linux中,进行自动化定…
阅读更多...
【坐标系在动态SLAM中究竟有多重要】

【坐标系在动态SLAM中究竟有多重要】

文章目录 概要整体架构流程背景表示小结 概要 这篇文章对动态SLAM（Simultaneous Localization and Mapping）的多种解决方案进行了深入分析，并确定了解决该问题的最佳方案。文章的重点在于强调了坐标系在解决动态SLAM问题中的重要性。 动态S…
阅读更多...
DC-8靶场

DC-8靶场

目录 DC-8靶场链接： 首先进行主机发现： sqlmap得到账号密码： 反弹shell： exim4提权： Flag： DC-8靶场链接： https://www.five86.com/downloads/DC-8.zip 下载后解压会有一个DC-8.ova文件…
阅读更多...
ADS学习笔记（一）——更新中

ADS学习笔记（一）——更新中

在ADS中，信号上升时间为信号从0～100％所用的时间，而实际上定义的上升边均为10％～90％，所以可以认为上升边＝0.8*ADS设置上升时间。 一、终端开路及短路的反射信号 1.仿真条…
阅读更多...
gitcode邀请协作人员

gitcode邀请协作人员

项目首页 点击项目设置 点击项目成员设置--生成邀请链接 设置权限、是否需要审核、成员有效时间、邀请链接有效时间（不设置时间就是永久有效） 点击创建链接 点击复制分享给别人加入即可
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023