登陆页面跳转案例
实现登陆页面
首先简单实现一个登录页面,在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时登陆失败