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