QQ鸿蒙版还没在官网上线，那我们来替腾讯做一个登录页面吧

小王不头秃

发布于 2024-06-19 16:41:24

1430

发布于 2024-06-19 16:41:24

文章被收录于专栏：后端/图像融合/机器学习/爬虫后端/图像融合/机器学习/爬虫

前言

这几天闲的没事的时候去QQ官网看了看，发现还没有QQ的鸿蒙版本

鸿蒙能是这么没牌面的系统吗，正好前几天看了看鸿蒙系统UI的开发文档，那我们来给他做一个QQ for Harmony的软件

的登录页面吧

实现思路

先看下Android版本的QQ登录页面

我们来思考下咋搞出来这个，为了方便制作，我还是想把这个页面分为三块，然后逐步击破，分块如下图

这样的布局我觉得最简单的就是使用DirectionalLayout布局，看看这官方示意图，简直和我划分的一模一样

很明显第一块就是一张图片，一张图片放上去就完事了。

第二块稍微复杂一点，主要就在于下图这个内容可能需要布局的嵌套

当然也可以采用其他方式，但布局嵌套最简单，不过就是排列方向要改成水平，然后头像图片和账号和按钮的权重设置为1 4 1即可。

第三块就是几行字，加上就行，这样大概分析完了，我们就可以尝试来做了

具体代码

第一块的布局

就是放一张照片，没啥说的

  <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:alignment="horizontal_center"
        ohos:orientation="vertical"
        ohos:top_margin="100vp"
        ohos:weight="1">

        <Image
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:bottom_margin="0vp"
            ohos:image_src="$media:head"
            ohos:left_margin="80vp"
            ohos:right_margin="80vp"></Image>
    </DirectionalLayout>

第二块的布局

主要就在于布局里套了一层布局，具体解释在代码中

    <!--注意这里第一层布局是垂直分布-->
    <DirectionalLayout
        ohos:height="0"
        ohos:width="match_parent"
        ohos:alignment="horizontal_center"
        ohos:orientation="vertical"
        ohos:top_padding="20vp"
        ohos:bottom_padding="20vp"
        ohos:weight="3">
      <!--第二层布局是水平分布，为了使得头像图片，账号和按钮在一行上-->
        <DirectionalLayout
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:background_element="$graphic:textfield"
            ohos:focus_border_enable="true"
            ohos:left_margin="50vp"
            ohos:left_padding="5vp"
            ohos:right_padding="5vp"
            ohos:bottom_padding="5vp"
            ohos:orientation="horizontal"
            ohos:right_margin="50vp"
            ohos:weight="1">


            <Image
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:background_element="$graphic:avatar"
                ohos:scale_mode="inside"
                ohos:image_src="$media:avatar"
                ohos:weight="1"></Image>

            <TextField
                ohos:height="match_parent"
                ohos:width="match_content"
                ohos:text="123123123"
                ohos:text_alignment="center"
                ohos:text_size="20vp"
                ohos:weight="4"></TextField>

            <Button
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:text="▼"
                ohos:text_size="20vp"
                ohos:text_color="#A9A9A9"
                ohos:weight="1">
            </Button>
        </DirectionalLayout>

        <TextField
            ohos:left_padding="5vp"
            ohos:right_padding="5vp"
            ohos:background_element="$graphic:textfield"
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:layout_alignment="horizontal_center"
            ohos:left_margin="50vp"
            ohos:right_margin="50vp"
            ohos:text="password"
            ohos:text_alignment="center"
            ohos:text_size="20vp"
            ohos:top_margin="5vp"
            ohos:weight="1"></TextField>
<DirectionalLayout
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="horizontal_center"
    ohos:weight="2">
    <Button

        ohos:top_margin="20vp"
        ohos:id="$+id:button"
        ohos:width="70vp"
        ohos:height="70vp"
        ohos:text_size="27fp"
        ohos:background_element="$graphic:circle_button_element"
        ohos:text_color="#FFFFFF"
        ohos:text="→"
        />
</DirectionalLayout>

    </DirectionalLayout>

第三块布局

就是三个Text框

<DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:alignment="bottom"
        ohos:orientation="horizontal"
        ohos:left_margin="80vp"
        ohos:right_margin="80vp"
        ohos:weight="3">

        <TextField
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:text_alignment="center"
            ohos:bottom_margin="50vp"
            ohos:text="手机号登录"
            ohos:text_size="13vp"
            ohos:weight="1"></TextField>

        <TextField
            ohos:text_alignment="center"
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:bottom_margin="50vp"
            ohos:text="找回密码"
            ohos:text_size="13vp"
            ohos:weight="1"></TextField>

        <TextField
            ohos:height="match_content"
            ohos:text_alignment="center"
            ohos:width="match_parent"
            ohos:text_size="13vp"
            ohos:bottom_margin="50vp"
            ohos:text="新用户注册"
            ohos:weight="1"></TextField>
    </DirectionalLayout>

那么现在整个页面就让我们搭好了，向下翻一下看一下成果吧。