HarmonyOS系統(tǒng)TextField組件基本用法

1. TextField組件基本用法

組件說明：

是Text的子類，用來進(jìn)行用戶輸入數(shù)據(jù)的

常見屬性：

《TextField ohos:id=“$+id:text” ohos:height=“50vp” ohos:width=“319vp” ohos:background_element=“#FFFFFF” ohos:hint=“請(qǐng)輸入信息” ohos:layout_alignment=“horizontal_center” ohos:text_alignment=“center” ohos:text_color=“#999999” ohos:text_size=“17fp” ohos:top_margin=“100vp”/》

2. TextField案例——獲取文本輸入框中的內(nèi)容并進(jìn)行Toast提示

通過TextField獲取文本輸入框中的內(nèi)容并進(jìn)行Toast提示

新建項(xiàng)目：TextFieldApplication

ability_main

《？xml version=“1.0” encoding=“utf-8”？》《DirectionalLayout xmlns:ohos=“http://schemas.huawei.com/res/ohos” ohos:height=“match_parent” ohos:width=“match_parent” ohos:background_element=“#F2F2F2” ohos:orientation=“vertical”》

《TextField ohos:id=“$+id:text” ohos:height=“50vp” ohos:width=“319vp” ohos:background_element=“#FFFFFF” ohos:hint=“請(qǐng)輸入信息” ohos:layout_alignment=“horizontal_center” ohos:text_alignment=“center” ohos:text_color=“#999999” ohos:text_size=“17fp” ohos:top_margin=“100vp”/》

《Button ohos:id=“$+id:but” ohos:height=“47vp” ohos:width=“319vp” ohos:background_element=“#21a8FD” ohos:layout_alignment=“center” ohos:text=“獲取信息” ohos:text_alignment=“center” ohos:text_color=“#FEFEFE” ohos:text_size=“24vp” ohos:top_margin=“77vp”/》

《/DirectionalLayout》

因?yàn)橐?onClick 方法中用到 TextField 和 Button 這兩個(gè)組件，所以要把這兩個(gè)組件移到成員位置，使其成為成員變量后，onClick 方法才能訪問的到

MainAbilitySlice

package com.xdr630.textfieldapplication.slice;

import com.xdr630.textfieldapplication.ResourceTable;import ohos.aafwk.ability.AbilitySlice;import ohos.aafwk.content.Intent;import ohos.agp.components.Button;import ohos.agp.components.Component;import ohos.agp.components.TextField;import ohos.agp.utils.LayoutAlignment;import ohos.agp.window.dialog.ToastDialog;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {

TextField tf; Button but;

@Override public void onStart（Intent intent） { super.onStart（intent）; super.setUIContent（ResourceTable.Layout_ability_main）;

//1.找到文本組件框?qū)ο?tf = （TextField） findComponentById（ResourceTable.Id_text）; //找到按鈕組件對(duì)象 but = （Button） findComponentById（ResourceTable.Id_but）;

//2.給按鈕綁定點(diǎn)擊事件 //當(dāng)點(diǎn)擊了按鈕之后，就要獲取文本輸入框的內(nèi)容 but.setClickedListener（this）;

}

@Override public void onActive（） { super.onActive（）; }

@Override public void onForeground（Intent intent） { super.onForeground（intent）; }

@Override public void onClick（Component component） { //當(dāng)點(diǎn)擊了按鈕之后，獲取文本輸入框的內(nèi)容 String message = tf.getText（）; //利用一個(gè)Toast將信息彈出 ToastDialog td = new ToastDialog（this）; //大小不用設(shè)置，默認(rèn)是包裹內(nèi)容的 //自動(dòng)關(guān)閉不用設(shè)置，默認(rèn)到了時(shí)間之后就自動(dòng)關(guān)閉 //默認(rèn)持續(xù)時(shí)間是 2秒

//設(shè)置Toast的背景 td.setTransparent（true）; //位置（默認(rèn)居中） td.setAlignment（LayoutAlignment.BOTTOM）; //設(shè)置一個(gè)偏移 td.setOffset（0，200）; //設(shè)置Toast內(nèi)容 td.setText（message）; //讓Toast出現(xiàn) td.show（）; }}

運(yùn)行：

3. TextField組件高級(jí)用法

3.1 密碼的密文展示

當(dāng)輸入密碼的時(shí)候會(huì)變成密文展示

ohos:text_input_type=“pattern_password”：表示輸入的密碼以密文的方式顯示

基本使用：

《？xml version=“1.0” encoding=“utf-8”？》《DirectionalLayout xmlns:ohos=“http://schemas.huawei.com/res/ohos” ohos:height=“match_parent” ohos:width=“match_parent” ohos:orientation=“vertical” ohos:background_element=“#F2F2F2”》

《TextField ohos:height=“50vp” ohos:width=“319vp” ohos:hint=“請(qǐng)輸入信息” ohos:text_size=“17fp” ohos:hint_color=“#999999” ohos:text_alignment=“center” ohos:top_margin=“100vp” ohos:layout_alignment=“horizontal_center” ohos:background_element=“#FFFFFF” ohos:text_input_type=“pattern_password”/》

《/DirectionalLayout》

3.2 基線的設(shè)置

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

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

《TextField ohos:height=“50vp” ohos:width=“319vp” ohos:hint=“請(qǐng)輸入信息” ohos:text_size=“17fp” ohos:hint_color=“#999999” ohos:text_alignment=“center” ohos:top_margin=“100vp” ohos:layout_alignment=“horizontal_center” ohos:text_input_type=“pattern_password” ohos:basement=“#000000” /》

如果以后看到一條基線，然后在輸入一些數(shù)字信息，這還是 TextField 文本輸入框組件，只不過是背景色沒有設(shè)置，讓它跟布局的顏色一致了，看不到背景而已

3.3 氣泡的設(shè)置

當(dāng)用鼠標(biāo)長(zhǎng)按選中輸入的內(nèi)容后，就會(huì)選中內(nèi)容，前面的光標(biāo)和后面的光標(biāo)，以及中間選中的內(nèi)容顏色會(huì)改變，華為官方給前、后的光標(biāo)，以及沒有選中內(nèi)容狀態(tài)下出現(xiàn)的小氣球取名為氣泡

《TextField ohos:height=“50vp” ohos:width=“319vp” ohos:hint=“請(qǐng)輸入信息” ohos:text_size=“17fp” ohos:hint_color=“#999999” ohos:text_alignment=“center” ohos:top_margin=“100vp” ohos:layout_alignment=“horizontal_center” ohos:basement=“#000000” /》

可以設(shè)置左邊、右邊，以及沒有選中情況下的氣泡

氣泡的圖片、顏色都是可以自定義的

以下用到的圖片可自?。?/p>

https://www.aliyundrive.com/s/wT22d1Vb1BV

把左、右，以及中間沒有選中的氣泡圖片復(fù)制到 media 文件夾下

《TextField ohos:height=“50vp” ohos:width=“319vp” ohos:hint=“請(qǐng)輸入信息” ohos:text_size=“17fp” ohos:hint_color=“#999999” ohos:text_alignment=“center” ohos:top_margin=“100vp” ohos:layout_alignment=“horizontal_center” ohos:basement=“#000000” ohos:element_selection_left_bubble=“$media:left” ohos:element_selection_right_bubble=“$media:right” ohos:element_cursor_bubble=“$media:bubble” ohos:selection_color=“#FF0000” /》

ohos:element_selection_left_bubble、ohos:element_selection_right_bubble分別設(shè)置左右氣泡顯示的圖片

ohos:element_cursor_bubble：設(shè)置沒有選中時(shí)的氣泡圖片

ohos:selection_color：設(shè)置選中時(shí)內(nèi)容的顏色

運(yùn)行：

4. TextField案例——長(zhǎng)按查看密碼明文

在一些APP中，登錄界面密碼輸入框那里有個(gè)小眼睛，按住小眼睛后就可以看到密碼的明文展示，松開小眼睛又恢復(fù)到密文狀態(tài)了

把“小眼睛”改成Button組件，實(shí)現(xiàn)的邏輯原理也是一樣的

需求分析：

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

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

新建項(xiàng)目：TextFieldApplication3

ability_main

《？xml version=“1.0” encoding=“utf-8”？》《DirectionalLayout xmlns:ohos=“http://schemas.huawei.com/res/ohos” ohos:height=“match_parent” ohos:width=“match_parent” ohos:orientation=“vertical” ohos:background_element=“#F2F2F2” 》

《TextField ohos:id=“$+id:text” ohos:height=“50vp” ohos:width=“319vp” ohos:hint=“請(qǐng)輸入密碼” ohos:text_size=“17fp” ohos:hint_color=“#999999” ohos:text_alignment=“center” ohos:top_margin=“100vp” ohos:layout_alignment=“horizontal_center” ohos:background_element=“#FFFFFF” ohos:text_input_type=“pattern_password”/》 《Button ohos:id=“$+id:but” ohos:height=“47vp” ohos:width=“319vp” ohos:text=“查看密碼” ohos:text_size=“24vp” ohos:text_color=“#FEFEFE” ohos:text_alignment=“center” ohos:background_element=“#21a8FD” ohos:top_margin=“77vp” ohos:layout_alignment=“center”/》

《/DirectionalLayout》

MainAbilitySlice

package com.xdr630.textfieldapplication3.slice;

import com.xdr630.textfieldapplication3.ResourceTable;import ohos.aafwk.ability.AbilitySlice;import ohos.aafwk.content.Intent;import ohos.agp.components.Button;import ohos.agp.components.Component;import ohos.agp.components.InputAttribute;import ohos.agp.components.TextField;import ohos.multimodalinput.event.TouchEvent;

public class MainAbilitySlice extends AbilitySlice implements Component.TouchEventListener {

TextField tf;

@Override public void onStart（Intent intent） { super.onStart（intent）; super.setUIContent（ResourceTable.Layout_ability_main）;

//1.找到兩個(gè)組件對(duì)象 tf = （TextField） findComponentById（ResourceTable.Id_text）; Button but = （Button） findComponentById（ResourceTable.Id_but）;

//2.要給按鈕綁定一個(gè)觸摸事件 //因?yàn)樵谟|摸事件中，才能獲取到按下不松或松開 //單擊事件——只能捕獲到點(diǎn)擊了一下 but.setTouchEventListener（this）;

}

@Override public void onActive（） { super.onActive（）; }

@Override public void onForeground（Intent intent） { super.onForeground（intent）; }

@Override //參數(shù)一：現(xiàn)在觸摸的按鈕 //參數(shù)二：動(dòng)作對(duì)象 public boolean onTouchEvent（Component component， TouchEvent touchEvent） { int action = touchEvent.getAction（）;

if （action == TouchEvent.PRIMARY_POINT_DOWN）{//表示按下不松的時(shí)候 //當(dāng)按下不送的時(shí)候，將文本框中密碼變成明文 tf.setTextInputType（InputAttribute.PATTERN_NULL）; }else if （action == TouchEvent.PRIMARY_POINT_UP）{//表示松開的時(shí)候 //當(dāng)松開的時(shí)候，將文本框中的密碼變回密文 tf.setTextInputType（InputAttribute.PATTERN_PASSWORD）; } //true：表示觸摸事件的后續(xù)動(dòng)作還會(huì)進(jìn)行觸發(fā) //false：表示觸摸事件只觸發(fā)第一個(gè)按下不松 return true; }}

運(yùn)行：

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

新建項(xiàng)目：TextFieldApplication4

細(xì)節(jié)說明：

Text文本（忘記密碼了？）組件默認(rèn)是左邊放置的，加上 ohos:layout_alignment=“right”就是右邊放置了，同時(shí)也給個(gè)ohos:right_margin=“20vp”和右邊的屏幕有些距離。如果ohos:layout_alignment=“right”屬性不寫，直接寫ohos:right_margin=“20vp，那么ohos:layout_alignment=”right“屬性就會(huì)失效，因?yàn)榻M件默認(rèn)是放在左邊的。

ability_main

《？xml version=”1.0“ encoding=”utf-8“？》《DirectionalLayout xmlns:ohos=”http://schemas.huawei.com/res/ohos“ ohos:height=”match_parent“ ohos:width=”match_parent“ ohos:orientation=”vertical“ ohos:background_element=”#F2F2F2“》

《TextField ohos:id=”$+id:username“ ohos:height=”50vp“ ohos:width=”319vp“ ohos:hint=”請(qǐng)輸入用戶名“ ohos:text_size=”17fp“ ohos:hint_color=”#999999“ ohos:text_alignment=”center“ ohos:top_margin=”100vp“ ohos:layout_alignment=”horizontal_center“ ohos:background_element=”#FFFFFF“/》

《TextField ohos:id=”$+id:password“ ohos:height=”50vp“ ohos:width=”319vp“ ohos:hint=”請(qǐng)輸入密碼“ ohos:text_size=”17fp“ ohos:hint_color=”#999999“ ohos:text_alignment=”center“ ohos:top_margin=”10vp“ ohos:layout_alignment=”horizontal_center“ ohos:background_element=”#FFFFFF“ ohos:text_input_type=”pattern_password“/》 《Text ohos:height=”match_content“ ohos:width=”match_content“ ohos:text=”忘記密碼了？“ ohos:text_size=”17fp“ ohos:text_color=”#979797“ ohos:top_margin=”13vp“ ohos:layout_alignment=”right“ ohos:right_margin=”20vp“/》 《Button ohos:height=”47vp“ ohos:width=”319vp“ ohos:text=”登錄“ ohos:text_size=”24fp“ ohos:text_color=”#FEFEFE“ ohos:text_alignment=”center“ ohos:background_element=”#21a8FD“ ohos:top_margin=”77vp“ ohos:layout_alignment=”horizontal_center“/》

《Button ohos:height=”47vp“ ohos:width=”319vp“ ohos:text=”注冊(cè)“ ohos:text_size=”24fp“ ohos:text_color=”#FEFEFE“ ohos:text_alignment=”center“ ohos:background_element=”#21a8FD“ ohos:top_margin=”13vp“ ohos:layout_alignment=”horizontal_center“/》

《/DirectionalLayout》

責(zé)任編輯：haq