文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-02 21:16

关注

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

https://harmonyos.51cto.com

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提示

ability_main

  1. "1.0" encoding="utf-8"?> 
  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.     
  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.     
  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.  

因为要在 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.     } 
  64. } 

运行：

3. TextField组件高级用法

3.1 密码的密文展示

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

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

基本使用：

  1. "1.0" encoding="utf-8"?> 
  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.         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.  

3.2 基线的设置

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

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

  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 气泡的设置

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

  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 文件夹下。

  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.         /> 

运行：

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

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

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

需求分析：

新建项目：TextFieldApplication3

ability_main

  1. "1.0" encoding="utf-8"?> 
  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.     
  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.     
  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.  

 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.     } 
  60. } 

 运行：

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

新建项目：TextFieldApplication4

细节说明：

ability_main

  1. "1.0" encoding="utf-8"?> 
  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.         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.     
  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.     
  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.     
  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.     
  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.  

 运行：

想了解更多内容，请访问：

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

https://harmonyos.51cto.com

 

来源：鸿蒙社区内容投诉

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

    难度     813人已做
    查看

  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看

  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看

  • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

    难度     435人已做
    查看

  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机

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

后端开发鸿蒙HarmonyOS2024-12-02

HarmonyOS实战—CommonDialog组件的基本使用

后端开发鸿蒙HarmonyOS2024-12-14

HarmonyOS实战—ToastDialog组件的基本使用

后端开发鸿蒙HarmonyOS2024-12-02

HarmonyOS实战— ProgressBar进度条组件基本使用

后端开发鸿蒙HarmonyOS2024-12-02

ElementUI的Tree组件的基本使用实战教程

后端开发2022-12-09

2020征文-TV「3.3 文本输入框」鸿蒙HarmonyOSTextField组件介绍和应用

后端开发鸿蒙HarmonyOS2024-12-03
位置：首页-资讯-后端开发
咦！没有更多了？去看看其它编程学习网 内容吧
首页课程
资料下载问答资讯