HarmonyOS 输入框TextField的使用-蒲公英云

HarmonyOS 输入框TextField的使用

小灰灰 2022-09-02 03:59 239阅读 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

例如

<TextField
        ohos:id="$+id:text_field"
        ohos:height="match_content"
        ohos:width="300vp"
        ohos:hint="请输入内容"
        ohos:text_size="22fp"
        ohos:padding="10vp"
        ohos:background_element="$graphic:background_ability_main"
        ohos:top_margin="50vp"/>

实现的效果图如下

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