【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_src="$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. 機關

Harmony	Android
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 基礎進行簡單嘗試；之後會對具體控件進行詳細學習與嘗試；如有錯誤，請多多指導！

來源： 阿策小和尚