在上一篇文章里面，我们已经认识了一部分鸿蒙里面的常用组件，今天我们继续去认识另外几个常用组件

文本显示（Text/Span）

文本组件是任何一个项目当中用处最广泛的一个组件了，在Android当中文本组件是TextView，不管是在鸿蒙还是Android当中,展示一个文本都可以使用string或者资源id，鸿蒙当中展示文本的方式如下所示

这是文本的基础用法，看似很简单，但是我们可以回忆下在以往实际开发过程中，涉及到文本的场景有哪些是需要特殊处理，下面来列举一下并且看看在鸿蒙里面是如何处理的

文本过长处理

在很多时候，有些文本组件需要展示很多内容，但由于受到父容器以及ui设计的影响，很难将所有内容都全部展示出来，这个时候就需要多超长文本做处理，使用到的函数是textOverflow,来看下面这段代码

有两个文本组件都分别展示一段比较长的文案，并且都设置了textOverflow,但是从效果图上可以看出来，只有第二个文本组件的textOverflow起作用了，第一个仍旧换行来展示文案，原因是第二个文本组件还设置了maxLines这个函数，所以textOverflow与maxLines是要配合使用才有效果

设置行高

文本组件默认都是有行高的，但是某些ui设计上希望文本在行高展示上可以比默认的大一些，这个时候就需要使用lineHeight函数,还是用上面的例子，我们给第二个文本组件设置个行高，让两个组件在高度上有个差别

可以看到第二个文本组件的高度在设置了lineHeight的之后，明显比第一个要高很多

装饰线

当文本组件需要增加装饰线的时候，就需要使用decoration函数，里面需要传入装饰线的类型以及装饰线的颜色

可以看到这里给三个文本都设置了不同的装饰线类型，并且每一个装饰线都设置了不一样的颜色，这个在Android里面想要实现那肯定要设置个Spannable，但是在鸿蒙里面一个函数就搞定了，还是很方便的

设置基线的偏移量

文本组件是有基线的，在弹性布局里面还有种对齐方式就是基于文本组件的基线对齐，我们可以使用baselineOffset函数来设置基线的位置

可以看到调整了一下基线位置以后，文本组件整体所占的区域就改变了，这种方式比较适合用在调整布局里组件之间的间距

文本字符之间的间距

刚才使用lineHeight函数来实现文本的行与行的间距，那么我们也可以改变文本字符的间距，使用letterSpacing来实现

自适应字体大小

我们经常会遇到这样的需求，在一个有限的空间里面要展示一段很长的文字，然而产品要求展示不下还不允许换行，那么我们只能让文本的字体大小改变来自适应布局空间,看下面的代码

可以看到要使用自适应功能，maxFontSize与minFontSize这两个函数是必须设置的，另外还必须限定文本的大小和行数，这样自适应功能才会生效

设置大小写

文本组件里面使用函数textCase来设置文本的大小写，默认设置的是TextCase.Normal

从效果图可以看到，UpperCase和LowerCase分别可以将文本转换成全大写和全小写

富文本

在Android当中如果要实现富文本效果，必须创建个Spannable，然后逐个逐个根据下标来设置不同的样式，反正是挺不方便的，但是在鸿蒙里面，这部分得到了改善，在鸿蒙里面，可以在Text组件内部创建Span组件来实现富文本效果，一个Span代表着一种效果

可以看到每一个Span都可以当作一个子Text组件来用，并且上述讲到的属性都适用于Span组件，轻轻松松就能实现富文本效果

文本输入（TextInput/TextArea）

输入框组件也是比较常用的组件之一，鸿蒙里面的输入框组件分为两种，一种是单行输入框TextInput,一种是多行输入框TextArea

同样是限制了宽度没有限制高度，单行输入框在到达边界的时候，会继续输入不换行，而多行输入框在到达边界的时候，会换行继续输入

InputType

不管是哪里的输入框，都会有输入类型这个设置，鸿蒙也不例外，输入框组件的输入类型有五种，分别为Normal基本输入模式、Password密码输入模式、Email邮箱地址输入模式、Number纯数字输入模式、PhoneNumber电话号码输入模式

可以看到每一种InputType,弹出来的键盘类型都不一样，尤其是Password类型的时候，还在输入框上加入了一个小眼睛的按钮，方便在明文密文之间切换

添加事件

我们经常需要获取输入框的一些状态，比如输入的内容，或者是否获取焦点，在鸿蒙中，使用onChange与onFocus函数来分别实现对于输入内容与获取焦点的坚挺

上述有一段代码，分别对两个输入框组件做操作，当第一个输入框获取焦点时候会有Toast提示，当第二个输入框获取焦点的时候，也会有相应提示，另外还有两个Text组件分别用来记录两个输入框里面输入的内容，这段代码运行后的效果如下

自定义弹窗(CustomDialog)

自定义弹窗与系统弹窗就不一样了，内部视图都必须由开发者自己去开发，所以这里就需要使用@CustomDialog装饰器，用这个装饰器修饰的内容就是我们自定义弹窗的内部布局，我们来随便写个

CoffeeDialog就是我们的自定义弹窗，其中内部controller就是弹窗的控制器，用来打开与关闭弹窗，定义的cancel与confirm相当于弹窗确定与取消按钮的监听器，外部调用这两个监听器可以自己去实现按钮点击后的操作,而在页面当中如何去打开这个弹窗呢？首先需要去实例化CustomDialogController，在内部去创建我们的CoffeeDialog并且自定义两个按钮的点击事件，代码如下

得到了实例化的CustomDialogController，我们只需要在调用方调用open函数就可以打开这个弹窗，比如现在在页面上创建一个按钮，点击按钮就弹出这个弹窗

这样所有代码都写完了，我们看下效果

总结

常用组件就介绍到这，但是鸿蒙里面的组件肯定远远不止这些，在官方文档的Api参考那一栏里面，我们可以看到还有许多组件我们还没熟悉了解过，这些组件肯定不能一次看完然后就全部记住，一般来说都需要我们在开发过程中边看边学边琢磨才能熟悉一个组件的用法，所以还是得多上手，多实践，才能达到想要的效果。