3.3HarmonyOS鸿蒙开发组件TextField

Posted 茹茹

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3.3HarmonyOS鸿蒙开发组件TextField相关的知识，希望对你有一定的参考价值。

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:
        ohos:
        />

获取输入框的内容：

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" 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" 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:/>
</shape>

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

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

        />

效果：

<img src="https://img.chengxuka.com/textfieldyunxing2.gif" style="zoom:50%;" />

  • 4、设置TextField的内边距

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

<TextField
        ohos:
        ohos:
        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" 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" style="zoom:50%;" />

​

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

<!--    ohos:text_input_type，可以设置输入的类型
            "pattern_password"，密码框
            "pattern_number"，数字框
-->
    <TextField
        ohos:
        ohos:
        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" style="zoom:50%;" />

  • 6、设置TextField的多行显示
<TextField
        ohos:
        ohos:
        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" style="zoom:50%;" />

  • 7、设置基线
<TextField
        ohos:
        ohos:
        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" 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" 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:
    ohos:
    ohos:background_element="#FF000000"
    ohos:orientation="vertical">

    <StackLayout
        ohos:top_margin="60vp"
        ohos:
        ohos:
        ohos:layout_alignment="center">
        <TextField
            ohos:id="$+id:name_textField"
            ohos:
            ohos:
            ohos:multiple_lines="false"
            ohos:left_padding="24vp"
            ohos:right_padding="24vp"
            ohos:top_padding="8vp"
            ohos:bottom_padding="8vp"
            ohos:min_
            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:
            ohos:
            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:
        ohos:
        ohos:multiple_lines="false"
        ohos:left_padding="24vp"
        ohos:right_padding="24vp"
        ohos:top_padding="8vp"
        ohos:bottom_padding="8vp"
        ohos:min_
        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:
        ohos:
        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:/>
</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

以上是关于3.3HarmonyOS鸿蒙开发组件TextField的主要内容，如果未能解决你的问题，请参考以下文章

3.7HarmonyOS鸿蒙开发组件Switch

3.9HarmonyOS鸿蒙开发组件Picker

4.1HarmonyOS鸿蒙开发组件ScrollView

4.4HarmonyOS鸿蒙开发组件ListContainer(下)性能优化

Java之父詹姆斯·高斯林 （James Gosling）学鸿蒙（HarmonyOS），HarmonyOS（鸿蒙）——Image组件详述

HarmonyOS（鸿蒙）——Text（文本）组件介绍