HarmonyOS | 使用鸿蒙实现登录页面【XML】

效果展示

代码展示

在 ability_main.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:orientation="vertical"
    ohos:background_element="#F2F2F2">

    <Text
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:text="请输入账号"
        ohos:text_size="17fp"
        ohos:text_color="#999999"
        ohos:top_margin="122vp"
        ohos:left_margin="20vp"
        ohos:right_margin="20vp"
        ohos:text_alignment="center"
        ohos:background_element="#fff"/>

    <Text
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:text="请输入密码"
        ohos:text_size="17fp"
        ohos:text_color="#999999"
        ohos:top_margin="10vp"
        ohos:left_margin="20vp"
        ohos:right_margin="20vp"
        ohos:text_alignment="center"
        ohos:background_element="#fff"/>

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

    <Button
        ohos:height="46vp"
        ohos:width="320vp"
        ohos:text="登录"
        ohos:text_size="25fp"
        ohos:text_color="#fefefe"
        ohos:background_element="$graphic:background_radioBorder"
        ohos:text_alignment="center"
        ohos:layout_alignment="center"
        ohos:top_margin="77vp"/>

    <Button
        ohos:height="46vp"
        ohos:width="320vp"
        ohos:text="注册"
        ohos:text_size="25fp"
        ohos:text_color="#fefefe"
        ohos:background_element="$graphic:background_radioBorder"
        ohos:text_alignment="center"
        ohos:layout_alignment="center"
        ohos:top_margin="13vp"/>

</DirectionalLayout>

在 resource – base – graphic 文件夹中新建一个 background_radioBorder.xml 文件，并编写如下代码，修改按钮的的样式。
·
引用方式：ohos:background_element="$graphic:background_radioBorder"

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners
        ohos:radius="10vp"/>
    <solid
        ohos:color="#21a8fd"/>
</shape>

怎么样？是不是很简单？赶快动手试一下吧！

如果有兴趣的话，你还可以尝试着做一下【注册页面】

上文中用于输入账号密码的文本输入框使用 Text 组件代替，你也可以尝试使用 文本输入框组件 【TextField】 完成