返回发烧友论坛
发 帖  

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

兮动人
2021-09-27 16:26:27
阅读量0
鸿蒙OS
0
4

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">

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

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

  33. </DirectionalLayout>
复制代码


  • 因为要在 onClick 方法中用到 TextField 和 Button 这两个组件，所以要把这两个组件移到成员位置，使其成为成员变量后，onClick 方法才能访问的到
MainAbilitySlice
  1. package com.xdr630.textfieldapplication.slice;

  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;

  12. public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {

  14.     TextField tf;
  15.     Button but;

  17.     @Override
  18.     public void onStart(Intent intent) {
  19.         super.onStart(intent);
  20.         super.setUIContent(ResourceTable.Layout_ability_main);

  22.         //1.找到文本组件框对象
  23.         tf = (TextField) findComponentById(ResourceTable.Id_text);
  24.         //找到按钮组件对象
  25.         but = (Button) findComponentById(ResourceTable.Id_but);

  27.         //2.给按钮绑定点击事件
  28.         //当点击了按钮之后，就要获取文本输入框的内容
  29.         but.setClickedListener(this);

  31.     }

  33.     @Override
  34.     public void onActive() {
  35.         super.onActive();
  36.     }

  38.     @Override
  39.     public void onForeground(Intent intent) {
  40.         super.onForeground(intent);
  41.     }

  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秒

  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. <?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">

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

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

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

  35. </DirectionalLayout>
复制代码

MainAbilitySlice
  1. package com.xdr630.textfieldapplication3.slice;

  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;

  12. public class MainAbilitySlice extends AbilitySlice implements Component.TouchEventListener {

  14.     TextField tf;

  16.     @Override
  17.     public void onStart(Intent intent) {
  18.         super.onStart(intent);
  19.         super.setUIContent(ResourceTable.Layout_ability_main);

  21.         //1.找到两个组件对象
  22.         tf = (TextField) findComponentById(ResourceTable.Id_text);
  23.         Button but = (Button) findComponentById(ResourceTable.Id_but);

  25.         //2.要给按钮绑定一个触摸事件
  26.         //因为在触摸事件中，才能获取到按下不松或松开
  27.         //单击事件——只能捕获到点击了一下
  28.         but.setTouchEventListener(this);


  31.     }

  33.     @Override
  34.     public void onActive() {
  35.         super.onActive();
  36.     }

  38.     @Override
  39.     public void onForeground(Intent intent) {
  40.         super.onForeground(intent);
  41.     }

  43.     @Override
  44.     //参数一：现在触摸的按钮
  45.     //参数二：动作对象
  46.     public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
  47.         int action = touchEvent.getAction();

  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
细节说明：
  • 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">

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

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

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



  68. </DirectionalLayout>
复制代码

  • 运行：


举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友