Monodyee

这个屌丝很懒，什么也没留下！

热门标签

鸿蒙HarmonyOS APP开发入门3——组件（八输入框组件）——TextField组件_鸿蒙 requestpinappwidget

作者：Monodyee | 2024-03-16 07:02:51

踩

鸿蒙 requestpinappwidget

鸿蒙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"
 />
1
2
3
4
5
6
7
8
9

获取输入框的内容：

TextField textField = (TextField) findComponentById(ResourceTable.Id_text_field);
String content = textField.getText();
1
2

设置TextField

设置TextField的背景

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

<TextField
    ...
    ohos:background_element="$graphic:background_text_field"
 />
1
2
3
4

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>
1
2
3
4
5
6
7
8

设置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"/>
1
2
3
4

创建后的TextField效果

设置Bubble

<TextField
    ...
    ohos:element_cursor_bubble="$graphic:ele_cursor_bubble" />
1
2
3

其中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"/>
</shape>
1
2
3
4
5
6
7
8
9
10
11

设置bubble的效果

设置TextField的内边距

<TextField
    ...
    ohos:left_padding="24vp"
    ohos:right_padding="24vp"
    ohos:top_padding="8vp"
    ohos:bottom_padding="8vp"/>
1
2
3
4
5
6

设置TextField的多行显示

<TextField
    ...
    ohos:multiple_lines="true"/>
1
2
3

设置TextField不可用状态

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

textField.setEnabled(false);
1

响应焦点变化

textField.setFocusChangedListener((component, isFocused) -> {
    
    if (isFocused) { 
        // 获取到焦点
        ...
    } else { 
        // 失去焦点
        ...
    }
});
1
2
3
4
5
6
7
8
9
10

设置基线

<TextField
    ...
    ohos:basement="#ff0000" />
1
2
3

设置基线的效果

实践运用

实践1

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

演示TextField错误提示效果
点击放大

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="600vp"
            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_field"
            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="600vp"
        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_field"
        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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

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="white"/>
    <stroke
        ohos:color="black"
        ohos:width="6"/>
</shape>
1
2
3
4
5
6
7
8
9
10
11

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>
1
2
3
4
5
6
7
8

Java代码示例：

// 当点击登录，改变相应组件的样式
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15

其中background_text_field_error.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="gray"/>
    <stroke
        ohos:color="#E74C3C"
        ohos:width="6"/>
</shape>
1
2
3
4
5
6
7
8
9
10
11

实践2

获取文本输入框中的内容并进行吐司提示

xml文件

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
                   xmlns:ohos="http://schemas.huawei.com/res/ohos" 
                   ohos:height="match_parent" ohos:width="match_parent"
                   ohos:background_element="#F2F2F2" 
                   ohos:orientation="vertical" >
    <TextField 
               ohos:id="$+id:text"
               ohos:height="50vp" 
               ohos:width="319vp"
               ohos:background_element="#FFFFFF" 
               ohos:hint="请输入信息" 
               ohos:hint_color="#999999" 
               ohos:layout_alignment="horizontal_center" 
               ohos:text_alignment="center" 
               ohos:text_size="17fp" 
               ohos:top_margin="100vp"/>
    <Button 
            ohos:id="$+id:but" 
            ohos:height="47vp" 
            ohos:width="319vp" 
            ohos:background_element="#21a8FD" 
            ohos:layout_alignment="center" 
            ohos:text="获取信息" 
            ohos:text_alignment="center" 
            ohos:text_color="#FEFEFE" 
            ohos:text_size="24vp" 
            ohos:top_margin="77vp"/> 
</DirectionalLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

Java代码

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { 
    
    TextField tf; Button but; @Override
	public void onStart(Intent intent) { 
        super.onStart(intent); 
        super.setUIContent(ResourceTable.Layout_ability_main); 
        //1.找到文本输入框组件对象 
        tf = (TextField) findComponentById(ResourceTable.Id_text); 
        //找到按钮组件对象
	    but = (Button) findComponentById(ResourceTable.Id_but); 
        //2.给按钮绑定一个点击事件 //当点击了按钮之后，就要获取文本输入框中的内容
		but.setClickedListener(this); 
    }
    @Override
	public void onActive() { 
        super.onActive(); 
    }
    @Override
	public void onForeground(Intent intent) { 
        super.onForeground(intent); 
    }
    @Override
	public void onClick(Component component) { 
        //当点击了按钮之后，获取文本输入框中的内容 
        String message = tf.getText(); 
        //利用一个吐司将信息弹出 
        ToastDialog td = new ToastDialog(this); 
        //大小不用设置，默认就是包裹内容的 
        //自动关闭不用设置，默认到了时间之后就自动关闭 
        //持续时间可以不用设置，默认2秒 //设置吐司的背景。 
        td.setTransparent(true); 
        //位置（默认居中） 
        td.setAlignment(LayoutAlignment.BOTTOM);
        //设置一个偏移 
        td.setOffset(0,200);
        //设置吐司的内容 
        td.setText(message); 
        //让吐司出现 
        td.show(); 
    } 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

喜欢本博文可以关注一下哦！！！！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/247831

鸿蒙HarmonyOS APP开发入门3——组件（八 输入框组件 ）——TextField组件_鸿蒙 requestpinappwidget

鸿蒙HarmonyOS APP开发入门3——组件（八 输入框组件 ）——TextField组件