『江鸟中原』鸿蒙——设计聊天软件界面并实现登录跳转
  JopgMnNvfUld 2023年12月09日 41 0

环境搭建

软件要求

 DevEco Studio版本:DevEco Studio 4.0 Beta1 Build Version: 4.0.0.201, built on June 10, 2023。

 HarmonyOS SDK版本:API version 9。

硬件要求

设备类型:华为手机或运行在DevEco Studio上的华为手机设备模拟器。

HarmonyOS系统:3.1.0 Developer Release。

简要介绍

简单的制作了登录界面和聊天应用界面,实现登录跳转功能。

首先看登录界面

先看看在预览器上展示的效果

『江鸟中原』鸿蒙——设计聊天软件界面并实现登录跳转_HarmonyOS

结构如下

『江鸟中原』鸿蒙——设计聊天软件界面并实现登录跳转_仿微信界面_02

在输入正确的账号密码后,点击登录,就会跳转到聊天界面.

页面间的导航可以通过页面路由router模块来实现。页面路由模块根据页面url找到目标页面,从而实现跳转。通过页面路由模块,可以使用不同的url访问不同的页面,包括跳转到Ability内的指定页面、用Ability内的某个页面替换当前页面、返回上一页面或指定的页面等。通过params来传递参数。

在使用页面路由之前,需要先导入router模块,代码如下所示。

// 导入router模块
import router from '@ohos.router';

这里我选择了调用router.push()方法的方式实现页面跳转。相关代码如下:

Button("登陆").width("90%").height(60).backgroundColor(Color.Orange).onClick(() => {

        if (this.username == "admin" && this.password == "admin") {

          router.push({
            url: "pages/Main",
            params:{src:'登陆成功',}
          })
        }
        else {
          promptAction.showToast({
            message:"密码或用户名错误,请重新输入"
          })
        }
      })

登录界面的代码主要包括:

1导入所需的模块。其中包括: 

 - `router`:用于导航到不同页面的模块。

  - `prompt`:用于显示提示信息的模块。

  - `promptAction`:用于显示Toast提示信息的模块。

2创建一个名为`IndexPage`的组件,包含三个状态属性:`message`、`password` 和 `username`。这些属性将用于存储和操作用户在登录页面中输入的信息。

3. 构建登录页面的布局。其中包括:

  - 显示“登陆”的文本,并对其进行样式设置。

  - 两个`Row`组件,包含用户名和密码的提示信息,以及用于输入用户名和密码的`TextInput`组件。

  - 一个`Divider`组件,用于分隔用户名和密码输入区域。

  - 一个包含“忘记密码?”的`Row`组件。

  - 一个`Button`组件,用于提交登录信息。点击按钮时,将检查用户名和密码是否正确,并根据结果导航到相应的页面或显示Toast提示信息。

  - 一个显示“其他登录方式”的文本,以及三个`Image`组件,分别表示QQ、微信和微博的登录图标。

插个题外话,登录界面和聊天界面中用到的图片都是在iconfont-阿里巴巴矢量图标库里下载的,只需免费注册一个账号,即可下载许多精美的图标素材。

然后再看聊天界面

先看看在预览器上展示的效果

『江鸟中原』鸿蒙——设计聊天软件界面并实现登录跳转_江鸟中原_03

聊天界面是使用`@Builder`装饰器来创建可重用的UI组件。创建了一个名为`Main`的组件,包括一个`TabsController`实例来管理选项卡切换。

`Main`组件有两个主要部分:

1. 状态属性和构造函数:

  - `index`:表示当前选中的选项卡索引。默认为0。

  - `tabsController`:用于管理选项卡切换的`TabsController`实例。

  - `arr1`:一个包含数字0到9的数组,用于为选项卡提供图标。

2. 四个使用`@Builder`装饰器创建的选项卡组件:

  - `tabMessage`:聊天选项卡。

  - `tabContactsGroup`:通讯录选项卡。

  - `tabDiscover`:发现选项卡。

  - `tabMy`:我的选项卡。

每个选项卡组件都包含一个图像和文本,用于显示选项卡的图标和名称。点击选项卡时,将更新`index`状态属性并触发`tabsController`的`changeIndex`方法,从而切换选项卡。

最后再看完整效果

『江鸟中原』鸿蒙——设计聊天软件界面并实现登录跳转_HarmonyOS_04

再看下什么也不输入和输入密码错误的情况

『江鸟中原』鸿蒙——设计聊天软件界面并实现登录跳转_HarmonyOS_05

这就是整个项目的全部展示。

总结

在这一个学期里,我学习了鸿蒙操作系统。通过一系列课程和实践,我初步了解了鸿蒙的基本概念、架构和设计理念。在学习过程中,我认识到鸿蒙操作系统不仅仅是一个技术平台,更是一项推动技术创新和产业发展的重要举措。 在不断的学习和使用中,我亲身体验了鸿蒙操作系统的诸多特性和优势,例如分布式架构、流畅的用户体验和强大的安全性能。我还了解到鸿蒙操作系统在物联网、人工智能等领域具有广泛的应用前景。

尽管本学期的学习已经结束,但我对鸿蒙操作系统的研究和探索仍在继续。在未来的学习和工作中,我将继续保持对鸿蒙操作系统的关注,进一步深入学习。同时,我也期待鸿蒙操作系统在未来能够取得更大的成功,为科技进步和经济发展作出更大的贡献。如果之后有时间继续学习鸿蒙,我也会继续完善这个项目,增加新的内容。

总之,本学期的学习让我对鸿蒙操作系统有了更加全面的认识,也为我今后的研究和实践奠定了坚实的基础。我将继续努力学习,不断提高自己的技术水平,为推动鸿蒙操作系统的发展和普及贡献自己的力量。


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年12月09日 0

暂无评论

JopgMnNvfUld