鸿蒙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效果
设置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"/>