【HarmonyOS 专题】02 搭建简单登录页面

    小菜在搭建完 HarmonyOS 环境之后，有很长时间没有研究过 HarmonyOS，DevEco Studio 已经更新了多个版本，小菜在升级完 IDE 开发工具之后，还未仔细学习官方文档，仅以 Android 为基础尝试尝试简单搭建一个【登录】页面；

1. 新建 Ability

    HarmonyOS 的整体开发过程与 Android 还是非常类似的；小菜新建一个 LoginAbility，会自动生成一个 LoginAbilitySlice 和对应的 ability_login.xml 用于绑定前台页面，小菜简单理解分别对应 Android 的 Activity / Fragment / xml 等；

    新建 Ability 时会在 config.json 中注册，类似于 Android 的 AndroidManifest.xml 清单文件；小菜需要默认打开 LoginAbility 则需要把首个 Launch 启动信息设置在 LoginAbility 配置文件中；

{
  ...
  "module": {
    ...
    "abilities": [
      {
        ...
        "name": "com.example.ace_harmonyos03.MainAbility",
        ...
      },
      {
        "skills": [
          {
            "entities": [ "entity.system.home" ],
            "actions": [ "action.system.home" ]
          }
        ],
        "orientation": "unspecified",
        "name": "com.example.ace_harmonyos03.LoginAbility",
        "icon": "$media:icon",
        "description": "$string:loginability_description",
        "label": "$string:entry_LoginAbility",
        "type": "page",
        "launchType": "standard"
      }
    ]
  }
}

2. 编辑 xml

    小菜这次主要通过 xml 方式绑定页面 UI，主要是在 ability_login.xml 中进行编辑；小菜发现，默认 xml 是 DirectionalLayout 布局且默认设置了 orientation，很容易理解为线性布局，与 Android 中的 LinearLayout 一致；

2.1 添加 Image Logo

    小菜预期添加一个 Logo 图片，采用 Image 控件，大部分熟悉很容易立即与 Android 对应上，其图片资源在 media 文件夹下；但是小菜在调整 Image 宽高时，图片并没有变化；与 Android 默认图片填充类似，HarmonyOS Image 默认为 center 不缩放，需要手动调整 scale_mode 图片填充方式才可以；

<Image
    ohos:height="100vp"
    ohos:width="100vp"
    ohos:bottom_margin="60vp"
    ohos:image_class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="$media:icon"
    ohos:scale_mode="clip_center"
    ohos:top_margin="60vp"/>

2.2 添加文本框

    小菜预计在 Logo 下添加两个文本框，分别对应用户名和密码；首先采用 DirectionalLayout 线性布局设置水平放置文本和文本框；其中在设置宽高时，小菜理解 match_parent 与 Android 端一致，填充满父控件；match_content 与 wrap_content 一致，自适应宽高；

    HarmonyOS 通过 TextField 实现文本框，这与 Flutter 方式类似；文本框默认白色填充无边框，需要我们手动设置显示效果；

<DirectionalLayout
    ohos:height="50vp"
    ohos:width="match_parent"
    ohos:alignment="horizontal_center"
    ohos:left_margin="30vp"
    ohos:orientation="horizontal"
    ohos:right_margin="30vp">

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="用户名："
        ohos:text_size="24fp"/>

    <TextField
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="$graphic:login_textfiled_bg"
        ohos:hint="请输入用户名！"
        ohos:hint_color="$ohos:color:id_color_activated"
        ohos:left_padding="12vp"
        ohos:text_alignment="vertical_center"
        ohos:text_size="23fp"/>
</DirectionalLayout>

2.3 添加 Button

    小菜预计在文本框下添加两个 Button，大部分熟悉都很容易理解，但小菜在尝试添加背景时发现默认的按钮尺寸是 Button 内填充大小，需要通过内外边距来进行按钮的调整；

    HarmonyOS 没有 drawable，对于背景图 shape 等都是通过 graphic 定义好对应的 xml 再设置对应控件的元素背景；

<Button
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:background_element="$graphic:login_btn_bg"
    ohos:bottom_padding="14vp"
    ohos:left_margin="30vp"
    ohos:right_margin="30vp"
    ohos:text="极速登录"
    ohos:text_size="24fp"
    ohos:top_margin="60vp"
    ohos:top_padding="14vp"/>

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    
    <solid ohos:color="#4D666666"/>
    <corners ohos:radius="50vp"/>
</shape>

小扩展

1. 单位

2. 图片 scale_mode

    小菜对 HarmonyOS 还停留至 0 基础位置，具体详细的官方文档还未学习，仅以 Android 基础进行简单尝试；之后会对具体控件进行详细学习与尝试；如有错误，请多多指导！

来源： 阿策小和尚