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案例——搭建登錄界面

1. TextField組件基本用法

組件說明：

• 是Text的子類，用來進行用戶輸入數據的
  常見屬性：
  
  

2. TextField案例——獲取文本輸入框中的內容並進行Toast提示

• 通過TextField獲取文本輸入框中的內容並進行Toast提示

• 新建項目：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="請輸入信息"
        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>

• 因為要在 onClick 方法中用到 TextField 和 Button 這兩個組件，所以要把這兩個組件移到成員位置，使其成為成員變量后，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.找到文本組件框對象
        tf = (TextField) findComponentById(ResourceTable.Id_text);
        //找到按鈕組件對象
        but = (Button) findComponentById(ResourceTable.Id_but);

        //2.給按鈕綁定點擊事件
        //當點擊了按鈕之后，就要獲取文本輸入框的內容
        but.setClickedListener(this);

    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

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

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

• 運行：

3. TextField組件高級用法

3.1 密碼的密文展示

• 當輸入密碼的時候會變成密文展示
  
• 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="請輸入信息"
        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 基線的設置

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

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

	<TextField
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:hint="請輸入信息"
        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"
        />

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

3.3 氣泡的設置

• 當用鼠標長按選中輸入的內容后，就會選中內容，前面的光標和后面的光標，以及中間選中的內容顏色會改變，華為官方給前、后的光標，以及沒有選中內容狀態下出現的小氣球取名為氣泡

	<TextField
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:hint="請輸入信息"
        ohos:text_size="17fp"
        ohos:hint_color="#999999"
        ohos:text_alignment="center"
        ohos:top_margin="100vp"
        ohos:layout_alignment="horizontal_center"
        ohos:basement="#000000"
        />

• 可以設置左邊、右邊，以及沒有選中情況下的氣泡
  
• 氣泡的圖片、顏色都是可以自定義的
• 以下用到的圖片可自取：https://www.aliyundrive.com/s/wT22d1Vb1BV
  
• 把左、右，以及中間沒有選中的氣泡圖片復制到 media 文件夾下
  

	<TextField
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:hint="請輸入信息"
        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分別設置左右氣泡顯示的圖片
• ohos:element_cursor_bubble：設置沒有選中時的氣泡圖片
• ohos:selection_color：設置選中時內容的顏色
• 運行：
  

4. TextField案例——長按查看密碼明文

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

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

需求分析：

• 按住按鈕不松，將輸入框中的密碼變成明文
• 松開按鈕之后，輸入框中的密碼變回密文

新建項目：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="請輸入密碼"
        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.找到兩個組件對象
        tf = (TextField) findComponentById(ResourceTable.Id_text);
        Button but = (Button) findComponentById(ResourceTable.Id_but);

        //2.要給按鈕綁定一個觸摸事件
        //因為在觸摸事件中，才能獲取到按下不松或松開
        //單擊事件——只能捕獲到點擊了一下
        but.setTouchEventListener(this);


    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    @Override
    //參數一：現在觸摸的按鈕
    //參數二：動作對象
    public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
        int action = touchEvent.getAction();

        if (action == TouchEvent.PRIMARY_POINT_DOWN){//表示按下不松的時候
            //當按下不送的時候，將文本框中密碼變成明文
            tf.setTextInputType(InputAttribute.PATTERN_NULL);
        }else if (action == TouchEvent.PRIMARY_POINT_UP){//表示松開的時候
            //當松開的時候，將文本框中的密碼變回密文
            tf.setTextInputType(InputAttribute.PATTERN_PASSWORD);
        }
        //true：表示觸摸事件的后續動作還會進行觸發
        //false：表示觸摸事件只觸發第一個按下不松
        return true;
    }
}

• 運行：
  

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

• 新建項目：TextFieldApplication4

細節說明：

• Text文本（忘記密碼了？）組件默認是左邊放置的，加上 ohos:layout_alignment="right"就是右邊放置了，同時也給個ohos:right_margin="20vp"和右邊的屏幕有些距離。如果ohos:layout_alignment="right"屬性不寫，直接寫ohos:right_margin="20vp，那么ohos:layout_alignment="right"屬性就會失效，因為組件默認是放在左邊的。

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="請輸入用戶名"
        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="請輸入密碼"
        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="注冊"
        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>

• 運行：