案例：常用组件与布局

介绍

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

相关概念

  • Text：显示一段文本的组件。

  • Image：Image为图片组件，常用于在应用中显示图片。Image支持加载string、PixelMap和Resource类型的数据源，支持png、jpg、bmp、svg和gif类型的图片格式。

  • TextInput：单行文本输入框组件。

  • Button：按钮组件，可快速创建不同样式的按钮。

  • LoadingProgress：用于显示加载动效的组件。

  • Flex：以弹性方式布局子组件的容器组件。

  • Column：沿垂直方向布局的容器。

  • Row：沿水平方向布局容器。

  • List：列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。

  • Swiper：滑块视图容器，提供子组件滑动轮播显示的能力。

  • Grid：网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。

完整示例

gitee源码地址

源码下载
 
常用组件与布局（ArkTS）.zip
 
环境搭建

我们首先需要完成HarmonyOS开发环境搭建，可参照如下步骤进行。

软件要求

硬件要求

  • 设备类型：华为手机或运行在DevEco Studio上的华为手机设备模拟器。
  • HarmonyOS系统：3.1.0 Developer Release。

环境搭建

  1. 安装DevEco Studio，详情请参考下载和安装软件。
  2. 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：
    • 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
    • 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。
  3. 开发者可以参考以下链接，完成设备调试的相关配置：
 
代码结构解读

本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在源码下载或gitee中提供。

 
 
No Preview
  1. ├──entry/src/main/ets // 代码区
  2. │ ├──common
  3. │ │ └──constants
  4. │ │ └──CommonConstants.ets // 公共常量类
  5. │ ├──entryability
  6. │ │ └──EntryAbility.ts // 程序入口类
  7. │ ├──pages
  8. │ │ ├──LoginPage.ets // 登录界面
  9. │ │ └──MainPage.ets // 主界面
  10. │ ├──view
  11. │ │ ├──Home.ets // 首页
  12. │ │ └──Setting.ets // 设置页
  13. │ └──viewmodel
  14. │ ├──ItemData.ets // 列表数据实体类
  15. │ └──MainViewModel.ets // 主界面视图Model
  16. └──entry/src/main/resources // 应用资源目录
实现“登录”页面

本节主要介绍“登录”页面的实现，页面使用Column容器组件布局，由Image、Text、TextInput、Button、LoadingProgress等基础组件构成。

获取用户输入

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

控制LoadingProgress显示和隐藏

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

实现页面跳转

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

 
 
No Preview
  1. // LoginPage.ets
  2. import router from '@ohos.router';
  4. login(): void {
  5. ...
  6. this.timeOutId = setTimeout(() => {
  7. this.isShowProgress = false;
  8. this.timeOutId = -1;
  9. router.replaceUrl({ url: 'pages/MainPage' });
  10. }, CommonConstants.LOGIN_DELAY_TIME);
  11. }
实现“首页”和“我的”页面

定义资源数据

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

实现页面框架

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

实现“首页”内容

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

然后使用Grid组件实现2*4栅格图。

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

实现“我的”页面内容

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

 
 
Preview
  1. // Setting.ets
  2. List() {
  3. ForEach(mainViewModel.getSettingListData(), (item: ItemData) => {
  4. ListItem() {
  5. this.settingCell(item)
  6. }
  7. .height($r('app.float.setting_list_height'))
  8. }, (item:ItemData) => JSON.stringify(item))
  9. }
  10. .backgroundColor(Color.White)
  11. .divider({
  12. ...
  13. })
  14. ...
  16. @Builder settingCell(item: ItemData) {
  17. Row() {
  18. Row({ space: CommonConstants.COMMON_SPACE }) {
  19. Image(item.img)
  20. ...
  21. Text(item.title)
  22. ...
  23. }
  24. if (item.others === null) {
  25. Image($r('app.media.right_grey'))
  26. ...
  27. } else {
  28. Toggle({ type: ToggleType.Switch, isOn: false })
  29. }
  30. }
  31. .justifyContent(FlexAlign.SpaceBetween)
  32. ...
  33. }
总结

您已经完成了本次Codelab的学习，并了解到以下知识点：

  1. Button、Image、TextInput、Text等基础组件的使用。

  2. Column、Row、List、Tabs等容器组件的使用。

  3.  
posted @ 2024-01-21 20:23  freedragon  阅读(31)  评论(0)  编辑  收藏  举报