HarmonyOS之深入分析常用组件TextField的功能和使用

Posted Forever_wj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HarmonyOS之深入分析常用组件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
	    ...
	    ohos:id="$+id:text_field"
	    ohos:height="40vp"
	    ohos:width="200vp"
	    ohos:left_padding="20vp"
	 />
  • 获取输入框的内容:
	TextField textField = (TextField) findComponentById(ResourceTable.Id_text_field);
	String content = textField.getText();

三、设置 TextField

  • 在 xml 中设置 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="#FFFFFF"/>
	</shape>
  • 设置提示文字:
	<TextField
	    ...
	    ohos:hint="Enter phone number or email"
	    ohos:text_alignment="vertical_center"/>
  • 创建的 TextField 效果如下:

在这里插入图片描述

  • 设置 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="#6699FF"/>
	    <stroke
	        ohos:color="#0066FF"
	        ohos:width="10"/>
	</shape>
    • 设置 bubble 的效果:

在这里插入图片描述

    • 设置 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="#000099" />
    • 设置基线的效果:

在这里插入图片描述

四、场景示例

  • 当点击登录按钮,将会出现错误提示,同时将会改变 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_text_field);
	    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>

以上是关于HarmonyOS之深入分析常用组件TextField的功能和使用的主要内容,如果未能解决你的问题,请参考以下文章

HarmonyOS之深入分析常用组件Button的功能和使用

HarmonyOS之深入解析自定义组件与布局的实现

HarmonyOS之常用组件RoundProgressBar的功能和使用

HarmonyOS之常用组件ScrollView的功能和使用

HarmonyOS之常用组件ListContainer的功能和使用

HarmonyOS之常用组件ProgressBar的功能和使用