前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【鸿蒙 HarmonyOS】UI 组件 ( 文本输入框 TextField 组件 )

【鸿蒙 HarmonyOS】UI 组件 ( 文本输入框 TextField 组件 )

作者头像
韩曙亮
发布2023-03-28 20:24:29
8250
发布2023-03-28 20:24:29
举报

文章目录

一、布局中设置 TextField 组件


TextField 组件是文本输入框 , 允许用户在界面中输入指定的文字信息 ;

布局文件中配置 TextField 组件 :

代码语言:javascript
复制
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <!-- 输入框组件 -->
    <TextField
        ohos:id="$+id:textfield"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:layout_alignment="horizontal_center"
        ohos:text="Hello World"
        ohos:text_size="50"
        ohos:text_input_type="pattern_number"
    />

</DirectionalLayout>

其中 ohos:text_input_type=“pattern_number” 是配置输入的类型 , 这里是输入数字 ;

显示效果 : 刚进入界面时效果与 Text 组件相同 , 但是点击后 , 会显示光标 , 并弹出输入键盘 ;

刚进入界面时 :

在这里插入图片描述
在这里插入图片描述

点击后效果 : 弹出软键盘 ;

在这里插入图片描述
在这里插入图片描述

二、代码中获取并设置 TextField 组件


简单展示一下获取组件 , 并设置其显示文本 ;

代码语言:javascript
复制
package com.example.textfield.slice;

import com.example.textfield.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.TextField;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        // 获取布局文件中的 TextField 组件
        TextField textField = (TextField) findComponentById(ResourceTable.Id_textfield);

        // 设置默认显示的内容
        textField.setText("请输入手机号 : ");
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

运行效果 :

在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-12-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • 一、布局中设置 TextField 组件
  • 二、代码中获取并设置 TextField 组件
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档