2. 程式人生 > 其它 >HarmonyOS實戰——TextField文字輸入框元件基本使用

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

阿新 • • 發佈：2021-09-28
HarmonyOS實戰——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>
  • 執行：

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

相關推薦

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

HarmonyOS實戰——TextField文字輸入框元件基本使用 【鴻蒙專欄，從入門到實戰系列】：

Vue數字輸入框元件示例程式碼詳解

數字輸入框元件 實現功能：只允許輸入數字(包括小數)、允許設定初始值、最大值、最小值。

Vue數字輸入框元件使用方法詳解

前面的話 關於基礎元件介紹，已經更新完了。這篇文章將用元件基礎知識開發一個數字輸入框元件。將涉及到指令、事件、元件間通訊。

PyQt5 文字輸入框自動補全QLineEdit的實現示例

一、QCompleter類 自動補全會用到的一個類 主要程式碼 def init_lineedit(self): # 增加自動補全

Android 文字輸入框 EditText

1. EditText 的特性 在學習過 TextView 之後，EditText 就非常好理解了，它提供了一種文字輸入的方式，內部可以支援單行或者多行輸入，並且提供一個浮標，讓使用者選擇輸入的位置，通常情況下點選 EditText 會自動展

elementui使用MessageBox 彈框自定義內容$msgbox：實現一個textarea文字輸入框

1、首先我們可以看下官網的例子： <template> <el-button type=\"text\" @click=\"open\">點選開啟 Message Box</el-button>

python 圖形化程式設計——文字輸入框

函式介紹 mulenterbox()——文字輸入框 multenterbox(msg=\' \', title=\' \', fields=(), values=())其中values是輸入的預設值、feilds是需要填寫的條目名稱，均用列表填寫；返回值是所有填寫的值構成

jsoup 獲取html中body內容_html文字輸入框程式碼是什麼？如何建立html文字輸入框

技術標籤：jsoup 獲取html中body內容 如何建立html文字輸入框？html文字輸入框程式碼是什麼？HTML表單是獲取使用者輸入所需的內容。但是首先，你需要製作一個文字框，那麼如何建立是一個問題，下面我們來講一下

alert獲取輸入框內容_實用開源：Web 聊天工具的富文字輸入框

最近折騰 Websocket，打算開發一個聊天室應用練練手。在應用開發的過程中發現可以插入 emoji ，貼上圖片的富文字輸入框其實蘊含著許多有趣的知識，於是便打算記錄下來和大家分享。

JavaScript實現一個輸入框元件

本文例項為大家分享了手動實現一個輸入框元件的具體程式碼，供大家參考，具體內容如下

短視訊系統利用Compose實現全新文字輸入框

短視訊系統利用Compose實現全新文字輸入框的相關程式碼Jetpack Compose是用於構建原生Android UI的現代工具包，使用更簡潔的程式碼、強大的工具和直觀的Kotlin API，簡化並加速了Android上的UI開發。不同於Andorid常

python測試開發django-137.Bootstrap 輸入框元件input-group

前言 在頁面上看到的這種輸入框控制元件可以用Bootstrap 輸入框元件input-group來實現

HTML多行文字輸入框和密碼輸入框

接下來我們寫個性簽名和密碼輸入框。 接下來我們寫個性簽名和密碼輸入框。

6.6 QFrame多行文字輸入框邊框基類

一、QFrame多行文字輸入框邊框基類 1.基本知識 QFrame就是專門設定多行文字輸入框邊框的基類，通過QFrame能給多行文字框設定你想要的樣式和引數。

前端實現富文字輸入框及校驗四則運算表示式

接到一個需求，要求實現一個類似富文字輸入框，輸入$之後彈出候選列表進行選擇，點選後選項輸入到輸入框內，展示為類似一個標籤，退格時刪除整個標籤，儲存時校驗公式合法性。

HarmonyOS實戰——TickTimer定時器元件基本使用

HarmonyOS實戰——TickTimer定時器元件基本使用 【鴻蒙專欄，從入門到實戰系列】：

vue實現一個6個輸入框的驗證碼輸入元件功能的例項程式碼

要實現的功能： 完全和單輸入框一樣的操作，甚至可以插入覆蓋： 1，限制輸入數字

css：三角&使用者介面（三角形效果、滑鼠樣式、輸入框與文字域的優化）

1、三角形的實現原理 （1）在定義一個塊級元素div的時候，不給它定義寬和高：

吳裕雄--天生自然ANDROID開發學習：2.5.4 AutoCompleteTextView(自動完成文字框)的基本使用

1.相關屬性： android:completionHint：設定下拉選單中的提示標題 android:completionHintView：定義提示檢視中顯示下拉選單

點選文字變成輸入框

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">