HarmonyOS实战—TextField文本输入框组件基本使用

开发 前端 OpenHarmony
Text文本(忘记密码了?)组件默认是左边放置的,加上 ohos:layout_alignment="right"就是右边放置了,同时也给个ohos:right_margin="20vp"和右边的屏幕有些距离。

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

1. TextField组件基本用法

组件说明:

  • 是Text的子类,用来进行用户输入数据的。

常见属性:

  1. <TextField 
  2.         ohos:id="$+id:text" 
  3.         ohos:height="50vp" 
  4.         ohos:width="319vp" 
  5.         ohos:background_element="#FFFFFF" 
  6.         ohos:hint="请输入信息" 
  7.         ohos:layout_alignment="horizontal_center" 
  8.         ohos:text_alignment="center" 
  9.         ohos:text_color="#999999" 
  10.         ohos:text_size="17fp" 
  11.         ohos:top_margin="100vp"/> 

2. TextField案例——获取文本输入框中的内容并进行Toast提示

  • 通过TextField获取文本输入框中的内容并进行Toast提示
  • 新建项目:TextFieldApplication

ability_main

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent" 
  6.     ohos:background_element="#F2F2F2" 
  7.     ohos:orientation="vertical"
  8.  
  9.     <TextField 
  10.         ohos:id="$+id:text" 
  11.         ohos:height="50vp" 
  12.         ohos:width="319vp" 
  13.         ohos:background_element="#FFFFFF" 
  14.         ohos:hint="请输入信息" 
  15.         ohos:layout_alignment="horizontal_center" 
  16.         ohos:text_alignment="center" 
  17.         ohos:text_color="#999999" 
  18.         ohos:text_size="17fp" 
  19.         ohos:top_margin="100vp"/> 
  20.  
  21.     <Button 
  22.         ohos:id="$+id:but" 
  23.         ohos:height="47vp" 
  24.         ohos:width="319vp" 
  25.         ohos:background_element="#21a8FD" 
  26.         ohos:layout_alignment="center" 
  27.         ohos:text="获取信息" 
  28.         ohos:text_alignment="center" 
  29.         ohos:text_color="#FEFEFE" 
  30.         ohos:text_size="24vp" 
  31.         ohos:top_margin="77vp"/> 
  32.  
  33. </DirectionalLayout> 

因为要在 onClick 方法中用到 TextField 和 Button 这两个组件,所以要把这两个组件移到成员位置,使其成为成员变量后,onClick 方法才能访问的到。

MainAbilitySlice

  1. package com.xdr630.textfieldapplication.slice; 
  2.  
  3. import com.xdr630.textfieldapplication.ResourceTable; 
  4. import ohos.aafwk.ability.AbilitySlice; 
  5. import ohos.aafwk.content.Intent; 
  6. import ohos.agp.components.Button; 
  7. import ohos.agp.components.Component; 
  8. import ohos.agp.components.TextField; 
  9. import ohos.agp.utils.LayoutAlignment; 
  10. import ohos.agp.window.dialog.ToastDialog; 
  11.  
  12. public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { 
  13.  
  14.     TextField tf; 
  15.     Button but; 
  16.  
  17.     @Override 
  18.     public void onStart(Intent intent) { 
  19.         super.onStart(intent); 
  20.         super.setUIContent(ResourceTable.Layout_ability_main); 
  21.  
  22.         //1.找到文本组件框对象 
  23.         tf = (TextField) findComponentById(ResourceTable.Id_text); 
  24.         //找到按钮组件对象 
  25.         but = (Button) findComponentById(ResourceTable.Id_but); 
  26.  
  27.         //2.给按钮绑定点击事件 
  28.         //当点击了按钮之后,就要获取文本输入框的内容 
  29.         but.setClickedListener(this); 
  30.  
  31.     } 
  32.  
  33.     @Override 
  34.     public void onActive() { 
  35.         super.onActive(); 
  36.     } 
  37.  
  38.     @Override 
  39.     public void onForeground(Intent intent) { 
  40.         super.onForeground(intent); 
  41.     } 
  42.  
  43.     @Override 
  44.     public void onClick(Component component) { 
  45.         //当点击了按钮之后,获取文本输入框的内容 
  46.         String message = tf.getText(); 
  47.         //利用一个Toast将信息弹出 
  48.         ToastDialog td = new ToastDialog(this); 
  49.         //大小不用设置,默认是包裹内容的 
  50.         //自动关闭不用设置,默认到了时间之后就自动关闭 
  51.         //默认持续时间是 2秒 
  52.  
  53.         //设置Toast的背景 
  54.         td.setTransparent(true); 
  55.         //位置(默认居中) 
  56.         td.setAlignment(LayoutAlignment.BOTTOM); 
  57.         //设置一个偏移 
  58.         td.setOffset(0,200); 
  59.         //设置Toast内容 
  60.         td.setText(message); 
  61.         //让Toast出现 
  62.         td.show(); 
  63.     } 

运行:

3. TextField组件高级用法

3.1 密码的密文展示

当输入密码的时候会变成密文展示。

ohos:text_input_type="pattern_password":表示输入的密码以密文的方式显示。

基本使用:

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent" 
  6.     ohos:orientation="vertical" 
  7.     ohos:background_element="#F2F2F2"
  8.  
  9.     <TextField 
  10.         ohos:height="50vp" 
  11.         ohos:width="319vp" 
  12.         ohos:hint="请输入信息" 
  13.         ohos:text_size="17fp" 
  14.         ohos:hint_color="#999999" 
  15.         ohos:text_alignment="center" 
  16.         ohos:top_margin="100vp" 
  17.         ohos:layout_alignment="horizontal_center" 
  18.         ohos:background_element="#FFFFFF" 
  19.         ohos:text_input_type="pattern_password"/> 
  20.  
  21. </DirectionalLayout> 

3.2 基线的设置

有的时候文本输入框并不是一个框,而是下面有一条横线,这条线华为官方叫做基线。

把文本输入框使用横线表示,在上面加上一条基线,把输入框的背景颜色去掉。

  1. <TextField 
  2.         ohos:height="50vp" 
  3.         ohos:width="319vp" 
  4.         ohos:hint="请输入信息" 
  5.         ohos:text_size="17fp" 
  6.         ohos:hint_color="#999999" 
  7.         ohos:text_alignment="center" 
  8.         ohos:top_margin="100vp" 
  9.         ohos:layout_alignment="horizontal_center" 
  10.         ohos:text_input_type="pattern_password" 
  11.         ohos:basement="#000000" 
  12.         /> 

如果以后看到一条基线,然后在输入一些数字信息,这还是 TextField 文本输入框组件,只不过是背景色没有设置,让它跟布局的颜色一致了,看不到背景而已。

3.3 气泡的设置

当用鼠标长按选中输入的内容后,就会选中内容,前面的光标和后面的光标,以及中间选中的内容颜色会改变,华为官方给前、后的光标,以及没有选中内容状态下出现的小气球取名为气泡。

  1. <TextField 
  2.         ohos:height="50vp" 
  3.         ohos:width="319vp" 
  4.         ohos:hint="请输入信息" 
  5.         ohos:text_size="17fp" 
  6.         ohos:hint_color="#999999" 
  7.         ohos:text_alignment="center" 
  8.         ohos:top_margin="100vp" 
  9.         ohos:layout_alignment="horizontal_center" 
  10.         ohos:basement="#000000" 
  11.         /> 

可以设置左边、右边,以及没有选中情况下的气泡。

气泡的图片、颜色都是可以自定义的。

以下用到的图片可自取:https://www.aliyundrive.com/s/wT22d1Vb1BV

把左、右,以及中间没有选中的气泡图片复制到 media 文件夹下。

  1. <TextField 
  2.         ohos:height="50vp" 
  3.         ohos:width="319vp" 
  4.         ohos:hint="请输入信息" 
  5.         ohos:text_size="17fp" 
  6.         ohos:hint_color="#999999" 
  7.         ohos:text_alignment="center" 
  8.         ohos:top_margin="100vp" 
  9.         ohos:layout_alignment="horizontal_center" 
  10.         ohos:basement="#000000" 
  11.         ohos:element_selection_left_bubble="$media:left" 
  12.         ohos:element_selection_right_bubble="$media:right" 
  13.         ohos:element_cursor_bubble="$media:bubble" 
  14.         ohos:selection_color="#FF0000" 
  15.         /> 
  • ohos:element_selection_left_bubble、ohos:element_selection_right_bubble分别设置左右气泡显示的图片
  • ohos:element_cursor_bubble:设置没有选中时的气泡图片
  • ohos:selection_color:设置选中时内容的颜色

运行:

4. TextField案例——长按查看密码明文

在一些APP中,登录界面密码输入框那里有个小眼睛,按住小眼睛后就可以看到密码的明文展示,松开小眼睛又恢复到密文状态了。

把“小眼睛”改成Button组件,实现的逻辑原理也是一样的。

需求分析:

  • 按住按钮不松,将输入框中的密码变成明文
  • 松开按钮之后,输入框中的密码变回密文

新建项目:TextFieldApplication3

ability_main

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent" 
  6.     ohos:orientation="vertical" 
  7.     ohos:background_element="#F2F2F2" 
  8.     > 
  9.  
  10.     <TextField 
  11.         ohos:id="$+id:text" 
  12.         ohos:height="50vp" 
  13.         ohos:width="319vp" 
  14.         ohos:hint="请输入密码" 
  15.         ohos:text_size="17fp" 
  16.         ohos:hint_color="#999999" 
  17.         ohos:text_alignment="center" 
  18.         ohos:top_margin="100vp" 
  19.         ohos:layout_alignment="horizontal_center" 
  20.         ohos:background_element="#FFFFFF" 
  21.         ohos:text_input_type="pattern_password"/> 
  22.      
  23.     <Button 
  24.         ohos:id="$+id:but" 
  25.         ohos:height="47vp" 
  26.         ohos:width="319vp" 
  27.         ohos:text="查看密码" 
  28.         ohos:text_size="24vp" 
  29.         ohos:text_color="#FEFEFE" 
  30.         ohos:text_alignment="center" 
  31.         ohos:background_element="#21a8FD" 
  32.         ohos:top_margin="77vp" 
  33.         ohos:layout_alignment="center"/> 
  34.  
  35. </DirectionalLayout> 

 MainAbilitySlice

  1. package com.xdr630.textfieldapplication3.slice; 
  2.  
  3. import com.xdr630.textfieldapplication3.ResourceTable; 
  4. import ohos.aafwk.ability.AbilitySlice; 
  5. import ohos.aafwk.content.Intent; 
  6. import ohos.agp.components.Button; 
  7. import ohos.agp.components.Component; 
  8. import ohos.agp.components.InputAttribute; 
  9. import ohos.agp.components.TextField; 
  10. import ohos.multimodalinput.event.TouchEvent; 
  11.  
  12. public class MainAbilitySlice extends AbilitySlice implements Component.TouchEventListener { 
  13.  
  14.     TextField tf; 
  15.  
  16.     @Override 
  17.     public void onStart(Intent intent) { 
  18.         super.onStart(intent); 
  19.         super.setUIContent(ResourceTable.Layout_ability_main); 
  20.  
  21.         //1.找到两个组件对象 
  22.         tf = (TextField) findComponentById(ResourceTable.Id_text); 
  23.         Button but = (Button) findComponentById(ResourceTable.Id_but); 
  24.  
  25.         //2.要给按钮绑定一个触摸事件 
  26.         //因为在触摸事件中,才能获取到按下不松或松开 
  27.         //单击事件——只能捕获到点击了一下 
  28.         but.setTouchEventListener(this); 
  29.  
  30.  
  31.     } 
  32.  
  33.     @Override 
  34.     public void onActive() { 
  35.         super.onActive(); 
  36.     } 
  37.  
  38.     @Override 
  39.     public void onForeground(Intent intent) { 
  40.         super.onForeground(intent); 
  41.     } 
  42.  
  43.     @Override 
  44.     //参数一:现在触摸的按钮 
  45.     //参数二:动作对象 
  46.     public boolean onTouchEvent(Component component, TouchEvent touchEvent) { 
  47.         int action = touchEvent.getAction(); 
  48.  
  49.         if (action == TouchEvent.PRIMARY_POINT_DOWN){//表示按下不松的时候 
  50.             //当按下不送的时候,将文本框中密码变成明文 
  51.             tf.setTextInputType(InputAttribute.PATTERN_NULL); 
  52.         }else if (action == TouchEvent.PRIMARY_POINT_UP){//表示松开的时候 
  53.             //当松开的时候,将文本框中的密码变回密文 
  54.             tf.setTextInputType(InputAttribute.PATTERN_PASSWORD); 
  55.         } 
  56.         //true:表示触摸事件的后续动作还会进行触发 
  57.         //false:表示触摸事件只触发第一个按下不松 
  58.         return true
  59.     } 

 运行:

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

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent" 
  6.     ohos:orientation="vertical" 
  7.     ohos:background_element="#F2F2F2"
  8.  
  9.     <TextField 
  10.         ohos:id="$+id:username" 
  11.         ohos:height="50vp" 
  12.         ohos:width="319vp" 
  13.         ohos:hint="请输入用户名" 
  14.         ohos:text_size="17fp" 
  15.         ohos:hint_color="#999999" 
  16.         ohos:text_alignment="center" 
  17.         ohos:top_margin="100vp" 
  18.         ohos:layout_alignment="horizontal_center" 
  19.         ohos:background_element="#FFFFFF"/> 
  20.  
  21.     <TextField 
  22.         ohos:id="$+id:password" 
  23.         ohos:height="50vp" 
  24.         ohos:width="319vp" 
  25.         ohos:hint="请输入密码" 
  26.         ohos:text_size="17fp" 
  27.         ohos:hint_color="#999999" 
  28.         ohos:text_alignment="center" 
  29.         ohos:top_margin="10vp" 
  30.         ohos:layout_alignment="horizontal_center" 
  31.         ohos:background_element="#FFFFFF" 
  32.         ohos:text_input_type="pattern_password"/> 
  33.      
  34.     <Text 
  35.         ohos:height="match_content" 
  36.         ohos:width="match_content" 
  37.         ohos:text="忘记密码了?" 
  38.         ohos:text_size="17fp" 
  39.         ohos:text_color="#979797" 
  40.         ohos:top_margin="13vp" 
  41.         ohos:layout_alignment="right" 
  42.         ohos:right_margin="20vp"/> 
  43.      
  44.     <Button 
  45.         ohos:height="47vp" 
  46.         ohos:width="319vp" 
  47.         ohos:text="登录" 
  48.         ohos:text_size="24fp" 
  49.         ohos:text_color="#FEFEFE" 
  50.         ohos:text_alignment="center" 
  51.         ohos:background_element="#21a8FD" 
  52.         ohos:top_margin="77vp" 
  53.         ohos:layout_alignment="horizontal_center"/> 
  54.  
  55.     <Button 
  56.         ohos:height="47vp" 
  57.         ohos:width="319vp" 
  58.         ohos:text="注册" 
  59.         ohos:text_size="24fp" 
  60.         ohos:text_color="#FEFEFE" 
  61.         ohos:text_alignment="center" 
  62.         ohos:background_element="#21a8FD" 
  63.         ohos:top_margin="13vp" 
  64.         ohos:layout_alignment="horizontal_center"/> 
  65.  
  66.  
  67.  
  68. </DirectionalLayout> 

 运行:

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2021-09-06 15:31:01

鸿蒙HarmonyOS应用

2021-09-13 15:17:28

鸿蒙HarmonyOS应用

2020-12-23 11:45:27

鸿蒙HarmonyOSTextField组件

2021-09-27 10:43:18

鸿蒙HarmonyOS应用

2019-03-07 14:45:07

聊天工具富文本输入框前端

2020-09-24 14:06:19

Vue

2023-10-20 08:02:25

图形编辑器前端

2021-07-05 14:29:28

鸿蒙HarmonyOS应用

2011-07-22 15:32:53

iPhone 按钮 对话框

2021-12-13 16:44:49

鸿蒙HarmonyOS应用

2022-04-06 18:29:58

CSSJS输入框

2017-08-14 12:45:54

Windows 10Windows开机密码

2021-08-25 09:38:16

鸿蒙HarmonyOS应用

2021-07-13 09:49:08

鸿蒙HarmonyOS应用

2021-09-07 09:53:45

鸿蒙HarmonyOS应用

2021-11-01 11:08:28

鸿蒙HarmonyOS应用

2022-04-11 11:07:37

HarmonyUI小型系统textarea

2012-06-29 14:13:10

2017-09-11 17:46:48

设计

2023-04-27 15:39:54

AI模型
点赞
收藏

51CTO技术栈公众号