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

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

2021-10-05 691
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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文本组件
兮动人
目录
相关文章
余生吟清歌
|
2天前
|
JavaScript API 数据处理
基于HarmonyOS 5.0 (Next)技术的渐变模糊效果技术实现【代码实战】
本文详细介绍如何在HarmonyOS 5.0（Next）中实现渐变模糊效果，涵盖从基础页面搭建到添加模糊、渐变效果的全过程，并通过代码实战展示具体操作步骤。文章首先介绍了使用`Stack`和`Image`控件设置背景并应用`foregroundBlurStyle`属性实现模糊效果，接着通过`linearGradient`属性融入渐变效果，使界面更加精致美观。此外，还展示了如何利用滑动条和手势等交互元素动态调整模糊与渐变效果，增强用户体验。最后，通过具体代码示例说明如何为图片、弹窗等控件添加渐变模糊效果，突显HarmonyOS的强大功能与灵活性。
余生吟清歌
30 17
余生吟清歌
|
3天前
|
数据管理 API 调度
鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
HarmonyOS Next 是华为新一代操作系统，专注于分布式技术的深度应用与生态融合。本文通过技术特点、应用场景及实战案例，全面解析其核心技术架构与开发流程。重点介绍分布式软总线2.0、数据管理、任务调度等升级特性，并提供基于 ArkTS 的原生开发支持。通过开发跨设备协同音乐播放应用，展示分布式能力的实际应用，涵盖项目配置、主界面设计、分布式服务实现及部署调试步骤。此外，深入分析分布式数据同步原理、任务调度优化及常见问题解决方案，帮助开发者掌握 HarmonyOS Next 的核心技术和实战技巧。
余生吟清歌
119 76
鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
猫林老师
|
1天前
|
人工智能 文字识别 API
鸿蒙(HarmonyOS)原生AI能力之文本识别
如何实现文本识别
猫林老师
37 21
鸿蒙(HarmonyOS)原生AI能力之文本识别
余生吟清歌
|
3天前
|
开发框架 人工智能 安全
鸿蒙HarmonyOS应用开发 | 「鸿蒙技术分享」HarmonyOS NEXT元服务卡片实战体验
HarmonyOS NEXT的发布对华为及整个行业都产生了深远的影响。它不仅展示了华为的技术实力，还敏锐地把握了市场需求。同时，吸引了更多的开发者和合作伙伴加入鸿蒙生态体系，共同推动鸿蒙生态的繁荣发展。
余生吟清歌
172 19
鸿蒙HarmonyOS应用开发 | 「鸿蒙技术分享」HarmonyOS NEXT元服务卡片实战体验
余生吟清歌
|
2天前
|
安全 数据安全/隐私保护 UED
HarmonyOS 5.0 （Next）应用开发实战：使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0（Next）】
### HarmonyOS 5.0（Next）应用开发实战：使用ArkTS构建开箱即用的登录页面 HarmonyOS 5.0（Next）融合了美学与科技，引入“光感美学”设计理念和多设备深度协同功能。本文通过 ArkTS 构建一个简单的登录页面，展示了模块化导入、状态管理、方法封装、声明式UI构建及事件处理等最佳实践。代码实现了一个包含用户名和密码输入框及登录按钮的界面，支持错误提示和页面跳转。
余生吟清歌
35 14
HarmonyOS 5.0 （Next）应用开发实战：使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0（Next）】
余生吟清歌
|
3天前
|
物联网 调度 vr&ar
鸿蒙HarmonyOS应用开发 |鸿蒙技术分享HarmonyOS Next 深度解析：分布式能力与跨设备协作实战
鸿蒙技术分享：HarmonyOS Next 深度解析 随着万物互联时代的到来，华为发布的 HarmonyOS Next 在技术架构和生态体验上实现了重大升级。本文从技术架构、生态优势和开发实践三方面深入探讨其特点，并通过跨设备笔记应用实战案例，展示其强大的分布式能力和多设备协作功能。核心亮点包括新一代微内核架构、统一开发语言 ArkTS 和多模态交互支持。开发者可借助 DevEco Studio 4.0 快速上手，体验高效、灵活的开发过程。 239个字符
余生吟清歌
148 13
鸿蒙HarmonyOS应用开发 |鸿蒙技术分享HarmonyOS Next 深度解析：分布式能力与跨设备协作实战
余生吟清歌
|
2天前
|
自然语言处理 搜索推荐 数据安全/隐私保护
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0（Next）】
鸿蒙登录页面设计展示了 HarmonyOS 5.0（Next）的未来美学理念，结合科技与艺术，为用户带来视觉盛宴。该页面使用 ArkTS 开发，支持个性化定制和无缝智能设备连接。代码解析涵盖了声明式 UI、状态管理、事件处理及路由导航等关键概念，帮助开发者快速上手 HarmonyOS 应用开发。通过这段代码，开发者可以了解如何构建交互式界面并实现跨设备协同工作，推动智能生态的发展。
余生吟清歌
27 10
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0（Next）】
猫林老师
|
1天前
|
JavaScript Java 容器
鸿蒙应用开发从入门到入行 - 篇4:层叠布局、自定义组件、ForEach
导读：在本篇文章里，您将掌握层叠布局、自定义组件的用法，特别是自定义组件将来的开发中必然会用，其中应该特别关注自定义组件的一些规范与装饰器。
猫林老师
20 7
鸿蒙应用开发从入门到入行 - 篇4:层叠布局、自定义组件、ForEach
二流小码农
|
20小时前
鸿蒙开发：一个轻盈的上拉下拉刷新组件
在和可滑动组件使用的时候，记得一定要和nestedScroll属性配合使用，用于解决滑动冲突，除此之外，还需要传递滑动组件的scroller属性，用于手势操作。
二流小码农
12 2
鸿蒙开发：一个轻盈的上拉下拉刷新组件
余生吟清歌
|
2天前
|
人工智能 安全 数据安全/隐私保护
HarmonyOS应用开发实战：基于ArkTS的开箱即用登录页面实现【样式方式实现①】【HarmonyOS 5.0（Next）】
本文介绍了基于HarmonyOS 5.0（Next）和ArkTS实现的开箱即用登录页面。HarmonyOS 5.0是华为于2024年10月22日发布的第三代移动操作系统，具备原生智能、互联、安全及流畅特性。文章详细解析了使用ArkTS开发登录页面的代码，涵盖组件定义、界面布局、事件处理、样式设置及异步操作等内容，展示了清晰的组件结构、响应式设计与模块化编程的优势。通过这段代码，开发者可以快速上手并构建高效、美观的应用界面。
余生吟清歌
30 9

热门文章

最新文章

  • 1
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（一） 嵌入式Linux开发基本概念以及开发流程介绍
  • 2
    【鸿蒙软件开发】UIAbility组件概况、生命周期与启动模式
  • 3
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（四）传输文件
  • 4
    【鸿蒙软件开发】文本显示（Text/Span）
  • 5
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发流程（六）烧写整个系统或更新部分系统
  • 6
    scrcpy投屏工具的在harmonyOS开发上的使用
  • 7
    【HarmonyOS 4.0 应用开发实战】ArkTS 快速入门
  • 8
    【华为鸿蒙系统学习】- HarmonyOS4.0开发|自学篇
  • 9
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（七）Ubuntu开发环境配置
  • 10
    嵌入式linux/鸿蒙开发板(IMX6ULL）开发（三十一）驱动进化之路：设备树的引入及简明教程（中）
  • 1
    鸿蒙HarmonyOS 与 Android 的NDK有什么区别？
    411
  • 2
    润开鸿与蚂蚁数科达成战略合作，发布基于鸿蒙的mPaaS移动应用开发产品
    132
  • 3
    HarmonyOS应用开发者基础认证 模拟考试 题库
    573
  • 4
    日志服务 HarmonyOS NEXT 日志采集最佳实践
    117412
  • 5
    MediaBox音视频终端SDK已适配鸿蒙星河版（HarmonyOS NEXT）
    324
  • 6
    首个身份认证SDK适配鸿蒙系统！阿里云金融级实人认证产品再升级
    630
  • 7
    “纯血鸿蒙”要来了，赶紧入手学习吧
    401
  • 8
    HarmonyOS的功能及场景应用
    268
  • 9
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Scroll容器组件
    681
  • 10
    鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之RowSplit容器组件
    164

    • 相关课程

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

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS