0
点赞
收藏
分享

微信扫一扫

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

孟祥忠诗歌 2022-04-14 阅读 30
harmonyosjava鸿蒙鸿蒙系统

鸿蒙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"
 />

获取输入框的内容：

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

设置TextField

设置TextField的背景

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

<TextField
    ...
    ohos:background_element="$graphic:background_text_field"
 />

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>

设置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"/>

创建后的TextField效果
img

设置Bubble

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

其中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>

设置bubble的效果

img

设置TextField的内边距

<TextField
    ...
    ohos:left_padding="24vp"
    ohos:right_padding="24vp"
    ohos:top_padding="8vp"
    ohos:bottom_padding="8vp"/>

设置TextField的多行显示

<TextField
    ...
    ohos:multiple_lines="true"/>

设置TextField不可用状态

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

textField.setEnabled(false);

响应焦点变化

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

设置基线

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

设置基线的效果

img

实践运用

实践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>

    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>

    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>

  • 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();
}));

    其中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>

实践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>

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(); 
    } 
}

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

举报

相关推荐

HarmonyOS APP开发入门3——组件（三 Image组件）

鸿蒙harmonyosjava鸿蒙系统intellij-idea

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之TextInput输入框组件

vscodejupyteride

uni-app 数字输入框组件封装

前端框架uni-appVue.js前端开发yyds干货盘点

HarmonyOS APP开发入门3——组件（六 时间组件 ）---Clock，TickTimer，TimePicker

harmonyos鸿蒙java鸿蒙系统intellij-idea

【UI界面开发】基本组件——输入框

uiunity

【EasyUI篇】Datebox日期输入框组件

EasyUIDateBoxcssjavascripthtml虚拟化云计算

APICloud AVM框架 密码输入框组件

javascriptvuecssAndroid移动开发

【EasyUI篇】NumberBox数值输入框组件

EasyUINumberBoxcssjavascript输入框系统/运维

输入框bootstrap标签生成组件

bootstrapjavascripthtml

鸿蒙(HarmonyOS)应用开发——基础组件

c++算法开发语言
0 条评论