????小菜在搭建完 HarmonyOS 環(huán)境之后，有很長(zhǎng)時(shí)間沒(méi)有研究過(guò) HarmonyOS，DevEco Studio 已經(jīng)更新了多個(gè)版本，小菜在升級(jí)完 IDE 開(kāi)發(fā)工具之后，還未仔細(xì)學(xué)習(xí)官方文檔，僅以 Android 為基礎(chǔ)嘗試嘗試簡(jiǎn)單搭建一個(gè)【登錄】頁(yè)面；

1. 新建 Ability

????HarmonyOS 的整體開(kāi)發(fā)過(guò)程與 Android 還是非常類似的；小菜新建一個(gè) LoginAbility，會(huì)自動(dòng)生成一個(gè) LoginAbilitySlice 和對(duì)應(yīng)的 ability_login.xml 用于綁定前臺(tái)頁(yè)面，小菜簡(jiǎn)單理解分別對(duì)應(yīng) Android 的 Activity / Fragment / xml 等；

????新建 Ability 時(shí)會(huì)在 config.json 中注冊(cè)，類似于 Android 的 AndroidManifest.xml 清單文件；小菜需要默認(rèn)打開(kāi) LoginAbility 則需要把首個(gè) Launch 啟動(dòng)信息設(shè)置在 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

????小菜這次主要通過(guò) xml 方式綁定頁(yè)面 UI，主要是在 ability_login.xml 中進(jìn)行編輯；小菜發(fā)現(xiàn)，默認(rèn) xml 是 DirectionalLayout 布局且默認(rèn)設(shè)置了 orientation，很容易理解為線性布局，與 Android 中的 LinearLayout 一致；

2.1 添加 Image Logo

????小菜預(yù)期添加一個(gè) Logo 圖片，采用 Image 控件，大部分熟悉很容易立即與 Android 對(duì)應(yīng)上，其圖片資源在 media 文件夾下；但是小菜在調(diào)整 Image 寬高時(shí)，圖片并沒(méi)有變化；與 Android 默認(rèn)圖片填充類似，HarmonyOS Image 默認(rèn)為 center 不縮放，需要手動(dòng)調(diào)整 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 添加文本框

????小菜預(yù)計(jì)在 Logo 下添加兩個(gè)文本框，分別對(duì)應(yīng)用戶名和密碼；首先采用 DirectionalLayout 線性布局設(shè)置水平放置文本和文本框；其中在設(shè)置寬高時(shí)，小菜理解 match_parent 與 Android 端一致，填充滿父控件；match_content 與 wrap_content 一致，自適應(yīng)寬高；

????HarmonyOS 通過(guò) TextField 實(shí)現(xiàn)文本框，這與 Flutter 方式類似；文本框默認(rèn)白色填充無(wú)邊框，需要我們手動(dòng)設(shè)置顯示效果；

<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="請(qǐng)輸入用戶名！"
        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

????小菜預(yù)計(jì)在文本框下添加兩個(gè) Button，大部分熟悉都很容易理解，但小菜在嘗試添加背景時(shí)發(fā)現(xiàn)默認(rèn)的按鈕尺寸是 Button 內(nèi)填充大小，需要通過(guò)內(nèi)外邊距來(lái)進(jìn)行按鈕的調(diào)整；

????HarmonyOS 沒(méi)有 drawable，對(duì)于背景圖 shape 等都是通過(guò) graphic 定義好對(duì)應(yīng)的 xml 再設(shè)置對(duì)應(yīng)控件的元素背景；

<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>

小擴(kuò)展

1. 單位

2. 圖片 scale_mode

????小菜對(duì) HarmonyOS 還停留至 0 基礎(chǔ)位置，具體詳細(xì)的官方文檔還未學(xué)習(xí)，僅以 Android 基礎(chǔ)進(jìn)行簡(jiǎn)單嘗試；之后會(huì)對(duì)具體控件進(jìn)行詳細(xì)學(xué)習(xí)與嘗試；如有錯(cuò)誤，請(qǐng)多多指導(dǎo)！

來(lái)源： 阿策小和尚