HarmonyOS实战——TextField文本输入框组件基本使用

【鸿蒙专栏，从入门到实战系列】：

https://blog.csdn.net/qq_41684621/category_10128500.html

1. TextField组件基本用法

2. TextField案例——获取文本输入框中的内容并进行Toast提示

3. TextField组件高级用法

3.1 密码的密文展示

3.2 基线的设置

3.3 气泡的设置

4. TextField案例——长按查看密码明文

5. TextField案例——搭建登录界面

组件说明：

是<code>Text</code>的子类，用来进行用户输入数据的

常见属性：

通过<code>TextField</code>获取文本输入框中的内容并进行<code>Toast</code>提示

新建项目：<code>TextFieldApplication</code>

ability_main

因为要在 <code>onClick</code> 方法中用到 <code>TextField</code> 和 <code>Button</code> 这两个组件，所以要把这两个组件移到成员位置，使其成为成员变量后，<code>onClick</code> 方法才能访问的到

MainAbilitySlice

运行：

当输入密码的时候会变成密文展示

<code>ohos:text_input_type="pattern_password"</code>：表示输入的密码以密文的方式显示

基本使用：

有的时候文本输入框并不是一个框，而是下面有一条横线，这条线华为官方叫做基线

把文本输入框使用横线表示，在上面加上一条基线，把输入框的背景颜色去掉

如果以后看到一条基线，然后在输入一些数字信息，这还是 <code>TextField</code> 文本输入框组件，只不过是背景色没有设置，让它跟布局的颜色一致了，看不到背景而已

当用鼠标长按选中输入的内容后，就会选中内容，前面的光标和后面的光标，以及中间选中的内容颜色会改变，华为官方给前、后的光标，以及没有选中内容状态下出现的小气球取名为气泡

可以设置左边、右边，以及没有选中情况下的气泡

气泡的图片、颜色都是可以自定义的

以下用到的图片可自取：https://www.aliyundrive.com/s/wT22d1Vb1BV

把左、右，以及中间没有选中的气泡图片复制到 <code>media</code> 文件夹下

<code>ohos:element_selection_left_bubble</code>、<code>ohos:element_selection_right_bubble</code>分别设置左右气泡显示的图片

<code>ohos:element_cursor_bubble</code>：设置没有选中时的气泡图片

<code>ohos:selection_color</code>：设置选中时内容的颜色

在一些APP中，登录界面密码输入框那里有个小眼睛，按住小眼睛后就可以看到密码的明文展示，松开小眼睛又恢复到密文状态了

把“小眼睛”改成Button组件，实现的逻辑原理也是一样的

需求分析：

按住按钮不松，将输入框中的密码变成明文

松开按钮之后，输入框中的密码变回密文

新建项目：<code>TextFieldApplication3</code>

新建项目：<code>TextFieldApplication4</code>

细节说明：

Text文本（忘记密码了？）组件默认是左边放置的，加上 <code>ohos:layout_alignment="right"</code>就是右边放置了，同时也给个<code>ohos:right_margin="20vp"</code>和右边的屏幕有些距离。如果<code>ohos:layout_alignment="right"</code>属性不写，直接写<code>ohos:right_margin="20vp</code>，那么<code>ohos:layout_alignment="right"</code>属性就会失效，因为组件默认是放在左边的。

本文来自博客园，作者：兮动人，转载请注明原文链接：https://www.cnblogs.com/xdr630/p/15350319.html