作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

TextField提供了一种文本输入框。

一、支持的XML属性

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

TextField的自有XML属性见下表：

属性名称

中文描述

取值

取值说明

使用案例

basement

输入框基线

Element类型

可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。

ohos:basement="#000000"<br />ohos:basement="$color:black"<br />ohos:basement="$media:media_src"<br />ohos:basement="$graphic:graphic_src"

二、创建TextField

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

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

获取输入框的内容：

String content = textField.getText();

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

<?xml version="1.0" encoding="UTF-8" ?>br<shape xmlns:ohos=";br       ohos:shape="rectangle">br    <cornersbr        ohos:radius="40"/>br    <solidbr        ohos:color="#EEEEEE"/>br</shape>

ohos:radius="40"，圆角

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

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

效果：

2、设置提示文字

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

效果

3、设置Bubble

graphic目录下xml文件，ele_cursor_bubble.xml：

<?xml version="1.0" encoding="UTF-8" ?>br<shape xmlns:ohos=";br       ohos:shape="rectangle">br    <cornersbr        ohos:radius="40"/>br    <solidbr        ohos:color="#6699FF"/>br    <strokebr        ohos:color="#0066FF"br        ohos:width="10"/>br</shape>

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

<TextFieldbr        ...br        ohos:element_cursor_bubble="$graphic:ele_cursor_bubble"brbr        />

效果：

4、设置TextField的内边距

为了效果更佳明显，我们重新放置一个TextField，这里注意和上面的TextField的width和height属性值的区别：

<TextFieldbr        ohos:height="match_content"br        ohos:width="match_content"br        ohos:background_element="$graphic:background_text_field"br        ohos:hint="请输入你的密码"br        ohos:layout_alignment="horizontal_center"br        ohos:top_margin="20vp"br        ohos:text_size="18fp"br        ohos:left_padding="36vp"br        ohos:right_padding="36vp"br        ohos:top_padding="6vp"br        ohos:bottom_padding="6vp"br        />

效果如下：

5、设置输入的文本类型

如果我们设置了密码框，那么希望输入的内容是暗文的，那么就要设置text_input_type属性。

<TextField        ...        ohos:text_input_type="pattern_number"        />

如果设置为数字框，就会弹出数字键盘：

如果将属性值设置为pattern_password，就可以输入密码了。

<!--    ohos:text_input_type，可以设置输入的类型            "pattern_password"，密码框            "pattern_number"，数字框-->    <TextField        ohos:height="match_content"        ohos:width="match_content"        ohos:background_element="$graphic:background_text_field"        ohos:hint="请输入你的密码"        ohos:layout_alignment="horizontal_center"        ohos:top_margin="20vp"        ohos:text_input_type="pattern_password"        ohos:text_size="18fp"        ohos:left_padding="36vp"        ohos:right_padding="36vp"        ohos:top_padding="6vp"        ohos:bottom_padding="6vp"        />

密码框效果如下：

6、设置TextField的多行显示

<TextField        ohos:height="100vp"        ohos:width="200vp"        ohos:background_element="$graphic:background_text_field"        ohos:element_cursor_bubble="$graphic:ele_cursor_bubble"        ohos:hint="请输入你想说的话："        ohos:layout_alignment="horizontal_center"        ohos:top_margin="20vp"        ohos:text_size="18fp"        ohos:padding="14vp"        ohos:multiple_lines="true"        />

效果：

7、设置基线

<TextField        ohos:height="60vp"        ohos:width="200vp"        ohos:background_element="$graphic:background_text_field"        ohos:element_cursor_bubble="$graphic:ele_cursor_bubble"        ohos:hint="设置基线"        ohos:layout_alignment="horizontal_center"        ohos:top_margin="20vp"        ohos:text_size="18fp"        ohos:padding="14vp"        ohos:basement="#FF0000"        />

效果：一条红色基线

8、设置TextField不可用状态

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

<TextField        ...        ohos:enabled="false"        />

也可以通过java代码来设置。

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

textField.setFocusChangedListener((component, isFocused) -> {        if (isFocused) {         // 获取到焦点        ...    } else {         // 失去焦点        ...    }});

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

如图：

1、首先在layout目录下，新建一个布局文件：ability_text_field.xml

<?xml version="1.0" encoding="utf-8"?><DirectionalLayout    xmlns:ohos=";    ohos:width="match_parent"    ohos:height="match_parent"    ohos:background_element="#FF000000"    ohos:orientation="vertical">    <StackLayout        ohos:top_margin="60vp"        ohos:width="match_parent"        ohos:height="match_content"        ohos:layout_alignment="center">        <TextField            ohos:id="$+id:name_textField"            ohos:width="match_parent"            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_field2"            ohos:hint="Enter phone number or email" />        <Text            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"/>    </StackLayout>    <TextField        ohos:top_margin="40vp"        ohos:id="$+id:password_text_field"        ohos:width="match_parent"        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_field2"        ohos:hint="Enter password" />    <Button        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"/></DirectionalLayout>

然后我们在graphic目录下创建所需要的xml文件，

background_text_field2.xml代码示例：

<?xml version="1.0" encoding="UTF-8" ?><shape xmlns:ohos=";       ohos:shape="rectangle">    <corners        ohos:radius="40"/>    <solid        ohos:color="white"/>    <stroke        ohos:color="black"        ohos:width="6"/></shape>

background_btn.xml代码示例：

<?xml version="1.0" encoding="UTF-8" ?><shape xmlns:ohos=";       ohos:shape="rectangle">    <corners        ohos:radius="35"/>    <solid        ohos:color="white"/></shape>

2、Java中的代码

首先我们修改MainAbilitySlice中onStart()方法里，要加载显示的布局文件：

				//要加载显示的布局文件        super.setUIContent(ResourceTable.Layout_ability_text_field);

然后获取按钮，为它设置点击事件的监听，响应处理的逻辑为，将布局文件中隐藏的一个错误提示信息Text显示出来，并更改TextField的背景样式：

 // 当点击登录，改变相应组件的样式        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();        }));