AI 助理
备案控制台
开发者社区 安全 文章 正文

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

2021-10-05 677
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： HarmonyOS实战——TextField文本输入框组件基本使用
  • 【鸿蒙专栏，从入门到实战系列】：

https://blog.csdn.net/qq_41684621/category_10128500.html

1. TextField组件基本用法

组件说明：

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

常见属性：
在这里插入图片描述
在这里插入图片描述

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

请添加图片描述

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

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

  • 把左、右，以及中间没有选中的气泡图片复制到 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>
  • 运行：

在这里插入图片描述

文章标签：
数据安全/隐私保护
关键词：
HarmonyOS文本
HarmonyOS组件
HarmonyOS实战
HarmonyOS输入框
HarmonyOS文本组件
兮动人
目录
相关文章
lqj_本人
|
10天前
|
安全 API 数据处理
鸿蒙next版开发：ArkTS组件通用属性（隐私遮罩）
在HarmonyOS 5.0中，ArkTS引入了隐私遮罩功能，用于保护用户隐私和数据安全。本文详细介绍了隐私遮罩的通用属性和使用方法，并提供了示例代码。隐私遮罩支持Image和Text组件，在数据加载或处理过程中防止敏感信息泄露，提升用户体验和数据安全性。
lqj_本人
33 11
lqj_本人
|
10天前
|
开发者 UED 容器
鸿蒙next版开发：ArkTS组件通用属性（Flex布局）
在HarmonyOS next中，ArkTS的Flex布局是一种强大且灵活的布局方式，支持水平或垂直方向排列元素，并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap，适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
lqj_本人
37 10
lqj_本人
|
10天前
|
开发者 容器
鸿蒙next版开发：ArkTS组件通用属性（文本通用）
在HarmonyOS 5.0中，ArkTS提供了丰富的文本通用属性，如textAlign、maxLines、textOverflow、fontSize、fontColor、fontStyle、fontWeight、fontFamily、lineHeight、letterSpacing和decoration等，用于实现多样的文本显示和样式效果。本文详细解读了这些属性，并提供了示例代码，帮助开发者更好地利用这些工具，提升应用界面的美观和实用性。
lqj_本人
41 8
lqj_本人
|
10天前
|
开发框架 UED 开发者
鸿蒙next版开发：ArkTS组件通用属性（显隐控制）
在HarmonyOS 5.0中，ArkTS引入了显隐控制属性，允许开发者通过`visibility`属性控制组件的显示与隐藏，优化用户体验和应用性能。本文详细解析了`visibility`属性的三种状态（Visible、Hidden、None）及其应用场景，并通过示例代码展示了如何使用显隐控制属性，避免组件频繁创建和销毁，提升性能。
lqj_本人
33 8
lqj_本人
|
10天前
|
API UED 开发者
鸿蒙next版开发：ArkTS组件通用属性（透明度设置）
在HarmonyOS 5.0中，ArkTS引入了透明度设置属性`opacity`，允许开发者自定义组件的透明度，从而创建复杂的视觉效果和提升用户体验。本文详细解读了`opacity`属性的用法，并提供了示例代码，展示了如何在不同透明度下展示组件。透明度设置在UI开发中具有多种用途，如创建重叠效果、增强美观性和实现动画效果。
lqj_本人
27 7
lqj_本人
|
10天前
|
UED 开发者 容器
鸿蒙next版开发：ArkTS组件通用属性（位置设置）
在HarmonyOS next中，ArkTS提供了align、direction、position、markAnchor、offset和alignRules等通用属性，用于精确控制组件在用户界面中的位置和布局。本文详细解读了这些属性，并提供了示例代码进行说明。通过这些属性，开发者可以实现精确布局、动态界面调整和提升用户体验。
lqj_本人
43 6
lqj_本人
|
10天前
|
UED 开发者
鸿蒙next版开发：ArkTS组件通用属性（边框设置）
在HarmonyOS 5.0中，ArkTS提供了丰富的边框设置属性，允许开发者自定义组件的边框样式，提升应用的视觉效果和用户体验。本文详细解读了border属性的使用方法，并提供了示例代码，展示了如何设置不同边的边框宽度、颜色、圆角和样式。边框设置在UI开发中具有重要作用，如区分组件、强调重要元素和美化界面。
lqj_本人
38 6
lqj_本人
|
10天前
|
UED 开发者 容器
鸿蒙next版开发：ArkTS组件通用属性（布局约束）
在HarmonyOS next中，ArkTS提供了一系列通用属性来设置组件的布局约束，使开发者能够灵活控制组件的布局行为。本文详细解读了这些属性，包括`space`、`justifyContent`、`alignItems`、`layoutWeight`、`matchParent`和`wrapContent`，并通过示例代码展示了它们的使用方法。这些属性有助于实现响应式布局、动态界面调整和提升用户体验。
lqj_本人
32 5
lqj_本人
|
10天前
|
UED 开发者
鸿蒙next版开发：ArkTS组件通用属性（图片边框设置）
在HarmonyOS 5.0中，ArkTS提供了灵活的图片边框设置属性，使开发者可以为应用中的图片组件添加各种边框效果，提升视觉效果和用户体验。本文详细解读了ArkTS中图片边框设置的通用属性，并提供了示例代码。通过设置`borderImage`属性，可以控制边框的图源、切割宽度、边框宽度、延伸距离、平铺模式和是否填充。示例代码展示了如何使用这些属性来创建具有不同边框效果的图片组件。图片边框设置在美化界面、区分内容和增强交互方面有重要作用。
lqj_本人
32 5
lqj_本人
|
10天前
|
UED 开发者 容器
鸿蒙next版开发：ArkTS组件通用属性（背景设置）
在HarmonyOS 5.0中，ArkTS提供了多种背景设置属性，如backgroundColor、backgroundImage、backgroundSize、backgroundPosition和backgroundBlurStyle，允许开发者自定义组件的背景样式，提升应用的视觉效果和用户体验。本文详细解读了这些属性，并提供了示例代码进行说明。
lqj_本人
32 5

热门文章

最新文章

  • 1
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（一） 嵌入式Linux开发基本概念以及开发流程介绍
  • 2
    鸿蒙应用开发项目新建过程与hap包生成方法
  • 3
    【鸿蒙软件开发】ArkUI容器组件之Grid(网格布局)
  • 4
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（四）传输文件
  • 5
    【鸿蒙软件开发】文本显示（Text/Span）
  • 6
    【鸿蒙软件开发】UIAbility组件概况、生命周期与启动模式
  • 7
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发流程（六）烧写整个系统或更新部分系统
  • 8
    scrcpy投屏工具的在harmonyOS开发上的使用
  • 9
    【HarmonyOS 4.0 应用开发实战】ArkTS 快速入门
  • 10
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（七）Ubuntu开发环境配置
  • 1
    鸿蒙HarmonyOS 与 Android 的NDK有什么区别？
    316
  • 2
    润开鸿与蚂蚁数科达成战略合作，发布基于鸿蒙的mPaaS移动应用开发产品
    123
  • 3
    HarmonyOS应用开发者基础认证 模拟考试 题库
    494
  • 4
    日志服务 HarmonyOS NEXT 日志采集最佳实践
    117292
  • 5
    MediaBox音视频终端SDK已适配鸿蒙星河版（HarmonyOS NEXT）
    309
  • 6
    首个身份认证SDK适配鸿蒙系统！阿里云金融级实人认证产品再升级
    602
  • 7
    “纯血鸿蒙”要来了，赶紧入手学习吧
    366
  • 8
    HarmonyOS的功能及场景应用
    213
  • 9
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Scroll容器组件
    618
  • 10
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之RowSplit容器组件
    154

    • 相关课程

    更多
  • React 入门教程开发文档
  • jQuery开发教程

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云OSS设置跨域访问