【HarmonyOS】编写简单的登录页面并实现跳转

登陆页面跳转案例

实现登陆页面

首先简单实现一个登录页面，在xml文件下编写布局如下所示

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical"
    ohos:left_padding="10fp"
    ohos:right_padding="10fp">
    <Image
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:image_src="$media:icon">
    </Image>
​
    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:top_margin="50fp">
​
        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="用户名:">
        </Text>
​
        <TextField
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:hint="请输入用户名:">
        </TextField>
    </DirectionalLayout>
​
    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:top_margin="20fp">
​
        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="密码:">
        </Text>
​
        <TextField
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:text_input_type="pattern_password"
            ohos:hint="请输入密码:">
        </TextField>
    </DirectionalLayout>
​
    <Button
        ohos:id="$+id:btnLogin"
        ohos:top_margin="20fp"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text="登录"
        ohos:background_element="$graphic:background_loginButton">
    </Button>
​
    <DependentLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:top_margin="20fp">
        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:align_parent_left="true"
            ohos:text="账号注册:">
        </Text>
        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:align_parent_right="true"
            ohos:text="忘记密码:">
        </Text>
    </DependentLayout>
​
​
</DirectionalLayout>

界面如图所示

实现点击弹窗

new ToastDialog(LoginAbilitySlice.this).setText("点击了登录按钮").setDuration(2000).show();

点击登录按钮后如图所示

实现页面跳转功能

实现页面跳转的无参数传递

首先要明白页面之间交互的概念。交互的概念通俗来说就是有去有回，在函数中的体现是参数和返回值，那么在页面之间的交互就是页面1向页面2传递参数，然后在页面2中将参数接收。

intent可以起到纽带的作用，用于收放参数，参数以键值对的形式进行传递

在登录页面设置要传递的参数，以传递参数username为例

intent.setParam("username","user");//设置参数键值对
present(new MainAbilitySlice(),intent);//将参数发送到MainAbilitySlice页面下

在主页面接收登录页面传递过来的参数，并以文本的形式显示

text = (Text) findComponentById(ResourceTable.Id_text);//获取文本组件
String username = intent.getStringParam("username");//根据键username获取对应参数的值
text.setText(username);//设置文本的值

测试，在登录页点击登录后跳转到主页面，如图所示

当需要进行多个页面的跳转的时候，就需要用presentForResult()方法进行参数的传递

其中requestCode的作用：当接受多个页面的返回值时用于区分接收到的返回值来自哪个页面

public static final int REQUEST_CODE_MAINABILITY = 1;//给主页面设置requestCode = 1
presentForResult(new MainAbilitySlice(),intent,REQUEST_CODE_MAINABILITY);

给主页面设置点击事件，当点击文本时返回到登录页面

text.setText(username);
text.setClickedListener(new Component.ClickedListener() {
    @Override
    public void onClick(Component component) {
        setResult(intent.setParam("result","我是Main页面返回值"));
        terminate();//用于结束页面
    }
});

对setResult()方法的分析

可以看到，参数resultData是当页面被关闭时的返回数据。也可以主动调用terminate()方法直接关闭页面，此时resultData就会直接返回到调用者。

在登录页面接收回调，将返回值用弹窗的形式表现

@Override
protected void onResult(int requestCode, Intent resultIntent) {
    super.onResult(requestCode, resultIntent);
    if (requestCode == REQUEST_CODE_MAINABILITY) {
        new ToastDialog(this).setText(resultIntent.getStringParam("result")).setDuration(2000).show();
    }
}

进行测试，结果如下

 

如果不使用纯Java开发，而是用Java + js混合开发时，js没有slice的概念，因此只能用ability之间的跳转

intent.setOperation(new Intent.OperationBuilder().withAbilityName(MainAbility2.class).withBundleName("com.example.class1").build());
startAbility(intent);

其中bundleName的值可以在模块的config.json中找到

进行测试，点击登录后可以跳转到对应页面

尝试编写一个简单的登陆交互，当用户名和密码都为123456时登陆成功

在登陆页面编写如下

package com.example.logindemoforjava.slice;
​
import com.example.logindemoforjava.MainAbility2;
import com.example.logindemoforjava.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.TextField;
import ohos.agp.window.dialog.ToastDialog;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;
​
public class LoginAbilitySlice extends AbilitySlice {
    private static final HiLogLabel LABEL_LOG = new HiLogLabel(0,0,"MainAbility.class");
    private Button btnlogin;
    public static final int REQUEST_CODE_MAINABILITY = 1;
    private TextField username;
    private TextField password;
​
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_login);
        btnlogin = (Button) findComponentById(ResourceTable.Id_btnLogin);
        username = (TextField) findComponentById(ResourceTable.Id_username);
        password = (TextField) findComponentById(ResourceTable.Id_password);
        btnlogin.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                HiLog.info(LABEL_LOG, "click");
                if (username.getText().equals("123456") && password.getText().equals("123456")) {
                    intent.setParam("tips","登陆成功");
                    present(new MainAbilitySlice(), intent);
                } else {
                    new ToastDialog(LoginAbilitySlice.this).setText("登陆失败").setDuration(2000).show();
                }
            }
        });
    }
​
    @Override
    public void onActive() {
        super.onActive();
    }
​
    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

进行测试如下，当用户名密码都输入123456时登录成功

当用户名为1234567时登陆失败