鸿蒙应用开发 | 文本框（Text）和编辑框（TextField）的功能与用法
大家好，我是你们的朋友 朋哥，今天开始朋哥开始研究鸿蒙了，定时会写一些文章分享给大家，希望多多提意见。
上一篇原创文章 解读了 鸿蒙开发布局的 自定义布局，也是为了总结一下几种布局的使用，里面牵涉到几个接口和函数，用来自定义布局的设置和监听。
胜利胜利，布局终于完成了，今天加个鸡腿犒劳一下自己。
接下来我们开始学习组件了，组件是界面的显示组件，界面布局是一个大的规划，组件就是每一个布局中的 每一个小布局效果。
简介：
为啥要将Text和 TextField一起来讲呢？主要还是关联性比较高，看下面的描述就知道了。
Text是用来显示字符串的组件，在界面上显示为一块文本区域。Text作为一个基本组件，有很多扩展，常见的就是 文本编辑组件TextField。
所有组件的父类都是Component ， Text的共有XML属性继承自：Component
Text
支持的xml属性 ，更多属性 来源官网api
|
属性名称 |
中文描述 |
使用案例 |
|---|---|---|
|
text |
显示文本 |
ohos:text="熄屏时间" ohos:text="$string:test_str" |
|
hint |
提示文本 |
ohos:hint="联系人" ohos:hint="$string:test_str" |
|
text_font |
字体 |
ohos:text_font="HwChinese-medium" |
|
truncation_mode |
长文本截断方式 |
ohos:truncation_mode="none" |
|
ohos:truncation_mode="ellipsis_at_start" |
||
|
ohos:truncation_mode="ellipsis_at_middle" |
||
|
ohos:truncation_mode="ellipsis_at_end" |
||
|
ohos:truncation_mode="auto_scrolling" |
||
|
text_size |
文本大小 |
ohos:text_size="16fp" |
|
element_padding |
文本与图片的边距 |
ohos:element_padding="8vp" " |
|
bubble_width |
文本气泡宽度 |
ohos:bubble_width="10vp" |
|
bubble_height |
文本气泡高度 |
ohos:bubble_height="10vp" |
|
bubble_left_width |
文本气泡左宽度 |
ohos:bubble_left_width="10vp" |
|
bubble_left_height |
文本气泡左高度 |
ohos:bubble_left_height="10vp" |
|
bubble_right_width |
文本气泡右宽度 |
ohos:bubble_right_width="10vp" " |
|
bubble_right_height |
文本气泡右高度 |
ohos:bubble_right_height="20" |
|
text_color |
文本颜色 |
ohos:text_color="#A8FFFFFF" |
|
hint_color |
提示文本颜色 |
ohos:hint_color="#A8FFFFFF" |
|
selection_color |
选中文本颜色 |
ohos:selection_color="#A8FFFFFF" |
|
text_alignment |
文本对齐方式 |
可以设置取值项如表中所列，也可以使用“|”进行多项组合。 ohos:text_alignment="top" ohos:text_alignment="top|left" |
|
max_text_lines |
文本最大行数 |
ohos:max_text_lines="2" |
|
text_input_type |
文本输入类型 |
ohos:text_input_type="pattern_null" |
|
ohos:text_input_type="pattern_text" |
||
|
ohos:text_input_type="pattern_number" |
||
|
ohos:text_input_type="pattern_password" |
||
|
input_enter_key_type |
输入键类型 |
ohos:input_enter_key_type="enter_key_type_unspecified" |
|
ohos:input_enter_key_type="enter_key_type_search" |
||
|
ohos:input_enter_key_type="enter_key_type_go" |
||
|
ohos:input_enter_key_type="enter_key_type_send" |
||
|
auto_scrolling_duration |
自动滚动时长 |
ohos:auto_scrolling_duration="1000" |
|
multiple_lines |
多行模式设置 |
ohos:multiple_lines="true" |
|
auto_font_size |
是否支持文本自动调整文本字体大小 |
ohos:auto_font_size="true" |
|
scrollable |
文本是否可滚动 |
ohos:scrollable="true" |
|
text_cursor_visible |
文本光标是否可见。 |
ohos:text_cursor_visible="true" |
|
italic |
文本是否斜体字体 |
ohos:italic="true" |
|
padding_for_text |
设置文本顶部与底部是否默认留白。 |
ohos:padding_for_text="true" |
|
additional_line_spacing |
需增加的行间距 |
ohos:additional_line_spacing="2" |
|
line_height_num |
行间距倍数 |
ohos:line_height_num="1.5" |
|
element_left |
文本左侧图标 |
ohos:element_left="#FFFFFFFF" |
|
element_top |
文本上方图标 |
ohos:element_top="#FFFFFFFF" |
|
element_right |
文本右侧图标 |
ohos:element_right="#FFFFFFFF" |
|
element_bottom |
文本下方图标 |
ohos:element_bottom="#FFFFFFFF" |
|
element_start |
文本开始方向图标 |
ohos:element_start="#FFFFFFFF" |
|
element_end |
文本结束方向图标 |
ohos:element_end="#FFFFFFFF" |
|
element_cursor_bubble |
文本的光标气泡图形 |
ohos:element_cursor_bubble="#FFFFFFFF" |
|
element_selection_left_bubble |
选中文本的左侧气泡图形 |
ohos:element_selection_left_bubble="#FFFFFFFF" |
|
element_selection_right_bubble |
选中文本的右侧气泡图形 |
ohos:element_selection_right_bubble="#FFFFFFFF" |
属性太多 ，可以大体看一下，下面主要讲解几个关键属性，也是常用的属性。
1，创建项目
创建项目如果不会 请查看专栏第一篇入门篇
2，默认布局 resources/base/layout/ability_main.xml 中添加两个按钮，分别是两个功能。
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><Buttonohos:id="$+id:text_option"ohos:height="match_content"ohos:width="match_content"ohos:background_element="#000000"ohos:padding="10vp"ohos:layout_alignment="horizontal_center"ohos:text="Text 组件的功能和使用"ohos:text_color="#ffffff"ohos:text_size="20vp"/><Buttonohos:id="$+id:textField_option"ohos:height="match_content"ohos:width="match_content"ohos:top_margin="50vp"ohos:background_element="#000000"ohos:padding="10vp"ohos:layout_alignment="horizontal_center"ohos:text="TextField 组件的功能和使用"ohos:text_color="#ffffff"ohos:text_size="20vp"/></DirectionalLayout>查看效果：
3，点击 Text组件的功能和使用 进入 Text功能页面 ，添加一个 Text
在resources/base/layout目录下的ability_text.xml文件中创建Text。
<Textohos:id="$+id:text"ohos:width="match_content"ohos:height="match_content"ohos:text="Text"/>上面是最基本的组件属性，宽，搞，内容，id。
（1）设置背景，背景颜色可以读取配置文件（background_ability_text.xml），也没有直接设置颜色值
<Textohos:background_element="$graphic:background_ability_text"/>（2）设置字体大小和颜色
ohos:text_size="20fp"
ohos:text_color="#000000"（3）设置字体样式和字体加粗
ohos:italic="true" // 斜体
ohos:text_weight="700" // 加粗
ohos:text_font="serif" // 字体样式（4）设置字体，自动换行，最大行数和自动变化
ohos:multiple_lines="true" //换行，当内容太多时会自动换行
ohos:max_text_lines="2" // 最大行数，最多显示几行
ohos:auto_font_size="true" // 自动调节字体大小，如果设置2行，当超过时，自动缩小字体（5）文本对其方式
ohos:text_alignment="bottom" // 对齐方式，左右上下（6）文本自动滚动
ohos:scrollable="true"实例代码：
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><!--基础组件，添加默认背景--><Textohos:id="$+id:text1"ohos:width="match_content"ohos:height="match_content"ohos:background_element="$graphic:background_ability_text"ohos:text="Text,默认文本"/><!--设置字体颜色和字体大小--><Textohos:id="$+id:text2"ohos:width="match_content"ohos:height="match_content"ohos:top_margin="10vp"ohos:background_element="$graphic:background_ability_text"ohos:text_size="20fp"ohos:text_color="#000000"ohos:text="Text,设置字体大小和颜色"/><!--设置字体样式和字体加粗，斜体--><Textohos:id="$+id:text3"ohos:width="match_content"ohos:height="match_content"ohos:top_margin="10vp"ohos:background_element="$graphic:background_ability_text"ohos:text_size="20fp"ohos:text_color="#000000"ohos:italic="true"ohos:text_weight="700"ohos:text_font="serif"ohos:text="Text,设置字体样式和字体加粗"/><Textohos:id="$+id:text4"ohos:width="match_content"ohos:height="match_content"ohos:top_margin="10vp"ohos:background_element="$graphic:background_ability_text"ohos:text_size="20fp"ohos:text_color="#000000"ohos:multiple_lines="true"ohos:max_text_lines="2"ohos:text="Text,设置换行和最大行数Text,设置换行和最大行数Text,设置换行和最大行数Text,设置换行和最大行数Text,设置换行和最大行数Text,设置换行和最大行数Text,设置换行和最大行数Text,设置换行和最大行数Text,设置换行和最大行数"/><!--设置字体自动变化--><Textohos:id="$+id:text5"ohos:width="match_content"ohos:height="match_content"ohos:top_margin="10vp"ohos:background_element="$graphic:background_ability_text"ohos:text_size="20fp"ohos:text_color="#000000"ohos:max_text_lines="2"ohos:auto_font_size="true"ohos:text_alignment="bottom"ohos:text="Text,鸿蒙开发是一个国产手机系统应用开发鸿蒙开发是一个国产手机系统应用开发鸿蒙开发是一个国产手机系统应用开发鸿蒙开发是一个国产手机系统应用开发"/><!--对齐方式--><Textohos:id="$+id:text6"ohos:width="match_content"ohos:height="match_content"ohos:top_margin="10vp"ohos:background_element="$graphic:background_ability_text"ohos:text_size="20fp"ohos:text_color="#000000"ohos:max_text_lines="2"ohos:auto_font_size="true"ohos:text_alignment="top|bottom"ohos:text="Text,鸿蒙开发是一个国产手机系统应用"/><!--设置p跑马灯效果--><Textohos:id="$+id:text7"ohos:width="match_content"ohos:height="match_content"ohos:top_margin="10vp"ohos:background_element="$graphic:background_ability_text"ohos:text_size="20fp"ohos:text_color="#000000"ohos:text_alignment="top|bottom"ohos:text="Text,鸿蒙开发是一个国产手机系统应用，鸿蒙开发是一个国产手机系统应用"/><Textohos:id="$+id:text8"ohos:width="100vp"ohos:height="200vp"ohos:scrollable="true"ohos:top_margin="10vp"ohos:background_element="$graphic:background_ability_text"ohos:text_size="20fp"ohos:text_color="#000000"ohos:text_alignment="top|bottom"ohos:text="Text,鸿蒙开发是一个国产手机系统应用，鸿蒙开发是一个国产手机系统应用,Text,鸿蒙开发是一个国产手机系统应用，鸿蒙开发是一个国产手机系统应用,Text,鸿蒙开发是一个国产手机系统应用，鸿蒙开发是一个国产手机系统应用,Text,鸿蒙开发是一个国产手机系统应用，鸿蒙开发是一个国产手机系统应用,Text,鸿蒙开发是一个国产手机系统应用，鸿蒙开发是一个国产手机系统应用,Text,鸿蒙开发是一个国产手机系统应用，鸿蒙开发是一个国产手机系统应用"/></DirectionalLayout>效果：
Text Field
TextField提供了一种文本输入框。TextField的共有XML属性继承自：Text
除了和Text的共有属性意外还有一个自己的独有属性 basement（输入框基线）可以直接设置颜色值 ohos:basement="#000000"。
1，点击 TextField组件的功能和使用 进入 TextField功能页面 ，添加一个 TextField。
在resources/base/layout目录下的ability_text_field.xml文件中创建TextField。
<TextFieldohos:id="$+id:textField"ohos:height="match_content"ohos:width="match_content"ohos:background_element="$graphic:background_ability_text_field"/>2，设置提示文字。
ohos:hint="请输入信息..."3，设置Bubble
ohos:element_cursor_bubble="$graphic:ele_cursor_bubble"4, 设置多行显示
ohos:multiple_lines="true"5，设置可用状态
ohos:enabled="true" // true是可用，false是不可用6，设置基线
ohos:basement="#000000"7，输入键类型（输入时候键盘右下角显示的操作类型）
8，输入内容信息的类型（数字，密码，文本）
效果：
完整代码：
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:background_element="#000000"ohos:orientation="vertical"><TextFieldohos:id="$+id:textField"ohos:height="match_content"ohos:width="200vp"ohos:background_element="$graphic:background_ability_text_field"ohos:text_size="18vp"ohos:padding="10vp"ohos:text_alignment="center|left"ohos:text_font="#000099"ohos:hint="请输入信息..."ohos:element_cursor_bubble="$graphic:bubble"ohos:multiple_lines="true"ohos:enabled="true"ohos:basement="#000099"ohos:input_enter_key_type="enter_key_type_go"ohos:text_input_type="pattern_number"/></DirectionalLayout>老规矩 代码不能少，要不然小伙伴该说我小气了。
代码连接： https://gitee.com/codegrowth/haomony-develop.git
关注公众号【程序员漫话编程】，后台回复【鸿蒙】，即可获取上千鸿蒙开源组件~
原创不易，有用就关注一下。要是帮到了你 就给个三连吧，多谢支持。
觉得不错的小伙伴，记得帮我 点个赞和关注哟，笔芯笔芯~**
作者：码工
有问题请留言或者私信，可以 微信搜索：程序员漫话编程，关注公众号获得更多免费学习资料。
鸿蒙应用开发 | 文本框（Text）和编辑框（TextField）的功能与用法相关推荐
- 火山火花代码编辑框（火花编辑框）Scintilla代码编辑框案例教程
本Scintilla类库封装的非常全,涉及到了多个回调事件.涉及到了 代码搜索.快照.截图.Scintilla的各种命令.各种背景色调整.各种相关的文本处理.代码处理.撤销重做等等等~ 本类库主要是我 ...
- WEB自动化_告警框处理（对话框、确认框、提示框、输入/编辑框、勾选框、单选框、复选框、下拉框）
WEB自动化_下拉框选择(通过元素的value属性选择.下标选择.文本选择) 1. 获取(对话框.确认框.提示框)对象 al = driver.switch_to.alert点击ok 获取文本 点击c ...
- 通过模仿微博编辑框字数显示——编辑框监听介绍
微博输入限制字数,编辑框右下角会有剩余字数显示,通过在项目中做了类似的编辑框,又看了一遍editview的监听器. 先说基本原理,编辑框内容变化之后字数改变,具体的改变根据实际需要变化. 关于edit ...
- PyQt5 技术篇-设置输入框的placeholder方法，Qt Designer设置Line Edit、Text Edit编辑框的placeholder
PyQt5设置方法: self.lineEdit.setPlaceholderText("请输入要查询的内容") Qt Designer设置方法: Qt Designer里有个pl ...
- java fx 文本输入,DOC-03-08 文本框(Text Field)
DOC-03-08 文本框(Text Field) 本章讨论Text Field组件的功能. TextField类实现了一个接收和显示文本输入的UI组件.它提供了从用户接收文本输入的功能.这个类和另一 ...
- MFC中滚动条slider和编辑框edit的联动
想在MFC中实现滚动条slider和编辑框edit的联动(改变滚动条,显示数字在编辑框),同时想要添加两个滚动条,分别控制亮度和对比度.参考了几个博客在VS2017中跑不出来.自己写了一个能运行的版本 ...
- 【转】Win32子窗口控件（按钮、编辑框、静态框、滚动条等）！！
前言: 子窗口控件是特殊的子窗口,不需要我们注册窗口类,系统已经注册好了,我们只需要在创建时选择相应的窗口类名.常用的子窗口控件有按钮BUTTON.组合框COMBOBOX.编辑框EDIT.列表框LIS ...
- Windows edit控件（编辑框控件）
在C语言控制台程序(Console Application)中,可以使用 scanf 函数获取用户的输入,而在Windows程序中使用编辑框控件. 创建编辑框控件 编辑框控件的窗口类名是 edit . ...
- MiniGUI编程--编辑框
编辑框 ES(EditStyle) 单行CTRL_SLEDIT/"sledit" SingleLineEdit 多行CTRL_MLEDIT/"textedit" ...
最新文章
- C语言 下标运算符和指针运算符
- convexHull函数
- 第二阶段个人博客总结8
- html编辑器后怎么使用,html在线编辑器怎么用
- 页面的title为乱码的话需要修改jsp页面pageEncoding=UTF-8
- 在Azure Data Studio中查看执行计划
- Vue.js视频教程
- hive表存储格式的转化
- p语言是python吗-Python是纯的面向对象语言吗？
- mysql存储过程中的异常处理
- 使用Echarts绘制省份地图源码
- vsftp乱码问题解决
- win7系统怎么用计算机,Win7系统中计算器怎么用
- 李涛专家主讲PS高手之路经典视频教程（1G打包下载）
- 使用fsck修复文件系统错误
- 抖音的推荐算法是怎样的？
- java 和 c# 下的RSA证书+AES+DES加解密实现
- nginx配置websocket支持wss
- 分享123个ASP源码，总有一款适合您
- Windows编程之核心书籍推荐