HarmonyOS實戰——TextField文本輸入框元件基本使用

【鴻蒙專欄，從入門到實戰系列】：

https://blog.csdn.net/qq_41684621/category_10128500.html

1. TextField元件基本用法

2. TextField案例——擷取文本輸入框中的内容并進行Toast提示

3. TextField元件進階用法

3.1 密碼的密文展示

3.2 基線的設定

3.3 氣泡的設定

4. TextField案例——長按檢視密碼明文

5. TextField案例——搭建登入界面

元件說明：

是<code>Text</code>的子類，用來進行使用者輸入資料的

常見屬性：

通過<code>TextField</code>擷取文本輸入框中的内容并進行<code>Toast</code>提示

建立項目：<code>TextFieldApplication</code>

ability_main

因為要在 <code>onClick</code> 方法中用到 <code>TextField</code> 和 <code>Button</code> 這兩個元件，是以要把這兩個元件移到成員位置，使其成為成員變量後，<code>onClick</code> 方法才能通路的到

MainAbilitySlice

運作：

當輸入密碼的時候會變成密文展示

<code>ohos:text_input_type="pattern_password"</code>：表示輸入的密碼以密文的方式顯示

基本使用：

有的時候文本輸入框并不是一個框，而是下面有一條橫線，這條線華為官方叫做基線

把文本輸入框使用橫線表示，在上面加上一條基線，把輸入框的背景顔色去掉

如果以後看到一條基線，然後在輸入一些數字資訊，這還是 <code>TextField</code> 文本輸入框元件，隻不過是背景色沒有設定，讓它跟布局的顔色一緻了，看不到背景而已

當用滑鼠長按選中輸入的内容後，就會選中内容，前面的光标和後面的光标，以及中間選中的内容顔色會改變，華為官方給前、後的光标，以及沒有選中内容狀态下出現的小氣球取名為氣泡

可以設定左邊、右邊，以及沒有選中情況下的氣泡

氣泡的圖檔、顔色都是可以自定義的

以下用到的圖檔可自取：https://www.aliyundrive.com/s/wT22d1Vb1BV

把左、右，以及中間沒有選中的氣泡圖檔複制到 <code>media</code> 檔案夾下

<code>ohos:element_selection_left_bubble</code>、<code>ohos:element_selection_right_bubble</code>分别設定左右氣泡顯示的圖檔

<code>ohos:element_cursor_bubble</code>：設定沒有選中時的氣泡圖檔

<code>ohos:selection_color</code>：設定選中時内容的顔色

在一些APP中，登入界面密碼輸入框那裡有個小眼睛，按住小眼睛後就可以看到密碼的明文展示，松開小眼睛又恢複到密文狀态了

把“小眼睛”改成Button元件，實作的邏輯原理也是一樣的

需求分析：

按住按鈕不松，将輸入框中的密碼變成明文

松開按鈕之後，輸入框中的密碼變回密文

建立項目：<code>TextFieldApplication3</code>

建立項目：<code>TextFieldApplication4</code>

細節說明：

Text文本（忘記密碼了？）元件預設是左邊放置的，加上 <code>ohos:layout_alignment="right"</code>就是右邊放置了，同時也給個<code>ohos:right_margin="20vp"</code>和右邊的螢幕有些距離。如果<code>ohos:layout_alignment="right"</code>屬性不寫，直接寫<code>ohos:right_margin="20vp</code>，那麼<code>ohos:layout_alignment="right"</code>屬性就會失效，因為元件預設是放在左邊的。

本文來自部落格園，作者：兮動人，轉載請注明原文連結：https://www.cnblogs.com/xdr630/p/15350319.html