3.3【HarmonyOS鸿蒙开发】组件TextField
作者：韩茹
公司：程序咖（北京）科技有限公司
鸿蒙巴士专栏作家
TextField提供了一种文本输入框。
一、反对的XML属性
TextField的共有XML属性继承自：Text
TextField的自有XML属性见下表：
| 属性名称 | 中文形容 | 取值 | 取值阐明 | 应用案例 |
|---|---|---|---|---|
| basement | 输入框基线 | Element类型 | 可间接配置色值，也可援用color资源或援用media/graphic下的图片资源。 | ohos:basement="#000000" ohos:basement=" $color:black"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" />成果：
<img src="https://img.chengxuka.com/WX20210608-103809@2x.png/mark" alt="WX20210608-103809@2x" style="zoom:50%;" />
- 2、设置提醒文字
<!-- TextField：用于接管用户输出的文本信息 ohos:hint="请输入您的名字"， 暗示，提醒，用于提醒用户改输入框中内容，当用户聚焦要输出，提醒会主动隐没--><TextField ... ohos:hint="请输入您的名字" ohos:text_alignment="center" ohos:text_size="18fp" />成果
<img src="https://img.chengxuka.com/textfieldyunxing1.gif" alt="2021-06-08 10.46.15" style="zoom:50%;" />
- 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" />成果：
<img src="https://img.chengxuka.com/textfieldyunxing2.gif" alt="textfieldyunxing2" style="zoom:50%;" />
- 4、设置TextField的内边距
为了成果更加显著，咱们从新搁置一个TextField，这里留神和下面的TextField的width和height属性值的区别：
<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_size="18fp" ohos:left_padding="36vp" ohos:right_padding="36vp" ohos:top_padding="6vp" ohos:bottom_padding="6vp" />成果如下：
<img src="https://img.chengxuka.com/WX20210608-110803@2x.png/mark" alt="WX20210608-110803@2x" style="zoom:50%;" />
- 5、设置输出的文本类型
如果咱们设置了明码框，那么心愿输出的内容是暗文的，那么就要设置text_input_type属性。
<TextField ... ohos:text_input_type="pattern_number" />如果设置为数字框，就会弹出数字键盘：
<img src="https://img.chengxuka.com/WX20210609-145940@2x.png/mark" alt="WX20210609-145940@2x" style="zoom:50%;" />
如果将属性值设置为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" />明码框成果如下：
<img src="https://img.chengxuka.com/WX20210609-150433@2x.png/mark" alt="WX20210609-150433@2x" style="zoom:50%;" />
- 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" />成果：
<img src="https://img.chengxuka.com/textfieldyunxing3.gif" alt="textfieldyunxing3" style="zoom:50%;" />
- 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" />成果：一条红色基线
<img src="https://img.chengxuka.com/WX20210608-112121@2x.png/mark" alt="WX20210608-112121@2x" style="zoom:50%;" />
- 8、设置TextField不可用状态
通过TextField的Enable属性来管制文本框是否可用，当设置成false后，文本框不再能被输出。
<TextField ... ohos:enabled="false" />也能够通过java代码来设置。
TextField textField = (TextField) findComponentById(ResourceTable.Id_text_field);textField.setEnabled(false);- 9、响应焦点变动
textField.setFocusChangedListener((component, isFocused) -> { if (isFocused) { // 获取到焦点 ... } else { // 失去焦点 ... }});四、写个例子
当点击登录按钮，将会呈现谬误提醒，同时将会扭转TextField的状态。
如图：
<img src="https://img.chengxuka.com/textfieldyunxing4.gif" alt="textfieldyunxing4" style="zoom:50%;" />
1、首先在layout目录下，新建一个布局文件：ability_text_field.xml
<?xml version="1.0" encoding="utf-8"?><DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/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="http://schemas.huawei.com/res/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="http://schemas.huawei.com/res/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(); }));更多内容：
1、社区：鸿蒙巴士https://www.harmonybus.net/
2、公众号：HarmonyBus
3、技术交换QQ群：714518656
4、视频课：https://www.chengxuka.com