ToB企服应用市场:ToB评测及商务社交产业平台

标题: 鸿蒙实战开发-使用常用组件与结构实现登录、首页、我的三个页面 [打印本页]

作者: 王海鱼 时间: 2024-6-21 19:21
标题: 鸿蒙实战开发-使用常用组件与结构实现登录、首页、我的三个页面
先容

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开发板为例，参照以下步骤举行：

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

2.搭建烧录环境。

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

3.搭建开发环境。

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

代码结构解读

本篇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;
})
...