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

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

文章目录

一、布局中设置 TextField 组件

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





一、布局中设置 TextField 组件


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


布局文件中配置 TextField 组件 :


<?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 组件相同 , 但是点击后 , 会显示光标 , 并弹出输入键盘 ;


刚进入界面时 :

image.png



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


image.png






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


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


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



运行效果 :


image.png

目录
相关文章
|
11天前
「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
本篇将带你实现一个多滑块联动的控制器应用。用户可以通过拖动多个滑块,动态控制不同参数(如红绿蓝三色值),并实时显示最终结果。我们将以动态颜色调节为例,展示如何结合状态管理和交互逻辑,打造一个高级的滑块控制器应用。
145 78
「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
|
12天前
|
UED
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
本篇将带你实现一个简单的照片墙布局应用,通过展示多张图片组成照片墙效果,用户可以点击图片查看其状态变化。
118 67
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
|
2天前
|
存储 索引
「Mac畅玩鸿蒙与硬件44」UI互动应用篇21 - 随机励志语录生成器
本篇将带你实现一个随机励志语录生成器应用。用户点击按钮后,界面会随机显示一条预设的励志语录。该应用展示了如何结合数组操作、状态管理和动态更新界面内容的功能,是一个轻量级的互动应用示例。
53 21
「Mac畅玩鸿蒙与硬件44」UI互动应用篇21 - 随机励志语录生成器
|
17天前
|
存储 UED
「Mac畅玩鸿蒙与硬件37」UI互动应用篇14 - 随机颜色变化器
本篇将带你实现一个随机颜色变化器应用。用户点击“随机颜色”按钮后,界面背景会随机变化为淡色系颜色,同时显示当前的颜色代码,页面还会展示一只猫咪图片作为装饰,提升趣味性。
74 36
「Mac畅玩鸿蒙与硬件37」UI互动应用篇14 - 随机颜色变化器
|
14天前
「Mac畅玩鸿蒙与硬件38」UI互动应用篇15 - 猜数字增强版
本篇将带你实现一个升级版的数字猜谜游戏。相比基础版,新增了计分和历史记录功能,用户可以在每次猜测后查看自己的得分和猜测历史。此功能展示了状态管理的进阶用法以及如何保存和显示历史数据。
71 31
「Mac畅玩鸿蒙与硬件38」UI互动应用篇15 - 猜数字增强版
|
9天前
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
本篇将带你实现一个带有闪烁动画的按钮交互效果。通过动态改变按钮颜色,用户可以在视觉上感受到按钮的闪烁效果,提升界面互动体验。
60 19
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
|
10天前
「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用
本篇将带你实现一个数字键盘应用,支持用户通过点击数字键输入数字并实时更新显示内容。我们将展示如何使用按钮组件和状态管理来实现一个简洁且实用的数字键盘。
52 17
「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用
|
17天前
|
UED 开发者
「Mac畅玩鸿蒙与硬件36」UI互动应用篇13 - 数字滚动抽奖器
本篇将带你实现一个简单的数字滚动抽奖器。用户点击按钮后,屏幕上的数字会以滚动动画的形式随机变动,最终显示一个抽奖数字。这个项目展示了如何结合定时器、状态管理和动画实现一个有趣的互动应用。
70 23
「Mac畅玩鸿蒙与硬件36」UI互动应用篇13 - 数字滚动抽奖器
|
13天前
|
前端开发 UED
「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
本篇将带你实现一个倒计时环形进度条应用。用户可以设置倒计时的时间,启动倒计时后,应用会动态显示一个随着时间递减的环形进度条,同时伴有数字倒计时显示。这是结合动画效果和时间管理的实用示例。
97 10
「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
|
15天前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。