【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,"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时登陆失败

原文地址:https://blog.csdn.net/weixin_62263911/article/details/130118635

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


文章浏览阅读1.4k次。被@Observed装饰的类,可以被观察到属性的变化;子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例,和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项,或者是class object中是属性,这个属性同样也需要被@Observed装饰。单独使用@Observed是没有任何作用的,需要搭配@ObjectLink或者@Prop使用。_鸿蒙ark对象数组
文章浏览阅读1k次。Harmony OS_harmonyos创建数据库
文章浏览阅读1.1k次,点赞25次,收藏23次。自定义组件Header.ets页面(子组件)//自定义组件@Component//组件声明private title:ResourceStr//接收的参数build(){Row() {index.ets(父组件)//导入自定义组件@Entry@Componentbuild() {Column() {/*** 1. 自定义组件调用-----自定义组件------* 2. 在调用的组件上设置样式*/ShopTitle({ title: '商品列表' })
文章浏览阅读952次,点赞11次,收藏25次。ArkUI是一套构建分布式应用界面的声明式UI开发框架。它使用极简的UI信息语法、丰富的UI组件、以及实时界面预览工具,帮助您提升移动应用界面开发效率30%。您只需使用一套ArkTS API,就能在Android、iOS、鸿蒙多个平台上提供生动而流畅的用户界面体验。_支持ios 安卓 鸿蒙next的跨平台方案
文章浏览阅读735次。​错误: 找不到符号符号: 变量 Layout_list_item位置: 类 ResourceTable_错误: 找不到符号 符号: 变量 resourcetable 位置: 类 mainabilityslice
文章浏览阅读941次,点赞23次,收藏21次。harmony ARKTS base64 加解密_鸿蒙 鸿蒙加解密算法库
文章浏览阅读860次,点赞21次,收藏24次。使用自定义布局,实现子组件自动换行功能。图1自定义布局的使用效果创建自定义布局的类,并继承ComponentContainer,添加构造方法。//如需支持xml创建自定义布局,必须添加该构造方法实现ComponentContainer.EstimateSizeListener接口,在onEstimateSize方法中进行测量。......@Override//通知子组件进行测量//关联子组件的索引与其布局数据idx++) {//测量自身。_鸿蒙javaui
文章浏览阅读917次,点赞25次,收藏25次。这里需要注意的是,真机需要使用华为侧提供的测试机,测试机中会安装纯鸿蒙的系统镜像,能够体验到完整的鸿蒙系统功能,纯鸿蒙应用目前还不能完美地在 HarmonyOS 4.0 的商用机侧跑起来。当前,真机调试需要使用华为侧提供的测试机,测试机中会安装纯鸿蒙的系统镜像,能够体验到完整的鸿蒙系统功能,纯鸿蒙应用目前还不能完美地在 HarmonyOS 4.0 的商用机侧跑起来。另外,由于样式的解析是基于组件文件的纬度的,因此样式文件只能应用于被其引用的组件文件中,而不能跨文件应用,并且样式文件也只支持类选择器。_鸿蒙 小程序
文章浏览阅读876次,点赞17次,收藏4次。2. HarmonyOS应用开发DevEcoStudio准备-1HUAWEI DevEco Studio为运行在HarmonyOS和OpenHarmony系统上的应用和服务(以下简称应用/服务)提供一站式的开发平台。
文章浏览阅读811次。此对象主要映射JSON数组数据,比如服务器传的数据是这样的。_arkts json
文章浏览阅读429次。鸿蒙小游戏-数字华容道_华为鸿蒙手机自带小游戏
文章浏览阅读1.1k次,点赞24次,收藏19次。Ability是应用/服务所具备的能力的抽象,一个Module可以包含一个或多个Ability。
文章浏览阅读846次。本文带大家使用MQTT协议连接华为IoT平台,使用的是E53_IA1 智慧农业扩展板与 BearPi-HM_Nano 开发主板_mqtt 如何对接第三方iot平台
文章浏览阅读567次。HarmonyOS_arkts卡片
文章浏览阅读1k次,点赞19次,收藏20次。ArkTS开发鸿蒙OS连接mongoDB(后端node.js)2024最新教程
文章浏览阅读1.2k次,点赞23次,收藏15次。HarmonyOS与OpenHarmony(1)本质上的不同是:HarmonyOS是鸿蒙操作系统,而OpenHarmony则是从开源项目。这里可以联想一下Android,比如小米手机在Android开源系统的基础上开发了MIUI的手机操作系统,HarmonyOS就类似于MIUI,OpenHarmony类似Android基础底座。(2)HarmonyOS:是双框架,内聚了AOSP(Android Open Source Project )和OpenHarmony等。_鸿蒙模拟器开了怎么跑代码
文章浏览阅读1.1k次,点赞21次,收藏21次。鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Navigation组件。
文章浏览阅读2k次。由于之前的哥们匆忙离职了,所以鸿蒙手表项目的新版本我临时接过来打包发布,基本上之前没有啥鸿蒙经验,但是一直是做Android开发的,在工作人员的指导下发现打包配置基本上和Android一样,所以这些都不是问题,这里记录一下使用过程中遇到的问题。!过程和遇到的问题基本上都讲解了,关机睡觉,打卡收工。_鸿蒙系统adb命令
文章浏览阅读7.3k次,点赞9次,收藏29次。39. 【多选题】_column和row容器中,设置子组件在主轴方向上的对齐格式
文章浏览阅读1.1k次,点赞13次,收藏24次。18.鸿蒙HarmonyOS App(JAVA)日期选择器-时间选择器点击button按钮显示月份与获取的时间。_harmonyos农历获取