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

本文详细介绍了鸿蒙HarmonyOS应用开发中TextField组件的使用，包括XML属性、创建、设置背景、提示文字、Bubble、内边距、多行显示、不可用状态、焦点变化响应及基线设置。通过两个实践案例展示了错误提示和获取输入内容并展示的方法，帮助开发者更好地理解和应用TextField。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

文章目录

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

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。

<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文件的代码示例如下：

<TextField
    ...
    ohos:background_element="$graphic:background_text_field"
 />

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

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="40"/>
    <solid
        ohos:color="#2788d9"/>
</shape><?xml version="1.0" encoding="UTF-8" ?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"       ohos:shape="rectangle">    <corners        ohos:radius="40"/>    <solid        ohos:color="#2788d9"/></shape>

设置TextField的提示文字

<TextField    ...    ohos:hint="Enter pho<TextField
    ...
    ohos:hint="Enter phone number or email"
    ohos:text_alignment="vertical_center"/>ne number or email"    ohos:text_alignment="vertical_center"/>

创建后的TextField效果

设置Bubble

<TextField
    ...
    ohos:element_cursor_bubble="$graphic:ele_cursor_bubble" />

其中ele_cursor_bubble.xml

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="40"/>
    <solid
        ohos:color="#17a98e"/>
    <stroke
        ohos:color="#17a98e"
        ohos:width="10"/>