HarmonyOS实战——TextField文本输入框组件基本使用 原创 精华
兮动人
发布于 2021-9-27 13:26
浏览
9收藏
Table of Contents
- 1. TextField组件基本用法
- 2. TextField案例——获取文本输入框中的内容并进行Toast提示
- 3. TextField组件高级用法
- 4. TextField案例——长按查看密码明文
- 5. TextField案例——搭建登录界面
1. TextField组件基本用法
组件说明:
- 是
Text
的子类,用来进行用户输入数据的
常见属性:
2. TextField案例——获取文本输入框中的内容并进行Toast提示
-
通过
TextField
获取文本输入框中的内容并进行Toast
提示 -
新建项目:
TextFieldApplication
ability_main
- 因为要在
onClick
方法中用到TextField
和Button
这两个组件,所以要把这两个组件移到成员位置,使其成为成员变量后,onClick
方法才能访问的到
MainAbilitySlice
- 运行:
3. TextField组件高级用法
3.1 密码的密文展示
- 当输入密码的时候会变成密文展示
ohos:text_input_type="pattern_password"
:表示输入的密码以密文的方式显示- 基本使用:
3.2 基线的设置
-
有的时候文本输入框并不是一个框,而是下面有一条横线,这条线华为官方叫做 基线
-
把文本输入框使用横线表示,在上面加上一条基线,把输入框的背景颜色去掉
- 如果以后看到一条基线,然后在输入一些数字信息,这还是
TextField
文本输入框组件,只不过是背景色没有设置,让它跟布局的颜色一致了,看不到背景而已
3.3 气泡的设置
- 当用鼠标长按选中输入的内容后,就会选中内容,前面的光标和后面的光标,以及中间选中的内容颜色会改变,华为官方给前、后的光标,以及没有选中内容状态下出现的小气球取名为气泡
- 可以设置左边、右边,以及没有选中情况下的气泡
- 气泡的图片、颜色都是可以自定义的
- 以下用到的图片可自取:https://www.aliyundrive.com/s/wT22d1Vb1BV
- 把左、右,以及中间没有选中的气泡图片复制到
media
文件夹下
ohos:element_selection_left_bubble
、ohos:element_selection_right_bubble
分别设置左右气泡显示的图片ohos:element_cursor_bubble
:设置没有选中时的气泡图片ohos:selection_color
:设置选中时内容的颜色- 运行:
4. TextField案例——长按查看密码明文
在一些APP中,登录界面密码输入框那里有个小眼睛,按住小眼睛后就可以看到密码的明文展示,松开小眼睛又恢复到密文状态了
- 把“小眼睛”改成Button组件,实现的逻辑原理也是一样的
需求分析:
- 按住按钮不松,将输入框中的密码变成明文
- 松开按钮之后,输入框中的密码变回密文
新建项目:TextFieldApplication3
ability_main
MainAbilitySlice
- 运行:
5. TextField案例——搭建登录界面
- 新建项目:
TextFieldApplication4
细节说明:
- Text文本(忘记密码了?)组件默认是左边放置的,加上
ohos:layout_alignment="right"
就是右边放置了,同时也给个ohos:right_margin="20vp"
和右边的屏幕有些距离。如果ohos:layout_alignment="right"
属性不写,直接写ohos:right_margin="20vp
,那么ohos:layout_alignment="right"
属性就会失效,因为组件默认是放在左边的。
ability_main
- 运行:
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
赞
10
收藏 9
回复
10
6
9
相关推荐
感谢分享,每个演示都有很详细的代码和讲解,楼主用心了。
多谢小伙伴的支持,通俗易懂哦😀
感谢楼主,刚好用到
多谢支持!
这么多动图,哪来的呀
自己录制的GIF