鸿蒙登录页面及页面跳转的计划

任务目标

计划一个简朴的登录页面，要求可以将第一页的登录信息，转达到第二个页面，界面如图1所示。

   图1 鸿蒙登录界面图  任务分析

本任务主要考察鸿蒙应用界面计划及界面间的数据转达。在不纯熟的环境下，可以使用DevEco Studio的Super Visual功能进行计划，计划完成后再修改ArkTS代码。
任务实施

1.新建工程项目HMLogin

如图2所示，修改工程名、包名，打开Super Visual开关，单击Finish。

   图2 鸿蒙登录界面设置工程窗口  2.计划登录页面Index.visual

从Components区将两个TextInput，一个Button用鼠标拖拽到界面上，如图10-33所示。依次选中各个控件，修改Properties。其中“账号”TextInput的Placeholder属性修改为“请输入账号”，magrinTop修改改为20vp；“暗码”TextInput的Placeholder属性修改为“请输入暗码”，magrinTop修改为20vp；“登录”Button的Label属性修改为“登录”，FontSize修改为32fp。必要留意的是有些属性在Super Visual中无法修改，将在ArkTS代码中进行修改。修改完后的界面如图10-34所示，单击右上方的转换图标 ，将其转为ArkTS代码。

   图3 Index.visual计划窗口  

   图4 界面计划完成效果图  3.计划第二个页面SecondPage

右击entry/src/main/ets/pages，New→Visual→Page。在弹出的窗口中修改Visual name为SecondPage，单击Finish，如图10-35、图10-36所示。

   图5 新建Super Visual界面  

   图6 设置Visual Page窗口  使用和上一步调类似的方法，添加一个Text和一个Button，修改其属性，修改后效果如图10-37所示，单击转换图标 ，生成ArkTS代码。

   图7 第二个界面效果图  4.修改Index.ets代码

在Index.ets代码中，起首添加TextInput输入获取逻辑，实现onChange()方法，在该方法中存储修改的信息；其次，添加Button单击事故，实现onClick()方法，在该方法中使用router.pushUrl()方法跳转到第二个页面，同时转达信息，代码如下：

1. import router from '@ohos.router'
2. @Entry
3. @Component
4. struct Index {
5.   @State message: string = '登录'
6.   @State userName: string = ''
7.   @State password: string = ''
9.   build() {
10.     Row() {
11.       Column() {
12.         Text(this.message)
13.           .fontSize(30)
14.           .fontWeight(FontWeight.Bold)
16.         TextInput({ placeholder:"请输入账号" })
17.           .width("100%")
18.           .height("48vp")
19.           .margin({ left: '50vp',right:'50vp',top:"30vp",bottom:"30vp"} )
20.           .placeholderColor("#99182431")
21.           .placeholderFont({ size: "16fp"})
22.           .fontSize("16fp")
23.           .padding({ left: "0vp" })
24.           .border({
25.             width: { bottom: "0vp" },
26.             color: "#33000000",
27.             radius: "10vp"
28.           })
29.           .onChange((value: string) => {
30.             this.userName = value
31.           })
33.         TextInput({ placeholder:"请输入密码" })
34.           .width("100%")
35.           .height("48vp")
36.           .margin({ left: '50vp',right:'50vp',bottom:"30vp"} )
37.           .placeholderColor("#99182431")
38.           .placeholderFont({ size: "16fp"})
39.           .fontSize("16fp")
40.           .padding({ left: "0vp" })
41.           .type(InputType.Password)
42.           .border({
43.             color: "#33000000",
44.             radius: "10vp"
45.           })
46.           .onChange((value: string) => {
47.             this.password = value
48.           })
50.         // 添加按钮，触发跳转
51.         Button('登录')
52.           .fontSize(20)
53.           .onClick(() => {
54.             router.pushUrl({
55.               url: 'pages/SecondPage',
56.               params: {
57.                 src: this.userName+':'+this.password,
58.               }
59.             })
60.           })
61.       }
62.       .width('100%')
63.     }
64.     .height('100%')
65.     .backgroundColor("#05000000")
66.   }
67. }

复制代码

5.修改SecondPage.ets代码

在SecondPage.ets代码中，起首将前一页面的信息取出，并显示在Text上，使用router.getParams()方法获取前一页面的信息；添加“返回”Button的逻辑，实现方法和前一步调类似，关键代码如下：

1. import router from '@ohos.router'
2. @Entry
3. @Component
4. struct SecondPage {
5.   @State message: string = '第二个页面'
6.   @State src: string = router.getParams()?.['src']
8.   build() {
9.     Row() {
10.       Column() {
11.         Text(this.message)
12.           .fontSize(50)
13.           .fontWeight(FontWeight.Bold)
15.         // 显示传参的内容
16.         Text(this.src)
17.           .fontSize(30)
19.         // 添加按钮，触发返回
20.         Button('返回')
21.           .fontSize(20)
22.           .onClick(() => {
23.             router.back()
24.           })
25.       }
26.       .width('100%')
27.     }
28.     .height('100%')
29.     .backgroundColor("#05000000")
30.   }
31. }

复制代码

Index.ets代码和SecondPage.ets代码中还修改了this.message，设置了整体布局的backgroundColor，本任务完整项目代码请检察本书资源。
6.运行工程

测试运行效果

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。