HarmonyOS 输入框TextField的使用

小灰灰 2022-09-02 03:59 174阅读 0赞

### TextField 是什么 ###

TextField是HarmonyOS 里面的输入框

### TextField 的属性 ###

TextField 继承Text 所以Text的属行也适用TextField ,需要记住的几种属性有

hint 提示文本

hint\_color 提示语字体的颜色

text\_size 字体的大小,即使提示语字体的大小也是输入文本字体的大小

TextField 自有的属性basement : 输入框基线

### 下面认识下这个basement ###

没有使用basement的情况

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70][]

使用basement的情况

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 1][]

颜色可以自己设置

### 使用背景色的情况 ###

当然有时候底部线并不是我们想要的,我们可以不使用basement,使用 background\_element

例如

实现的效果图如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 2][]

### TextField 获取输入框里面的文本 ###

TextField 获取输入框里面的文本可以使用getText

例如在文本框里面输入

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 3][]

java 代码获取输入框的内容

public class IntentAbilitySlice extends AbilitySlice {
        private static final HiLogLabel hilog = new HiLogLabel(HiLog.DEBUG ,0x0000, "Log");
        private TextField textField;
        private Button button;
    
        @Override
        protected void onStart(Intent intent) {
            super.onStart(intent);
            super.setUIContent(ResourceTable.Layout_intent_ability_slice_layout);
    
            textField = (TextField) findComponentById(ResourceTable.Id_text_field);
    
            button = (Button) findComponentById(ResourceTable.Id_button);
            button.setClickedListener(new Component.ClickedListener() {
                @Override
                public void onClick(Component component) {
                    HiLog.error(hilog,textField.getText());
                }
            });
    
    
    
    
    
        }
    }

打印结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 4][]

### TextField 显示输入的类型 ###

使用text\_input\_type ,当 text\_input\_type="pattern\_text"表示文本输入类型为普通文本模式

当 ohos:text\_input\_type="pattern\_number"表示文本输入类型为数字

当 ohos:text\_input\_type="pattern\_password"表示文本输入类型为密码

### TextField 设置光标是否随着输入文字显示 ###

当 ohos:text\_cursor\_visible="true"的时候光标随着输入的文本移动

当 ohos:text\_cursor\_visible="false"的时候光标隐藏.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70]: /images/20220829/7d4c15ba739e4b00a08faf896e5ef3e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 1]: /images/20220829/12656a9eb16a47c78e61bd2481e1c996.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 2]: /images/20220829/63e1a60a7cd3475c8f29bf52a54d9b70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 3]: /images/20220829/d2de09ff49834b7cbf977203cecce91d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 4]: /images/20220829/b26218c341744247a2bef00baace2787.png