鸿蒙HarmonyOS APP开发入门3——组件（八 输入框组件 ）——TextField组件

文章目录

鸿蒙HarmonyOS APP开发入门3——组件（八 输入框组件 ）——TextField组件XML属性创建TextField设置TextField设置TextField的背景设置TextField的提示文字设置Bubble设置TextField的内边距设置TextField的多行显示设置TextField不可用状态响应焦点变化设置基线

实践运用实践1实践2

XML属性

TextField的共有XML属性继承自：Text

常见属性：

属性名称功能说明hint提示文字basement输入框基线的颜色element_cursor_bubble设置提示气泡element_selection_left_bubble设置选中之后左边的气泡element_selection_right_bubble设置选中之后右边的气泡text_input_type输入框中的输入类型（pattern_password密文展示）selection_color选中文字的颜色

创建TextField

在layout目录下的xml文件中创建一个TextField。

...

ohos:id="$+id:text_field"

ohos:height="40vp"

ohos:width="200vp"

ohos:top_margin="100vp"

ohos:left_margin="80vp"

ohos:left_padding="20vp"

/>

获取输入框的内容：

TextField textField = (TextField) findComponentById(ResourceTable.Id_text_field);

String content = textField.getText();

设置TextField

设置TextField的背景

layout目录下xml文件的代码示例如下：

...

ohos:background_element="$graphic:background_text_field"

/>

graphic目录下xml文件（例：background_text_field.xml）的代码示例如下：

ohos:shape="rectangle">

ohos:radius="40"/>

ohos:color="#2788d9"/>

设置TextField的提示文字

ohos:text_alignment="vertical_center"/>ne number or email" ohos:text_alignment="vertical_center"/>

创建后的TextField效果

设置Bubble

...

ohos:element_cursor_bubble="$graphic:ele_cursor_bubble" />

其中ele_cursor_bubble.xml

ohos:shape="rectangle">

ohos:radius="40"/>

ohos:color="#17a98e"/>

ohos:color="#17a98e"

ohos:width="10"/>

设置bubble的效果

设置TextField的内边距

...

ohos:left_padding="24vp"

ohos:right_padding="24vp"

ohos:top_padding="8vp"

ohos:bottom_padding="8vp"/>

设置TextField的多行显示

...

ohos:multiple_lines="true"/>

设置TextField不可用状态

通过TextField的Enable属性来控制文本框是否可用，当设置成false后，文本框输入功能不可用。

textField.setEnabled(false);

响应焦点变化

textField.setFocusChangedListener((component, isFocused) -> {

if (isFocused) {

// 获取到焦点

...

} else {

// 失去焦点

...

}

});

设置基线

...

ohos:basement="#ff0000" />

设置基线的效果

实践运用

实践1

当点击登录按钮，将会出现错误提示，同时将会改变TextField的状态。

演示TextField错误提示效果

ability_text_field.xml代码示例：

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:width="match_parent"

ohos:height="match_parent"

ohos:background_element="#FF000000"

ohos:orientation="vertical">

ohos:top_margin="60vp"

ohos:width="match_parent"

ohos:height="match_content"

ohos:layout_alignment="center">

ohos:id="$+id:name_textField"

ohos:width="600vp"

ohos:height="match_content"

ohos:multiple_lines="false"

ohos:left_padding="24vp"

ohos:right_padding="24vp"

ohos:top_padding="8vp"

ohos:bottom_padding="8vp"

ohos:min_height="44vp"

ohos:text_size="18fp"

ohos:layout_alignment="center"

ohos:text_alignment="vertical_center"

ohos:background_element="$graphic:background_text_field"

ohos:hint="Enter phone number or email" />

ohos:visibility="hide"

ohos:id="$+id:error_tip_text"

ohos:width="match_content"

ohos:height="match_content"

ohos:top_padding="8vp"

ohos:bottom_padding="8vp"

ohos:right_margin="20vp"

ohos:text="Incorrect account or password"

ohos:text_size="18fp"

ohos:text_color="red"

ohos:layout_alignment="right"/>

ohos:top_margin="40vp"

ohos:id="$+id:password_text_field"

ohos:width="600vp"

ohos:height="match_content"

ohos:multiple_lines="false"

ohos:left_padding="24vp"

ohos:right_padding="24vp"

ohos:top_padding="8vp"

ohos:bottom_padding="8vp"

ohos:min_height="44vp"

ohos:text_size="18fp"

ohos:layout_alignment="center"

ohos:text_alignment="vertical_center"

ohos:background_element="$graphic:background_text_field"

ohos:hint="Enter password" />

ohos:top_margin="40vp"

ohos:id="$+id:ensure_button"

ohos:width="120vp"

ohos:height="35vp"

ohos:background_element="$graphic:background_btn"

ohos:text="Log in"

ohos:text_size="20fp"

ohos:layout_alignment="horizontal_center"/>

background_text_field.xml代码示例：

ohos:shape="rectangle">

ohos:radius="40"/>

ohos:color="white"/>

ohos:color="black"

ohos:width="6"/>

background_btn.xml代码示例：

ohos:shape="rectangle">

ohos:radius="35"/>

ohos:color="white"/>

Java代码示例： // 当点击登录，改变相应组件的样式

Button button = (Button) findComponentById(ResourceTable.Id_ensure_button);

button.setClickedListener((component -> {

// 显示错误提示的Text

Text text = (Text) findComponentById(ResourceTable.Id_error_tip_text);

text.setVisibility(Component.VISIBLE);

// 显示TextField错误状态下的样式

ShapeElement errorElement = new ShapeElement(this, ResourceTable.Graphic_background_text_field_error);

TextField textField = (TextField) findComponentById(ResourceTable.Id_name_textField);

textField.setBackground(errorElement);

// TextField失去焦点

textField.clearFocus();

}));

其中background_text_field_error.xml代码示例：

ohos:shape="rectangle">

ohos:radius="40"/>

ohos:color="gray"/>

ohos:color="#E74C3C"

ohos:width="6"/>

实践2

获取文本输入框中的内容并进行吐司提示

xml文件

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent" ohos:width="match_parent"

ohos:background_element="#F2F2F2"

ohos:orientation="vertical" >

ohos:id="$+id:text"

ohos:height="50vp"

ohos:width="319vp"

ohos:background_element="#FFFFFF"

ohos:hint="请输入信息"

ohos:hint_color="#999999"

ohos:layout_alignment="horizontal_center"

ohos:text_alignment="center"

ohos:text_size="17fp"

ohos:top_margin="100vp"/>

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

Java代码

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();

//利用一个吐司将信息弹出

ToastDialog td = new ToastDialog(this);

//大小不用设置，默认就是包裹内容的

//自动关闭不用设置，默认到了时间之后就自动关闭

//持续时间可以不用设置，默认2秒 //设置吐司的背景。

td.setTransparent(true);

//位置（默认居中）

td.setAlignment(LayoutAlignment.BOTTOM);

//设置一个偏移

td.setOffset(0,200);

//设置吐司的内容

td.setText(message);

//让吐司出现

td.show();

}

}

喜欢本博文可以关注一下哦！！！！

推荐阅读

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了： 


大家都在找：

HarmonyOS：harmonyos字体下载

Java：java启动器下载

鸿蒙：鸿蒙智行

鸿蒙系统：鸿蒙系统刷机包下载

大家都在看：

harmonyos 移动开发 鸿蒙 鸿蒙开发 鸿蒙系统 程序员 OpenHarmony实例应用：【常用组件和容器低代码】

介绍本篇Codelab是基于ArkTS语言的低代码开发方式实现的一个简单实例。具体实现功能如下：创建一个低代码工程。通过拖拽的方式实现任务列表和任务信息界面的界面布局。在UI编辑界面实现数据动态渲染和...

华为 鸿蒙系统 鸿蒙 android HarmonyOS实战开发：@ohos.app.ability.wantAgent (WantAgent模块)

app.ability.WantAgent模块提供了创建WantAgent实例、获取实例的用户ID、获取want信息、比较WantAgent实例和获取bundle名称等能力。该模块将会取代@ohos....

harmonyos 华为 鸿蒙系统 鸿蒙4.0开发笔记之ArkTS语法基础的UI描述、基础组件的使用与如何查看组件是否有参数（八）

文章目录 一、声明式UI描述1、无/有参数组件2、如何查看组件是否有参数 二、Image组件的使用三、组件的属性设置四、补充1、使用组件的成员函数配置组件的事件方法2、配置子组件3、多组件嵌套...

harmonyos 人工智能 鸿蒙系统 OpenHarmony 鸿蒙next 鸿蒙开发实战-手写文心一言AI对话APP

运行环境（后面附有API9版本，可修改后在HarmonyOS4设备上运行）在DAYU200:4.0.10.16上运行一、创建应用1.点击File->new File->Create Progect2....

harmonyos Open Harmony 鸿蒙系统 鸿蒙应用开发 鸿蒙开发 鸿蒙项目结构说明 鸿蒙APP开发 鸿蒙APP应用开发教程—超详细的项目结构说明

1. 新建项目打开DevEco Studio, 选择 Create Project:1.1 选择模版1.2 配置项目如果使用的是 DevEco 3.X 版本, 可以根据 Compile SDK版本选择...

harmonyos 华为 鸿蒙系统 鸿蒙 microsoft 鸿蒙开发 OpenHarmony—UIAbility组件间交互（设备内）

UIAbility是系统调度的最小单元。在设备内的功能模块之间跳转时，会涉及到启动特定的UIAbility，该UIAbility可以是应用内的其他UIAbility，也可以是其他应用的UIAbilit...

OpenHarmony 移动开发 鸿蒙开发 鸿蒙系统 鸿蒙 程序员 HarmonyOS开发案例：【生活健康app之获取成就】（3）

获取成就本节将介绍成就页面。功能概述成就页面展示用户可以获取的所有勋章，当用户满足一定的条件时，将点亮本页面对应的勋章，没有得到的成就勋章处于熄灭状态。共有六种勋章，当用户连续完成任务打卡3天、7天、...

harmonyos 开发语言 华为 鸿蒙 鸿蒙系统 OpenHarmony—UIAbility组件生命周期

概述当用户打开、切换和返回到对应应用时，应用中的UIAbility实例会在其生命周期的不同状态之间转换。UIAbility类提供了一系列回调，通过这些回调可以知道当前UIAbility实例的某个状态发...

华为 鸿蒙 鸿蒙系统 android HarmonyOS实战开发：Tabs（组件导航）

当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取...

华为 13.鸿蒙HarmonyOS App(JAVA)文本框组件按钮点击提示

13.鸿蒙HarmonyOS App(JAVA)文本框按钮点击提示 点击按钮触发组件状态，点击改变颜色 文本框组件，文本居中，斜体，左右对齐，点击显示提示信息 .set...

华为 鸿蒙系统 鸿蒙 OpenHarmony 鸿蒙应用开发 鸿蒙开发 HarmonyOS—低代码开发中使用业务组件

开发者在DevEco Studio低代码可以通过拖拽组件栏提供的业务组件，快速开发包含华为帐号登录、华为支付场景的应用。低代码的登录、支付业务组件都是通过集成AGC提供的SDK实现，低代码简化了手动集...

harmonyos 华为 鸿蒙应用开发 鸿蒙开发 鸿蒙 鸿蒙系统 OpenHarmony实战开发-Web组件开发性能提升指导。

简介开发者实现在应用中跳转显示网页需要分为两个方面：使用@ohos.web.webview提供Web控制能力；使用Web组件提供网页显示的能力。在实际应用中往往由于各种原因导致首次跳转Web网页或We...

华为 鸿蒙系统 鸿蒙 OpenHarmony 鸿蒙应用开发 鸿蒙工程师 HarmonyOS—低代码开发中使用自定义组件

开发者在使用DevEco Studio的低代码功能进行可视化开发时，可以通过自定义组件功能自由封装业务逻辑类组件，实现能力复用，降低开发及维护成本。NOTE 该功能在DevEco Studio 3.1...

harmonyos 华为 鸿蒙系统 鸿蒙4.0开发笔记之ArkTS语法基础之应用生命周期与页面中组件的生命周期（十六）

文章目录一、应用生命周期二、生命周期函数定义三、生命周期五函数练习一、应用生命周期1、定义 应用生命周期就是代表了一个HarmonyOS应用中所有页面从创建、开启到销毁等过程的全生命周期。查看路径如下...

华为 鸿蒙系统 【HarmonyOS NEXT】鸿蒙App开发抓包指导-以Charles工具为例

本文档针对鸿蒙单框架设备开发调测时的抓包方案进行整体介绍（与鸿蒙设备强相关的步骤会做详细陈述），以Charles抓包工具为例，具体抓包步骤如下： 手机镜像要求：2.0.0.66(SP60DEVC00E...