3️⃣通过编写计算器学习ArkUI组件
注:转自Tuer白晓明,原文地址:https://ost.51cto.com/posts/10480
本系列文章共有五篇,细致描述了如何学习ArkUI组件实现计算器的功能,以下为正文
3.5 Row
容器组件
在3.4小节中,自定义左侧带图标的按钮时,我们使用了Row
容器组件,Row
容器组件是什么呢?Row
容器组件称为沿水平方向布局容器,Column
容器组件是沿垂直方向布局容器,我将两者都称之为线性布局容器。Row
容器组件的用法和Column
容器组件的用法类似。
3.6 实现页面跳转
通过对容器组件、组件、装饰器的了解,在3.4小节实现了标题栏区域的功能按钮布局,如何通过点击按钮进入到绑定的页面呢?本小节将继续带大家一起了解页面跳转(也称路由跳转)。
路由跳转有两种形式:通过 路由容器组件Navigator
或者 路由RouterAPI
接口 来实现页面间的跳转。
3.6.1 Navigator
路由容器组件
Navigator
路由容器组件用于包装组件,使其具备路由跳转能力,比如包含Text
文本组件并设置样式,使其能够提供与HTML
中a
标签相似的功能。通过target
和type
属性控制跳转目标页面及路由方式。
说明:
- 点击【跳转到RouterApiExample页面】按钮,跳转页面;
- 点击【返回NavigationExample页面】按钮,返回页面;
- 点击【使用RouterApiExample页面替换当前页】按钮,跳转页面,销毁当前页,无法返回。
3.6.2 RouterAPI
路由接口
API
接口也提供了页面路由功能,需要在相应的页面引入模块,并通过组件的onClick
方法进行页面跳转,使用需要在页面顶部引入import router from '@system.router'
。
API | 描述 |
---|---|
router.push | 跳转到应用内指定页面,相当于Navigation 组件设置type 值为NavigationType.Push |
router.replace | 用应用内的某个页面替换当前页面,并销毁被替换的页面,相当于Navigation 组件设置type 值为NavigationType.Replace |
router.back | 返回上一页面或指定的页面,相当于Navigation 组件设置type 值为NavigationType.Back |
其他 | 用到再介绍 |
3.7 给标题栏区域按钮添加页面跳转
新建science.ets
(科学计算器),housingLoan.ets
(房贷计算器),programmer.ets
(程序员计算器),history.ets
(历史记录)四个页面。
- 引入
router
API接口
- 为按钮添加点击事件
总结
本小节对Row
容器组件和路由跳转做了简单的介绍,下节将继续完善我们的标准计算器。