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

一、支持的 XML 属性

• TextField 的共有 XML 属性继承自：Text。
• Text 的自有 XML 属性，请参考我之前的博客：HarmonyOS之深入分析常用组件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
	    ...
	    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>