鸿蒙HarmonyOS从零实现类微信app效果第一篇，基础界面搭建

最近鸿蒙HarmonyOS开发相关的消息非常的火，传言华为系手机后续将不再支持原生Android应用，所以对于原Android应用开发对应的Harmony版本也被一系列大厂提上了日程。作为一个名义上的移动端开发工程师（(⊙o⊙)…，最近写python多过Android），当人不让要来学习一波。本次的学习计划是实现一个类微信app效果，计划将常规的app效果都实现一下，以便后续如果需要写Harmony应用，可以直接上手。

由于我本人有多年的开发经验和多种语言的开发经验，对于Javascript和TypeScript也写得比较多，所以对于TypeScript语法部分将不再过多说明，想快速了解到的同学可以直接查看我的快速入门TypeScript系列文章。同时，文章中设计到的我认为比较重要的知识点，会在文章中作说明。

  • TypeScript快速入门教程（一）、基础类型和变量声明
  • TypeScript快速入门教程（二）、面向对象知识（接口、类、抽象类）
  • TypeScript快速入门教程（三）、函数、范型使用
  • TypeScript快速入门教程（四）、联合类型 & 交叉类型 & 类型保护

功能拆分

在这里插入图片描述
上面只是一个简单的拆分示例，当我们拿到一个功能的时候，一定要先将页面进行拆分，当我们要实现的功能通过一个个子模块实现后，最终通过子模块的拼接，就可以得到一个完整的功能。

细节实现

今天第一课，先实现整体的界面搭建，最终的实现效果如下图。

在这里插入图片描述
当我们点击之后，可以切换上面的tab内容界面。

Harmony提供了很多种方式可以实现底部导航栏，真实项目使用的话，大家可以直接使用系统提供的方式即可。这里我采用的方式是自己用最基础的代码实现，这样也能联系到一些想要学习的功能，开箱即用是好的，但是也很容易让我们错过很多关键知识。

实现BottomNavigationItem

我们这里整体的底部是一个BottomNavigation，他是由四个BottomNavigationItem组合实现。首先定义一个实体类，用于存贮底部导航栏对象信息。

export class BottomNavigationEntity {
  /**
   * 底部导航tab标题
   */
  title: Resource;

  /**
   * 底部导航tab图片
   */
  image: Resource;

  /**
   * 底部导航tab图片，未选中
   */
  unCheckImage: Resource;

  /**
   * tab类型标志位
   */
  tag: number;

  constructor(tag: number, title: Resource, image: Resource, unCheckImage: Resource) {
    this.tag = tag;
    this.title = title;
    this.image = image;
    this.unCheckImage = unCheckImage;
  }
}

接下来的 在这里插入图片描述
组成是一个图标+一个文字组合而成，第一反应我们应该行到Column组件。

Column组件中，用于处理组件内容对其方式使用的话flex方式。
alignItems(value: HorizontalAlign): ColumnAttribute; # 水平方向
justifyContent(value: FlexAlign): ColumnAttribute; # 垂直方向
了解了这些之后，接下来看具体BottomNavigationItem的封装代码。

@Preview  # 方便单个view直接预览
@Component  # 标记是一个组件，可供其他组件引用
export default struct BottomNavigationItem {
  private navigationItem: BottomNavigationEntity;
  
  # 这里的Link是用于父组件和子组件进行通信	
  @Link currentIndex: number;

  build() {
    Column({ space: 5 }) {
    # 这里判断如果当前选中的item是当前的这个，则使用选中状态图片
      Image(this.currentIndex === this.navigationItem.tag ? this.navigationItem.image : this.navigationItem.unCheckImage)
        .width(24)
        .height(24)
      Text(this.navigationItem.title)
        .fontSize(14)
        .fontColor(this.currentIndex === this.navigationItem.tag ? Color.Green : 0x333333)
    }
  }
}

代码是不是非常简单。对于@Link你如果现在不太清楚，也没有关系，我最终会专门进行一个讲解。

实现BottomNavigation

@Preview
@Component
export default struct BottomNavigation {
  @Link currentItemIndex: number;

  build() {
    Row({ space: 5 }) {
      //  这里通过对结合遍历，生成BottomNavigationItem进行填充BottomNavigation
      ForEach(navigationViewModel.getNavigationList(), (item: BottomNavigationEntity, index: number) => {
        # 对于这里的$currentItemIndex写法可以先将疑问留着，后续结合Link一并说明
        BottomNavigationItem({ navigationItem: item, currentIndex: $currentItemIndex })
          .onClick(() => {
          	#  点击后更新选中的item，以实现刷新界面的效果
            this.currentItemIndex = index
          })
      })
    }
    .width('100%')
    .height(65)
    .padding({
      top: 5,
      bottom: 5
    })
    .justifyContent(FlexAlign.SpaceAround)
    .backgroundColor(0xF3EEEA)
  }
}

实现WechatMainFrame

整体的界面组合使用RelativeContainer进行组合，将BottomNavigation固定于屏幕的底部，内容区域底部在BottomNavigation之上，顶部和屏幕顶部对其，使其填充满BottomNavigation之上的部分。内容区域使用Stack将所有的内容层叠展示，切换到哪个展示，则使用visibility方法设置该页面展示即可。

@Entry
@Component
struct WechatMainFrame {
  @State currentCheckIndex: number = 0;

  build() {
    RelativeContainer() {
      BottomNavigation({ currentItemIndex: $currentCheckIndex })
        .alignRules({
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
          left: { anchor: "__container__", align: HorizontalAlign.Start }
        })
        .id("bottomNavigation")

      Stack() {
        HomeFragment().visibility(this.currentCheckIndex == 0 ? Visibility.Visible : Visibility.Hidden)
        ContactFragment().visibility(this.currentCheckIndex == 1 ? Visibility.Visible : Visibility.Hidden)
        DiscoverFragment().visibility(this.currentCheckIndex == 2 ? Visibility.Visible : Visibility.Hidden)
        MeFragment().visibility(this.currentCheckIndex == 3 ? Visibility.Visible : Visibility.Hidden)
      }
      .width('100%')
      .height('100%')
      .alignRules({
        left: { anchor: "__container__", align: HorizontalAlign.Start },
        right: { anchor: "__container__", align: HorizontalAlign.End },
        bottom: { anchor: "bottomNavigation", align: VerticalAlign.Top },
        top: { anchor: "__container__", align: VerticalAlign.Top }
      })
      .id("contentPanel")
    }
    .width('100%').height('100%')
  }
}

入口页面EntryAbility

export default class EntryAbility extends UIAbility {
  ...
  onWindowStageCreate(windowStage: window.WindowStage) {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/WechatMainFrame', (err, data) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });
  }
  ...

至此整个页面的框架结构完成了。

关于@Link相关的说明

关于更详细的内容，可以看官方文章说明。@Link装饰器：父子双向同步

我们对于视图更新，可以使用@State 标记变量，但是@State不能进行跨文件使用。这个时候@Link的实现就弥补了@State的不足。使用@Link的话。子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。

  • @Link装饰的变量与其父组件中的数据源共享相同的值。
  • @Link装饰器不能在@Entry装饰的自定义组件中使用。
  • @Link子组件从父组件初始化@State的语法为Comp({ aLink: this.aState })。同样Comp({aLink: $aState})也支持。
    在这里插入图片描述
    下面我们回到上面的代码中。结合代码进行分析。
    当我们在BottomNavigation中.onClick(() => { this.currentItemIndex = index })在点击之后，会更改@Link currentItemIndex: number;触发界面ui的更改。而BottomNavigationItem({ navigationItem: item, currentIndex: $currentItemIndex })中，我们需要把选中的item的index值传递给BottomNavigationItem本身。而作为传递的值，则需要使用$标记。这样点击之后会将BottomNavigationItem的值也触发更改，以达到更改布局效果。BottomNavigationItem的判断也会根据这个值变化而变化。

点击之后，除了对BottomNavigation的状态更新之外，还需要对内容区域进行判断展示不同的界面。因此BottomNavigation的@Link currentItemIndex: number;又要和WechatMainFrame的 @State currentCheckIndex: number = 0;进行双向绑定BottomNavigation({ currentItemIndex: $currentCheckIndex })。最终当我们点击BottomNavigation的onclick的时候，就会向上和WechatMainFrame双向绑定更改内容区域，也会和BottomNavigationItem双向绑定更改底部导航展示。

由于我自己也是在边学边实现功能逻辑，既要写文章，还要实现代码功能，所以更新大体上控制在2~3天更新一篇，文章中尽可能会将我觉得比较重要的知识点拎出来说明。对于看完还不太清楚的，可以私信或者查阅其他文章了解，知识的获取不应该被局限，希望我的文章给你带来帮助。谢谢阅读。

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

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

相关文章

【计算机网络】VLAN原理和配置

【计算机网络】VLAN原理和配置

目录 1、VLAN的原理 1.1、什么是VLAN 1.2、为什么要使用VLAN 1.3、VLAN的三种端口类型 1.4、VLAN的划分方法 2、VLAN的配置 1、VLAN的原理 1.1、什么是VLAN VLAN（Virtual Local Area Network）即虚拟局域网，是将一个物理的LAN在逻辑上…
阅读更多...
十年软件测试老程序告诉你性能测试的左移右移到底能干嘛

十年软件测试老程序告诉你性能测试的左移右移到底能干嘛

常规的性能测试一般都是在测试阶段集成测试时候才开始介入，很容易测试时间不够，可不可以借鉴测试左移右移的思路，更早的介入和发现性能风险，然后在测试阶段更专注于分析优化？ 借着这个问题，结合自己的实践…
阅读更多...
Maven依赖管理项目构建工具的安装与配置

Maven依赖管理项目构建工具的安装与配置

本篇来自尚硅谷的笔记，在线视频观看：Maven依赖管理项目构建工具，更多笔记欢迎访问：小熊学Java 一、Maven简介 1、为什么学习Maven 1.1、Maven是一个依赖管理工具 ①jar 包的规模 随着我们使用越来越多的框架，或者框…
阅读更多...
linux DMA设备驱动详解

linux DMA设备驱动详解

一，DMA相关定义（fpga、wait_queue 、device、interrupt、 dma_request_channel 函数、dma_start_transfer函数、poll、read，platform总线） DMA (直接内存读写)是Direct Memory Access的缩写，也就是内存到内存&#xf…
阅读更多...
k8s自定义Endpoint实现内部pod访问外部应用

k8s自定义Endpoint实现内部pod访问外部应用

自定义endpoint实现内部pod访问外部应用 endpoint除了可以暴露pod的IP和端口还可以代理到外部的ip和端口 使用场景 公司业务还还没有完成上云， 一部分云原生的，一部分是实体的 业务上云期间逐步实现上云，保证各个模块之间的解耦性 比如使…
阅读更多...
使用GPT-4训练数据微调GPT-3.5 RAG管道

使用GPT-4训练数据微调GPT-3.5 RAG管道

原文：使用GPT-4训练数据微调GPT-3.5 RAG管道 - 知乎 OpenAI在2023年8月22日宣布，现在可以对GPT-3.5 Turbo进行微调了。也就是说，我们可以自定义自己的模型了。然后LlamaIndex就发布了0.8.7版本，集成了微调OpenAI gpt-3.5 turbo的…
阅读更多...
敏捷开发中如何写好用户故事

敏捷开发中如何写好用户故事

写好用户故事是敏捷开发中非常重要的一环，它们是描述用户需求的核心。以下是一些关于如何编写优秀用户故事的建议： 使用标准模板： 一个常用的用户故事模板是“As a [用户角色]，I want [功能]，so that [价值]”。这种模…
阅读更多...
《RT-DETR魔术师》专栏介绍 CSDN独家改进创新实战 专栏目录

《RT-DETR魔术师》专栏介绍 CSDN独家改进创新实战 专栏目录

RT-DETR魔术师专栏介绍： https://blog.csdn.net/m0_63774211/category_12497375.html ✨✨✨魔改创新RT-DETR 🚀🚀🚀引入前沿顶会创新（CVPR2023，ICCV2023等），助力RT-DETR &#…
阅读更多...
【C#学习】常见控件学习

【C#学习】常见控件学习

】 如何让Button控件只显示图片 第一步：设置按钮背景图片，并且图片随按钮大小变化 第二步：设置按钮使之只显示图片 button1.FlatStyle FlatStyle.Flat;//stylebutton1.ForeColor Color.Transparent;//前景button1.BackColor Color.Tran…
阅读更多...
java项目之共享充电宝管理系统（ssm框架）

java项目之共享充电宝管理系统（ssm框架）

风定落花生，歌声逐流水，大家好我是风歌，混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的共享充电宝管理系统。项目源码以及部署相关请联系风歌，文末附上联系信息 。 项目简介： 管理员：首页、个…
阅读更多...
Linux系统编程——进程的创建

Linux系统编程——进程的创建

函数名 fork&#xff1a;创建一个子进程 函数原型 pid_t fork(void); 调用该函数时&#xff0c;需包含以下头文件 #include <unistd.h>返回值 fork函数调用成功&#xff0c;返回两次PID &#xff08;1&#xff09;返回值为0&#xff0c;代表当前进程是子进程 &am…
阅读更多...
thinkphp 自定义错误页面

thinkphp 自定义错误页面

在访问无效的UI 这个效果不好&#xff0c;要改成自定义的 <?php namespace app\controller;class ErrorController {public function __call($method,$args){return error request!;} }之后就是提示
阅读更多...
深度学习之基于YoloV5钢材表面缺陷检测系统

深度学习之基于YoloV5钢材表面缺陷检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 深度学习技术在计算机视觉领域的应用为表面缺陷检测系统的发展提供了强大的推动力。本文将介绍基于YoloV5的钢材表面…
阅读更多...
UE5、CesiumForUnreal实现加载GeoJson绘制墙体（Wall）功能（StaticMesh方式）

UE5、CesiumForUnreal实现加载GeoJson绘制墙体（Wall）功能（StaticMesh方式）

文章目录 1.实现目标2.实现过程2.1 实现原理2.2 具体代码2.3 应用测试2.3.1 流动材质2.3.2 蓝图测试3.参考资料1.实现目标 与上一篇以StaticMesh方式实现面类似，本文通过读取GeoJson数据，在UE中以StaticMeshComponent的形式绘制出墙体数据，并支持Editor和Runtime，在Editor下…
阅读更多...
2013年03月14日 Go生态洞察：走向Go 1的道路 ️

2013年03月14日 Go生态洞察：走向Go 1的道路 ️

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…
阅读更多...
zabbix的服务器端 server端部署

zabbix的服务器端 server端部署

zabbix的服务器端 server 主机iplocalhost&#xff08;centos 7&#xff09;192.168.10.128 zabbix官网部署教程 但是不全&#xff0c;建议搭配这篇文章一起看 zabbixAgent部署 安装mysql 所有配置信息和Zabbix收集到的数据都被存储在数据库中。 下载对应的yum源 yum ins…
阅读更多...
Fortinet 聚焦核心业务增长领域，巩固网安市场领导地位，持续推动行业创新

Fortinet 聚焦核心业务增长领域，巩固网安市场领导地位，持续推动行业创新

近日&#xff0c;专注于推动网络与安全融合的全球网络安全领导者 Fortinet&#xff08;NASDAQ&#xff1a;FTNT&#xff09;发布第三季度财报。同期&#xff0c;Fortinet做出重大战略宣布&#xff0c;未来将重点聚焦高速增长的差异化市场。Fortinet 将紧紧围绕安全组网、Univer…
阅读更多...
内涝积水设备推荐，城市易涝点怎么监测？

内涝积水设备推荐，城市易涝点怎么监测？

随着城市化逐步发展&#xff0c;城市内涝问题越来越多且越来越严重&#xff0c;给人们的出行和生活带来很多的不便。为了解决这一问题&#xff0c;内涝积水监测仪受到越来越受到关注。 内涝积水设备能够实时监测道路积水情况&#xff0c;包括积水深度等信息&#xff0c;为相关人…
阅读更多...
day06_Java中的流程控制语句

day06_Java中的流程控制语句

流程控制 简单来讲所谓流程就是完成一件事情的多个步骤组合起来就叫做一个流程。在一个程序执行的过程中&#xff0c;各条语句的执行顺序对程序的结果是有直接影响的。我们必须清楚每条语句的执行流程。而且&#xff0c;很多时候要通过控制语句的执行顺序来实现我们想要的功能…
阅读更多...
Leetcode刷题详解——矩阵中的最长递增路径

Leetcode刷题详解——矩阵中的最长递增路径

1. 题目链接&#xff1a;329. 矩阵中的最长递增路径 2. 题目描述&#xff1a; 给定一个 m x n 整数矩阵 matrix &#xff0c;找出其中 最长递增路径 的长度。 对于每个单元格&#xff0c;你可以往上&#xff0c;下&#xff0c;左&#xff0c;右四个方向移动。 你 不能 在 对角…
阅读更多...
最新文章

Copyright @ 2022~2023