![Hello HarmonyOS!:鸿蒙应用开发从入门到精通](https://wfqqreader-1252317822.image.myqcloud.com/cover/437/43738437/b_43738437.jpg)
2.3.2 Text和TextField
文本框通过Text组件来实现,用来显示文本字符信息,是HarmonyOS中最常用的一个组件。编辑框通过TextField组件来实现,它继承自Text类,与Text组件的属性和用法一样,只不过它允许改变其中的内容,所以这里把Text组件和 TextField 组件放到一起来讲解。Text 组件的属性较多,开发者可以通过设置这些属性来改变文本内容、字号、颜色、样式等。下面介绍Te x t组件的具体用法。
Text组件和 TextField组件除了有 Component的通用属性,还有一些自有属性,常用的自有属性见表2-6。
表2-6 Text组件与TextField组件的自有属性
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_123_1.jpg?sign=1739673886-dbHd9mE0wtCagsgBgo7lLyY2VqitotHm-0-23b68c6af4a9e7270e35678f003821d9)
续表
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_124_1.jpg?sign=1739673886-xjOs5ioE6aIY5pQUVSQPPm55Qfnhmxjl-0-cf01b83a8a109dc20d561168c05e7e04)
Te x t组件的自有属性非常多,表2-6只列出了一些常用的属性,下面创建一个Te x t组件。
1.指定具体尺寸的Text组件
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_124_2.jpg?sign=1739673886-iZQ9H1NCDInh5b2LC9Twuw0YQzaPofRA-0-50bc3fab992f46eadea62d8bbaefd681)
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_125_1.jpg?sign=1739673886-yXuAnzoG1b56jDIbZqd6mhNWEmsr3nFZ-0-bea94f71f68ffb91fb46c01847c70891)
页面预览效果如图2-31所示。
这里为 Te x t 组件添加了背景颜色以方便观察,在其中写入了一行文本信息:“1.hello world!”,字号设置为12vp,并且设置了底部外边距bottom_margin为12vp。
2.指定文本位置
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_125_2.jpg?sign=1739673886-vNNzrCGGTgkAHF3QjhrzEOAjL4mJfBRQ-0-25b763fb31d03586b1a43328a293f1c8)
页面的预览效果如图2-32所示。
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_125_3.jpg?sign=1739673886-vpUgiSW6oI32HEBPqJePGJg9cR6TT47w-0-9ceae9ce982f6d01966b31b6e4979e8c)
图2-31 指定具体尺寸的Text组件
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_125_4.jpg?sign=1739673886-VlOMQer6A3tcjF81hfZhGm0vUKGtq8Mn-0-e5da1d303a7b313cdf7c0521f3bb7f2c)
图2-32 指定文本位置的Text组件
3.一段超长文本的显示
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_125_5.jpg?sign=1739673886-l9kUU8r0j9dElhvt9iznzFETo3jzPuLk-0-84f21225a2be1a8397dbe9cef93ec2ca)
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_126_1.jpg?sign=1739673886-8HdLk34Mfs2jQEhbPM5ttYrahCM3r7tg-0-3cb2bf5c4e461ad809ad18331be57253)
页面的预览效果如图2-33所示,由于文本太长,超过屏幕的部分无法显示。
4.超长文本的多行显示
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_126_2.jpg?sign=1739673886-Pw5nygPKiAnGU2KCEuQyZ9ZyiHajd0ug-0-eebfe2df1491c64cba889ffd0b1b8745)
页面的预览效果如图 2-34 所示,Text 组件通过设置 ohos:multiple_lines="true",可以将超出部分的文本另起一行显示。
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_126_3.jpg?sign=1739673886-Phbh8cXDKZXVFN35TcoC018MCmxiIyON-0-d53c1cbcbc9af3f74b0f72d881451840)
图2-33 超长文本的显示
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_126_4.jpg?sign=1739673886-mzUHK13BOgXnuzzkhw2UqK3OfQvzdpxy-0-5eca3033ac7d8eb0c3334e7a7fed89ad)
图2-34 超长文本的多行显示
5.超长文本的单行省略显示
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_126_5.jpg?sign=1739673886-wms9OIHPZZLCHogIFy1u7XwJE8ilQiOV-0-b75dc6312a272824035e5889594b0340)
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_127_1.jpg?sign=1739673886-awNBBdLItyripgSbFzUI9nWj7JhZCNBF-0-d9530588984d9a03e53f1c1db0f79b5b)
页面的预览效果如图2-35所示。
6.改变字体样式
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_127_2.jpg?sign=1739673886-eYy1VdZ9hr5rCkPdrMXsi91VoGlHGTEG-0-3e049d73a812f506006a92d6f63bb721)
页面的预览效果如图2-36所示。
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_127_3.jpg?sign=1739673886-EYg2snOuDOKvt9MHh2l8PjXZuEXDTzkd-0-35fcb9d717767fbb1e30e3c4feb90757)
图2-35 超长文本的单行省略显示
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_127_4.jpg?sign=1739673886-KH8BO5JEiMC0JZCAYGprnwx9rjbVcrOC-0-a16ec1a1948c3baf6d27d96bea3c3b53)
图2-36 改变字体样式
Te x t组件的属性非常多,由于篇幅有限,只能列举这些常用的属性。在上面的案例中,涉及文本框大小、字号、文本位置和长文本处理。在实际应用中,为了避免出现文本长度超过Text组件宽度而导致信息被截断的情况,在对Text组件进行处理时都要考虑这些情况,可以多行显示,那么需要限制最大行数,也可以单行显示,则需要考虑在末尾处用省略号给出提示,以免文本显示不全。当然,具体的处理方式要根据业务特点来决定。
输入框的特点是,如果点击输入框,就会弹出输入法框,可以对其中的文本信息进行修改。
下面来介绍 TextField 组件。TextField 组件与 Text 组件的区别就在于TextField 组件中的文本信息是可编辑的。与 Text 组件相比,TextField 组件的自有属性如表2-7所示。
表2-7 TextField组件的自有属性
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_128_1.jpg?sign=1739673886-RCgoY6eeZd1Lilr7YcupdlBWLTqOvXQE-0-56777194f680bc207b622416f9954d34)
下面来看这个属性的效果。
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_128_2.jpg?sign=1739673886-GcIAKaFXpRQizkOJ8HJBFaizaeZuZjNt-0-2964dfd5267a101032a69b4a289281a9)
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_129_1.jpg?sign=1739673886-gIEpdbsZfOKUCXVJ0W8eISUVU74RykZe-0-f8ae1f927a1964fc72e2f33ce9d52d82)
图2-37 basement属性演示
上面两种输入框的页面预览效果如图 2-37 所示,可以看到basement其实是输入框下方的一条线,这条线可以标识输入框的尺寸范围,以带来良好的用户体验。