【HarmonyOS鸿蒙开发】组件TextField详解教程

最新推荐文章于 2025-04-21 08:56:13 发布

原创

最新推荐文章于 2025-04-21 08:56:13 发布 · 967 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #鸿蒙 #鸿蒙系统 #安卓 #前端

一、支持的XML属性

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

TextField的自有XML属性见下表：

属性名称中文描述取值取值说明使用案例
basement 输入框基线 Element类型可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。 ohos:basement="#000000"
ohos:basement="media:media_src"
ohos:basement="$graphic:graphic_src"

二、创建TextField

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

<!--
    TextField：用于接收用户输入的文本信息
-->
<TextField
        ohos:id="$+id:textField1"
        ohos:height="40vp"
        ohos:width="200vp"
        />

获取输入框的内容：

String content = textField.getText();

三、设置TextField

●1、在xml中设置TextField的背景。
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="#EEEEEE"/>
</shape>
ohos:radius="40"，圆角

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

<TextField
        ...
        ohos:background_element="$graphic:background_text_field"
        ohos:layout_alignment="center"
        ohos:top_margin="20vp"
        />

效果：
在这里插入图片描述

2、设置提示文字

<!--
    TextField：用于接收用户输入的文本信息
    ohos:hint="请输入您的名字"，	暗示，提示，用于提示用户改输入框中内容，当用户聚焦要输入，提示会自动消失
-->
<TextField
        ...
        ohos:hint="请输入您的名字"
        ohos:text_alignment="center"
        ohos:text_size="18fp"
        />

效果
在这里插入图片描述

3、设置Bubble
graphic目录下xml文件，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="#6699FF"/>
    <stroke
        ohos:color="#0066FF"
        ohos:width="10"/>
</shape>
layout目录下xml文件的代码示例如下：

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

        />

效果：
在这里插入图片描述