鸿蒙实战开发-使用常用组件与布局实现登录、首页、我的三个页面

最新推荐文章于 2024-05-30 14:11:05 发布
最新推荐文章于 2024-05-30 14:11:05 发布
阅读量5.1k 收藏 79
点赞数 31
分类专栏： HarmonyOS 鸿蒙工程师 鸿蒙 文章标签： harmonyos 华为 OpenHarmony 鸿蒙应用开发 鸿蒙系统 鸿蒙工程师 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_82546228/article/details/137143254
版权
鸿蒙工程师 同时被 3 个专栏收录
567 篇文章 5 订阅
订阅专栏
鸿蒙
567 篇文章 2 订阅
订阅专栏
HarmonyOS
555 篇文章 0 订阅
订阅专栏

介绍

HarmonyOS ArkUI提供了丰富多样的UI组件，您可以使用这些组件轻松地编写出更加丰富、漂亮的界面。在本篇Codelab中，您将通过一个简单的购物社交应用示例，学习如何使用常用的基础组件和容器组件。

本示例主要包含：“登录”、“首页”、“我的”三个页面，效果图如下：

相关概念

  • Text：显示一段文本的组件。
  • Image：图片组件，支持本地图片和网络图片的渲染展示。
  • TextInput：可以输入单行文本并支持响应输入事件的组件。
  • Button：按钮组件，可快速创建不同样式的按钮。
  • LoadingProgress：用于显示加载动效的组件。
  • Flex：应用弹性方式布局子组件的容器组件。
  • Column：沿垂直方向布局的容器。
  • Row：沿水平方向布局容器。
  • List：列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
  • Swiper：滑动容器，提供切换子组件显示的能力。
  • Grid：网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。

环境搭建

软件要求

  • DevEco Studio版本：DevEco Studio 3.1 Release。
  • OpenHarmony SDK版本：API version 9。

硬件要求

  • 开发板类型：润和RK3568开发板。
  • OpenHarmony系统：3.2 Release。

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：

  1. 获取OpenHarmony系统版本：标准系统解决方案（二进制）。以3.2 Release版本为例：

2.搭建烧录环境。

  1. 完成DevEco Device Tool的安装
  2. 完成RK3568开发板的烧录

3.搭建开发环境。

  1. 开始前请参考工具准备，完成DevEco Studio的安装和开发环境配置。
  2. 开发环境配置完成后，请参考使用工程向导创建工程（模板选择“Empty Ability”）。
  3. 工程创建完成后，选择使用真机进行调测。

代码结构解读

本篇Codelab只对核心代码进行讲解。

├──entry/src/main/ets              // 代码区
│  ├──common
│  │  └──constants
│  │     └──CommonConstants.ets    // 公共常量类
│  ├──entryability
│  │  └──EntryAbility.ts           // 程序入口类
│  ├──pages
│  │  ├──LoginPage.ets             // 登录界面
│  │  └──MainPage.ets	           // 主界面	
│  ├──view
│  │  ├──Home.ets                  // 首页
│  │  └──Setting.ets               // 设置页
│  └──viewmodel
│     ├──ItemData.ets              // 列表数据实体类
│     └──MainViewModel.ets         // 主界面视图Model
└──entry/src/main/resources        // 应用资源目录

实现“登录”页面

本节主要介绍“登录”页面的实现，效果图如下：

界面使用Column容器组件布局，由Image、Text、TextInput、Button、LoadingProgress等基础组件构成，主要代码如下：

// LoginPage.ets
@Entry
@Component
struct LoginPage {
  ...
  build() {
    Column() {
      Image($r('app.media.logo'))
       ...
      Text($r('app.string.login_page'))
        ...
      Text($r('app.string.login_more'))
        ...

      TextInput({ placeholder: $r('app.string.account') })
        ...

      TextInput({ placeholder: $r('app.string.password') })
        ...

      Row() {
        Text($r('app.string.message_login')).blueTextStyle()
        Text($r('app.string.forgot_password')).blueTextStyle()
      }
      ....

      Button($r('app.string.login'), { type: ButtonType.Capsule })
        ....
      Text($r('app.string.register_account'))
        ....

      if (this.isShowProgress) {
        LoadingProgress()
          ....
      }

      Blank()
      Text($r('app.string.other_login_method'))
        ....
      Row({ space: CommonConstants.LOGIN_METHODS_SPACE }) {
        this.imageButton($r('app.media.login_method1'))
        this.imageButton($r('app.media.login_method2'))
        this.imageButton($r('app.media.login_method3'))
      }
    }
    ....
  }
}

获取用户输入

当用户登录前，需要获取用户输入的帐号和密码才能执行登录逻辑。给TextInput设置onChange事件，在onChange事件里面实时获取用户输入的文本信息。

// LoginPage.ets
TextInput({ placeholder: $r('app.string.account') })
  .maxLength(CommonConstants.INPUT_ACCOUNT_LENGTH)
  .type(InputType.Number)
  .inputStyle()
  .onChange((value: string) => {
    this.account = value;
  })

控制LoadingProgress显示和隐藏

给登录按钮绑定onClick事件，调用login方法模拟登录。定义变量isShowProgress结合条件渲染if用来控制LoadingProgress的显示和隐藏。当用户点击按钮时设置isShowProgress为true，即显示LoadingProgress；使用定时器setTimeout设置isShowProgress 2秒后为false，即隐藏LoadingProgress，然后执行跳转到首页的逻辑。

// LoginPage.ets
@Entry
@Component
struct LoginPage {
  @State account: string = '';
  @State password: string = '';
  @State isShowProgress: boolean = false;
  private timeOutId = null;

  ...

  login() {
    if (this.account === '' || this.password === '') {
      prompt.showToast({
        message: $r('app.string.input_empty_tips')
      })
    } else {
      this.isShowProgress = true;
      if (this.timeOutId === null) {
        this.timeOutId = setTimeout(() => {
          this.isShowProgress = false;
          this.timeOutId = null;
          router.replaceUrl({ url: 'pages/MainPage' });
        }, CommonConstants.LOGIN_DELAY_TIME);
      }
    }
  }

  ...

  build() {
    Column() {
      ...

      Button($r('app.string.login'), { type: ButtonType.Capsule })
        ....
        .onClick(() => {
          this.login();
        })
      ...

      if (this.isShowProgress) {
        LoadingProgress()
          .color($r('app.color.loading_color'))
          .width($r('app.float.login_progress_size'))
          .height($r('app.float.login_progress_size'))
          .margin({ top: $r('app.float.login_progress_margin_top') })
      }

      ...
    }
    ...
  }
}

实现页面跳转

页面间的跳转可以使用router模块相关API来实现，使用前需要先导入该模块，然后使用router.replace()方法实现页面跳转。

// LoginPage.ets
import router from '@ohos.router';

login() {
  if (this.account === '' || this.password === '') {
    ...
  } else {
    this.isShowProgress = true;
    if (this.timeOutId === -1) {
      this.timeOutId = setTimeout(() => {
        this.isShowProgress = false;
        this.timeOutId = -1;
        router.replaceUrl({ url: 'pages/MainPage' });
      }, CommonConstants.LOGIN_DELAY_TIME);
    }
  }
}

实现“首页”和“我的”页面

定义资源数据

由于“首页”和“我的”页面中有多处图片和文字的组合，因此提取出ItemData类。在MainViewModel.ets文件中对页面使用的资源进行定义，在MainViewModel.ets文件中定义数据。

// ItemData.ets
export default class PageResource {
  title: Resource;
  img?: Resource;
  others?: Resource;
  constructor(title: Resource, img?: Resource, others?: Resource) {
    this.title = title;
    this.img = img;
    this.others = others;
  }
}

// MainViewModel.ets
import ItemData from './temData';
export class MainViewModel {
  ...
  getFirstGridData(): Array<ItemData> {
    let firstGridData: ItemData[] = [
      new ItemData($r('app.string.my_love'), $r('app.media.love')),
      new ItemData($r('app.string.history_record'), $r('app.media.record')),
      ...
    ];
    return firstGridData;
  }
  ...
}
export default new MainViewModel();

实现页面框架

从前面介绍章节的示意图可以看出，本示例由两个tab页组成，使用Tabs组件来实现，提取tabBar的公共样式，同时设置TabContent和Tabs的backgroundColor来实现底部tabBar栏背景色突出的效果。

// MainPage.ets
Tabs({
  barPosition: BarPosition.End,
  controller: this.tabsController
}) {
  TabContent() {
    ...
  }
  ...
  .backgroundColor($r('app.color.mainPage_backgroundColor')) // “首页”的页面背景色
  .tabBar(this.TabBuilder(CommonConstants.HOME_TITLE, CommonConstants.HOME_TAB_INDEX,
  $r('app.media.home_selected'), $r('app.media.home_normal')))
  ...
}
...
.backgroundColor(Color.White)  // 底部tabBar栏背景色
...
.onChange((index: number) => {
  this.currentIndex = index;
})
...

实现“首页”内容

“首页”效果如下所示：

从上面效果如可以看出“首页”由三部分内容组成分别是轮播图、2*4栅格图、4*4栅格图。首先使用Swiper组件实现轮播图，无需设置图片大小。

// Home.ets
Swiper(this.swiperController) {
  ForEach(mainViewModel.getSwiperImages(), (img: Resource) => {
    Image(img).borderRadius($r('app.float.home_swiper_borderRadius'))
  }, (img: Resource) => JSON.stringify(img.id))
}
...
.autoPlay(true)
...

然后使用Grid组件实现2*4栅格图，代码如下

// Home.ets
Grid() {
  ForEach(mainViewModel.getFirstGridData(), (item: ItemData) => {
    GridItem() {
      Column() {
        Image(item.img)
          .width($r('app.float.home_homeCell_size'))
          .height($r('app.float.home_homeCell_size'))
        Text(item.title)
          .fontSize($r('app.float.little_text_size'))
          .margin({ top: $r('app.float.home_homeCell_margin') })
      }
    }
  }, (item: ItemData) => JSON.stringify(item))
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr')
...

使用Grid组件实现4*4栅格列表栏，其中单个栅格中有一张背景图片和两行字体不同的文本，因此在Column组件中放置两个Text组件，并设置背景图，注意Grid组件必须设置高度，否则可能出现页面空白。

// Home.ets
Grid() {
  ForEach(mainViewModel.getSecondGridData(), (secondItem: ItemData) => {
    GridItem() {
      Column() {
        Text(secondItem.title)
          ...
        Text(secondItem.others)
          ...
      }
      .alignItems(HorizontalAlign.Start)
    }
    ...
    .backgroundImage(secondItem.img)
    .backgroundImageSize(ImageSize.Cover) 
    ...
  }, (secondItem: ItemData) => JSON.stringify(secondItem))
}
...
.height($r('app.float.home_secondGrid_height')) 
.columnsTemplate('1fr 1fr')
.rowsTemplate('1fr 1fr')
...

实现“我的”页内容

“我的”页面效果图如下：

使用List组件结合ForEach语句来实现页面列表内容，其中引用了settingCell子组件，列表间的灰色分割线可以使用Divider属性实现，代码实现如下：

// Setting.ets
List() {
  ForEach(mainViewModel.getSettingListData(), (item: ItemData) => {
    ListItem() {
      this.settingCell(item)
    }
    .height($r('app.float.setting_list_height'))
  }, (item: ItemData) => JSON.stringify(item))
}
...
.divider({  // 设置分隔线
  ...
})
...

@Builder settingCell(item: ItemData) {
  Row() {
    Row({ space: CommonConstants.COMMON_SPACE }) {
      Image(item.img)
        ...
      Text(item.title)
        ...
    }
    if (item.others === null) {
      Image($r("app.media.right_grey"))
        ...
    } else {
      Toggle({ type: ToggleType.Switch, isOn: false })
    }
  }
  .justifyContent(FlexAlign.SpaceBetween)  // 相邻元素之间距离相同
  ...
}

总结

目前你已经成功完成了Codelab并且学到了：

  1. Button、Image、TextInput、Text等基础组件的使用。
  2. Column、Row、List、Tabs等容器组件的使用。

为了帮助大家更深入有效的学习到鸿蒙开发知识点，小编特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源，获取完整版方式请点击→《HarmonyOS教学视频》

HarmonyOS教学视频：语法ArkTS、TypeScript、ArkUI等…视频教程

鸿蒙生态应用开发白皮书V2.0PDF：

获取完整版白皮书方式请点击→《鸿蒙生态应用开发白皮书V2.0PDF》

在这里插入图片描述

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

一、入门必看

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

在这里插入图片描述


二、HarmonyOS 概念

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

在这里插入图片描述

三、如何快速入门？《鸿蒙基础入门学习指南》

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

在这里插入图片描述


四、开发基础知识

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

在这里插入图片描述


五、基于ArkTS 开发

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

在这里插入图片描述


更多了解更多鸿蒙开发的相关知识可以参考：《鸿蒙 (Harmony OS)开发学习手册》

码牛程序猿
关注
  • 31
    点赞
  • 踩
  • 79
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鸿蒙 Ark ui 实战登录界面请求网络实现教程
xq610928的博客
12-18 588
大家好很久不见时间过得真快 又到了年终总结的时候，2023这一年过得是真的快。一晃又12月份了。这一次也是参加掘金的活动提前写这个年终总结。
HarmonyOS应用开发-常用组件与布局
11-05
总结来说，创建一个简单的 HarmonyOS 登录页面涉及理解操作系统的基础、应用框架的使用、布局设计、组件交互以及网络通信等多个方面。通过实践这些知识点，开发者能够更好地掌握 HarmonyOS 应用开发，为构建更复杂的...
HarmonyOS应用开发实战-媒体组件video.docx
最新发布
06-03
HarmonyOS应用开发实战-媒体组件video
鸿蒙的基本项目_tabbar，首页，购物车，我的
jiang7701037的博客
12-26 1607
以上效果，由四个ets文件实现，分别是容器页面。首页，购物车，我的。页面里的数据，我是用json-server进行模拟的数据。
鸿蒙实战开发教程-注册登录页面
2401_82546228的博客
05-30 1068
在密码输入框中，只要设置TextInput的类型就可以实现带眼睛logo的密码输入框效果：
ArkUI 开发框架-常用组件与布局示例代码
01-26
示例代码中将barPosition的值设置为BarPosition.End，使页签显示在底部。使用@Builder修饰TabBuilder函数，生成由Image和Text组成的页签。同时也给Tabs组件设置了TabsController控制器，当点击某个页签时，调用changeIndex方法进行页签内容切换。最后还需要给Tabs添加onChange事件，Tab页签切换后触发该事件，这样当我们左右滑动内容视图的时候，页签样式也会跟着改变。参考Tabs组件的更多属性和参数的使用，可以参考API：Tabs。@Builder装饰器的使用，可以参考：@Builder。
鸿蒙HarmonyOS(ArkTS)学习——登录界面的制作
qq_63026743的博客
12-08 2918
【代码】鸿蒙HarmonyOS(ArkTS)学习——登录界面的制作。
鸿蒙登录页面
qq_63532615的博客
04-10 526
Button('登录').fontColor(Color.White).backgroundColor('#3387DD').width(290).height(50).borderRadius(10).fontSize(25)Text('密 码').fontColor(Color.Black).fontSize(25).width(100)Text('用户名').fontColor(Color.Black).fontSize(25).width(100)Text('用户登录')
HarmonyOS应用开发-低代码开发登录页面(超详细)
热门推荐
踏雨歌青春，诗酒趁年华
01-05 2万+
本篇文章我来手把手教大家做一个HarmonyOS 应用的登录页面，逐步讲解，非常细致，百分百能学会，并提供全部源码。页面使用 DevEco Studio 的低代码开发，通过本文的实践经验，我想告诉大家 HarmonyOS 应用开发其实并不难，只要了解具体的开发流程和开发思想，大家都可以很快上手。
详细教程 - 从零开发 鸿蒙harmonyOS应用 第四节 （鸿蒙Stage模型 登录页面 ArkTS版 推荐使用）
爱蹦跶的全栈大A阿
12-13 4502
在鸿蒙OS中，Ability是应用程序提供的抽象功能，可以理解为一种功能1。在应用程序中，一个页面即一种能力，如登录页面，即具有登录功能的能力
HarmonyOs应用开发登陆页面Demo
rnnf_yyds的博客
11-29 1537
本案列Demo并无对输入框进行判断登录操作，该Demo只是对前期学习的组件进行巩固，更多详情可参考官方文档。
鸿蒙开发编写登录页面
weixin_68450731的博客
12-14 1684
【代码】鸿蒙开发编写登录页面。
鸿蒙应用开发入门与实战-从零到一掌握HarmonyOS开发技能
01-08
鸿蒙应用开发入门与实战-从零到一掌握HarmonyOS开发技能 本课程是一门针对鸿蒙应用开发的系统性培训课程，由华为官方团队和腾讯课堂编程熊猫团队联合打造，涵盖了鸿蒙应用开发的基础知识、核心技术、实战案例和认证...
HarmonyOS应用开发-marquee组件使用
04-18
HarmonyOS应用开发-marquee组件使用
HarmonyOS应用开发实战-容器组件.docx
06-03
HarmonyOS应用开发实战-容器组件
HarmonyOS | 使用鸿蒙实现登录页面【XML】
秋玄的博客
09-06 4425
鸿蒙yyds
页面学习——鸿蒙登录页面设计
cmmboy1990的博客
07-26 3342
页面学习——鸿蒙登录页面设计 1.布局文件 <?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="vertical_center" ohos:backgrou
HarmonyOS（鸿蒙）应用开发——（一）
m0_74451345的博客
03-20 1675
文章介绍在DevEco Studio中创建一个名为hellopro的项目，所以在创建前你的电脑上要安装好DevEco Studio软件，通过几个组件来实现一个简易登录界面，实现头部文件、提交按钮，点击数字使其增加等案例。
鸿蒙harmonyos登录页面具体代码
05-16
由于鸿蒙HarmonyOS是一个操作系统，其登录页面的具体代码会涉及到多个组件和模块的开发，因此无法简单地给出一个代码示例。但是，以下是一个基本的HarmonyOS登录页面的实现步骤： 1. 创建一个启动应用程序时显示的欢迎页面，该页面显示应用程序名称、版本号等信息。 2. 在欢迎页面上添加一个“登录”按钮，当用户点击该按钮时，应用程序跳转到登录页面。 3. 在登录页面上添加用户名和密码输入框，以及一个“登录”按钮。 4. 当用户输入用户名和密码并点击“登录”按钮时，应用程序验证用户的身份是否正确。如果身份验证成功，则跳转到主页面。如果身份验证失败，则应用程序显示错误消息。 5. 在主页面上，显示应用程序的主要功能和功能区域。 需要注意的是，以上步骤只是一个基本的登录页面实现步骤，实际开发中需要更具体的实现和细节处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值