3️⃣通过编写计算器学习ArkUI组件原创精华

Tuer白晓明

发布于 2022-3-13 15:58

浏览

4收藏

$\color{#ff9a3c}{往期推荐}$

这道菜我称为“ArkUI荟萃”—序
 了解一些ArkUI概念并熟悉应用的结构
 1️⃣通过编写计算器学习ArkUI组件
 2️⃣通过编写计算器学习ArkUI组件

3.5 `Row`容器组件

在3.4小节中，自定义左侧带图标的按钮时，我们使用了Row容器组件，Row容器组件是什么呢？
Row容器组件称为沿水平方向布局容器，Column容器组件是沿垂直方向布局容器，我将两者都称之为线性布局容器。
Row容器组件的用法和Column容器组件的用法类似。

@Entry
@Component
struct RowExample {
  build() {
    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) {
      Text('横向子组件布局间距').fontSize(14).fontColor('#CCCCCC').width('90%')
      Text('居中对齐，默认对齐方式，可以不写').fontSize(14).fontColor('#CCCCCC').width('90%')
      Row({space: 4}) {
        Text('A').width('50%').height('100%')
          .fontSize(16).backgroundColor('#D5D5D5').textAlign(TextAlign.Center)
        Text('B').width('50%').height('100%')
          .fontSize(16).backgroundColor('#E5E5E5').textAlign(TextAlign.Center)
      }
      .height(50)
      .width(300)

      Text('底部对齐').fontSize(14).fontColor('#CCCCCC').width('90%')
      Row() {
        Text('A').width('50%').height(50)
          .fontSize(16).backgroundColor('#D5D5D5').textAlign(TextAlign.Center)
        Text('B').width('50%').height(60)
          .fontSize(16).backgroundColor('#E5E5E5').textAlign(TextAlign.Center)
      }.alignItems(VerticalAlign.Bottom).width('90%').height(100)

      Text('顶部对齐').fontSize(14).fontColor('#CCCCCC').width('90%')
      Row() {
        Text('A').width('50%').height(50)
          .fontSize(16).backgroundColor('#D5D5D5').textAlign(TextAlign.Center)
        Text('B').width('50%').height(60)
          .fontSize(16).backgroundColor('#E5E5E5').textAlign(TextAlign.Center)
      }.alignItems(VerticalAlign.Top).width('90%').height(100)
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.

3️⃣通过编写计算器学习ArkUI组件 -鸿蒙开发者社区

3.6 实现页面跳转

通过对容器组件、组件、装饰器的了解，在3.4小节实现了标题栏区域的功能按钮布局，如何通过点击按钮进入到绑定的页面呢？本小节将继续带大家一起了解页面跳转（也称路由跳转）。
路由跳转有两种形式：通过 路由容器组件Navigator 或者 路由RouterAPI接口 来实现页面间的跳转。

3.6.1 `Navigator`路由容器组件

Navigator路由容器组件用于包装组件，使其具备路由跳转能力，比如包含Text文本组件并设置样式，使其能够提供与HTML中a标签相似的功能。通过target和type属性控制跳转目标页面及路由方式。

// navigationExample.ets
@Entry
@Component
struct NavigationExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Navigator({target: 'pages/simple/routerApiExample', type: NavigationType.Push}) {
        Text('跳转到RouterApiExample页面')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#cccccc')
          .height(54)
          .padding(8)
          .borderRadius(8)
      }
      .margin({bottom: 12})

      Navigator({target: 'pages/simple/routerApiExample', type: NavigationType.Replace}) {
        Text('使用RouterApiExample页面替换当前页')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#cccccc')
          .height(54)
          .padding(8)
          .borderRadius(8)
      }
    }
    .width('100%')
    .height('100%')
  }
}

// routerExample.ets
@Entry
@Component
struct RouterApiExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Navigator({target: 'pages/simple/navigationExample', type: NavigationType.Back}) {
        Text('返回到NavigationExample页面')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#cccccc')
          .height(54)
          .padding(8)
          .borderRadius(8)
      }
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.

3️⃣通过编写计算器学习ArkUI组件 -鸿蒙开发者社区
说明：

点击【跳转到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`
其他	用到再介绍

// navigationExample.ets
import router from '@system.router';

@Entry
@Component
struct NavigationExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('Navigator路由容器组件').fontSize(14).fontColor('#CCCCCC').width('90%')
      Navigator({target: 'pages/simple/routerApiExample', type: NavigationType.Push}) {
        Text('跳转到RouterApiExample页面')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#cccccc')
          .height(54)
          .padding(8)
          .borderRadius(8)
      }
      .margin({bottom: 12})

      Navigator({target: 'pages/simple/routerApiExample', type: NavigationType.Replace}) {
        Text('使用RouterApiExample页面替换当前页')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#cccccc')
          .height(54)
          .padding(8)
          .borderRadius(8)
      }
      .margin({bottom: 12})

      Text('router路由Api').fontSize(14).fontColor('#CCCCCC').width('90%')
      Text('返回到RouterApiExample页面')
        .fontSize(16)
        .fontColor('#FFFFFF')
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#cccccc')
        .height(54)
        .padding(8)
        .borderRadius(8)
        .onClick(() => {
          router.back({
            uri: 'pages/simple/routerApiExample'
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}
// routerApiExample.ets
import router from '@system.router';

@Entry
@Component
struct RouterApiExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('router路由Api').fontSize(14).fontColor('#CCCCCC').width('90%')
      Text('跳转到NavigationExample页面')
        .fontSize(16)
        .fontColor('#FFFFFF')
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#cccccc')
        .height(54)
        .padding(8)
        .borderRadius(8)
        .margin({bottom: 12})
        .onClick(() => {
          router.push({
            uri: 'pages/simple/navigationExample'
          })
        })
      Text('使用NavigationExample页面替换当前页')
        .fontSize(16)
        .fontColor('#FFFFFF')
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#cccccc')
        .height(54)
        .padding(8)
        .borderRadius(8)
        .margin({bottom: 12})
        .onClick(() => {
          router.replace({
            uri: 'pages/simple/navigationExample'
          })
        })

      Text('Navigator路由容器组件').fontSize(14).fontColor('#CCCCCC').width('90%')
      Navigator({target: 'pages/simple/navigationExample', type: NavigationType.Back}) {
        Text('返回到NavigationExample页面')
          .fontSize(16)
          .fontColor('#FFFFFF')
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#cccccc')
          .height(54)
          .padding(8)
          .borderRadius(8)
      }
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.

3️⃣通过编写计算器学习ArkUI组件 -鸿蒙开发者社区

3.7 给标题栏区域按钮添加页面跳转

新建science.ets（科学计算器），housingLoan.ets（房贷计算器），programmer.ets（程序员计算器），history.ets（历史记录）四个页面。

引入routerAPI接口

import router from '@system.router'
1.

为按钮添加点击事件

// 在bindMenu菜单元素的action中添加路由跳转
{
  value: "科学",
  action: () => {
    router.push({uri: 'pages/science'})
  }
},
// 给右侧历史记录按钮添加onClick事件
.onClick(() => {
  router.push({uri: 'pages/history'})
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

3️⃣通过编写计算器学习ArkUI组件 -鸿蒙开发者社区