【鸿蒙开发】使用鸿蒙编写登录页面并跳转

编写登录页面

新建一个登录页面

public class LoginAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(LoginAbilitySlice.class.getName());
    }
}

编写登录的布局

大概这样，学习嘛，就随便搞了，代码放下边

<?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">

    <Image
        ohos:id="$+id:imageComponent"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:image_src="$media:icon"
        />

    <TextField
        ohos:id="$+id:username"
        ohos:height="40vp"
        ohos:top_margin="50"
        ohos:left_margin="50"
        ohos:right_margin="50"
        ohos:text_alignment="center"
        ohos:text_size="50"
        ohos:width="match_parent"
        ohos:background_element="$graphic:text_filed_background"
        ohos:hint="请输入用户名"/>

    <TextField
        ohos:id="$+id:password"
        ohos:top_margin="50"
        ohos:left_margin="50"
        ohos:right_margin="50"
        ohos:text_input_type="pattern_password"
        ohos:input_enter_key_type="enter_key_type_go"
        ohos:background_element="$graphic:text_filed_background"
        ohos:width="match_parent"
        ohos:height="40vp"
        ohos:text_alignment="center"
        ohos:text_size="50"
        ohos:hint="请输入密码"/>

    <Button
        ohos:id="$+id:login"
        ohos:top_margin="50"
        ohos:left_margin="50"
        ohos:right_margin="50"
        ohos:background_element="$graphic:login_background"
        ohos:width="match_parent"
        ohos:height="40vp"
        ohos:text_alignment="center"
        ohos:text="登录"
        ohos:text_color="#ffffff"
        ohos:text_size="50"/>

</DirectionalLayout>

• text_filed_background

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners ohos:radius="40"/>
    <stroke
        ohos:color="#000000"
        ohos:width="5"/>
</shape>

• login_background

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners ohos:radius="40"/>
    <solid ohos:color="#409fff"/>
</shape>a

OK，然后写一写逻辑

• LoginAbilitySlice

public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_abiliti_login_layout);

        //控件绑定
        username = (TextField) findComponentById(ResourceTable.Id_username);
        password = (TextField) findComponentById(ResourceTable.Id_password);
        login = (Button) findComponentById(ResourceTable.Id_login);

        //登录按钮的点击时间
        login.setClickedListener(this::startAbilitySlice);
    }

    private void startAbilitySlice(Component component) {
        //获取用户用输入框和密码输入框输入参数
        String UserName = username.getText().toString();
        String PassWord = password.getText().toString();
        //非空判断 用户名|密码一个为空，即为空
        if (UserName.isEmpty() || PassWord.isEmpty()) {
            //弹出提示
            new ToastDialog(getContext()).setText("用户名或密码不能为空").show();
            return;
        }

        //用户名|密码不为空，判断用户名与密码是否正确 用户名|密码一个不正确，即为不正确
        if (!UserName.equals("xiaoming") || !PassWord.equals("123456")) {
            //弹出提示
            new ToastDialog(getContext()).setText("用户名或密码不正确").show();
            return;
        }
        Intent intent = new Intent();
        //用户名|密码校验通过，跳转页面
        Operation operation = new Intent.OperationBuilder()
                .withBundleName(getBundleName())
                .withAbilityName(MainAbility.class)
                .build();
        intent.setOperation(operation);
        intent.setParam("username", UserName);
        intent.setParam("password", PassWord);
        startAbility(intent);
        onBackPressed();
    }

• MainAbilitySlice

public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        IntentData = (Text) findComponentById(ResourceTable.Id_show_intent_data);
		//intent.getStringParam() 获取intent传递过来的参数
        IntentData.setText("用户名：" + intent.getStringParam("username") + "\t密码：" + intent.getStringParam("password"));

    }

• 效果