[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:background_element="#DDDDDD"
    ohos:orientation="vertical">

    <TextField
        ohos:id="$+id:username"
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:hint="请输入手机号"
        ohos:text_size="17fp"
        ohos:hint_color="#999999"
        ohos:text_alignment="center"
        ohos:layout_alignment="horizontal_center"
        ohos:top_margin="100vp"
        ohos:background_element="#FFFFFF"
        />

    <TextField
        ohos:id="$+id:passwd"
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:hint="请输入密码"
        ohos:text_size="17fp"
        ohos:hint_color="#999999"
        ohos:text_alignment="center"
        ohos:layout_alignment="horizontal_center"
        ohos:top_margin="10vp"
        ohos:background_element="#FFFFFF"
        ohos:text_input_type="pattern_password"
        />

    <Text
        ohos:id="$+id:forget"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="忘记密码了?"
        ohos:text_size="16fp"
        ohos:text_color="#979797"
        ohos:top_margin="12vp"
        ohos:layout_alignment="right"
        ohos:right_margin="20vp"
        />

    <Button
        ohos:id="$+id:login"
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:text="登录"
        ohos:text_size="24vp"
        ohos:text_color="#fefefe"
        ohos:text_alignment="center"
        ohos:background_element="#21a8fd"
        ohos:top_margin="76vp"
        ohos:layout_alignment="horizontal_center"
        />

    <Button
        ohos:id="$+id:register"
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:text="注册"
        ohos:text_size="24vp"
        ohos:text_color="#fefefe"
        ohos:text_alignment="center"
        ohos:background_element="#21a8fd"
        ohos:top_margin="13vp"
        ohos:layout_alignment="horizontal_center"
        />


</DirectionalLayout>

Java中定义业务逻辑：

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    TextField username = null; //用户名
    TextField passwd = null;   //密码
    Text forget = null; //忘记密码
    Button login = null;//登录
    Button register = null; //注册

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

        //1、找到组件
        username = (TextField) findComponentById(ResourceTable.Id_username);
        passwd = (TextField) findComponentById(ResourceTable.Id_passwd);
        forget = (Text) findComponentById(ResourceTable.Id_forget);
        login = (Button) findComponentById(ResourceTable.Id_login);
        register = (Button) findComponentById(ResourceTable.Id_register);

        //2、绑定事件
        //忘记密码
        forget.setClickedListener(this);
        //登录
        login.setClickedListener(this);
        //注册
        register.setClickedListener(this);
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    @Override
    public void onClick(Component component) {
        if(component == forget) {
            //跳转到忘记密码页面
            MyToast.showDialog(this, "用户点击了忘记密码");
        } else if(component == login) {
            //比较用户输入的用户名和密码是否正确
            //实际开发中，我们是把用户名和密码传递给服务器进行比较，服务器返回正确与否信息
            //1、获取到用户输入的内容
            String usernameInput = username.getText();
            String passwdInput = passwd.getText();

            //2、数据比对
            //因为目前还没有学与服务器的交互，这里仅测试
            //判断文本输入框是否为空
            if("".equals(usernameInput) || "".equals(passwdInput)) {
                //提示文本为空
                MyToast.showDialog(this, "用户名或密码不能为空");
            }else if("admin".equals(usernameInput) && "root".equals(passwdInput)) {
                //如果正确了，则跳转到app页面
                MyToast.showDialog(this, "登录成功");
            } else {
                //如果错误了，弹框提示用户
                MyToast.showDialog(this, "用户名和密码错误");
            }
        } else if(component == register) {
            //跳转到注册页面
            MyToast.showDialog(this, "用户点击了注册页面");
        }
    }
}

标签：界面,forget,登录,密码,findComponentById,HarmonyOS,ResourceTable,跳转,public
来源： https://blog.csdn.net/weixin_42067873/article/details/119839594