乐趣区

关于harmonyos:33HarmonyOS鸿蒙开发组件TextField

jiezi

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

退出移动版