【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 图片填充方式才可以；

2.2 添加文本框

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

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

2.3 添加 Button

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

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

小扩展

1. 单位

Harmony	Android
px(单位像素)	px(单位像素)
vp(虚拟像素)	dp(像素密度)
fp(文本像素)	sp(文本像素)

2. 图片 scale_mode

scale_mode	缩放类型
center	不缩放，居中展示
zoom_center	缩放至 min{width, height}，居中展示
zoom_start	缩放至 min{width, height}，起始位置对齐
zoom_end	缩放至 min{width, height}，终止位置对齐
inside	按比例缩小至图片尺寸或更小尺寸，居中展示
clip_center	按比例放大至图片尺寸或更小尺寸，居中展示
stretch	缩放至图片尺寸

---

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

来源： 阿策小和尚