7. 图解鸿蒙之 Text 组件 - 介绍 decoration

702 阅读2分钟

在 text 文本中关于装饰线样式及其颜色的设置,

我怎么在我的文本中圈出重点?

添加下划线的方式,如图所示:   

解释一下:

1、关于在text组件中添加decoration属性,.decoration({

          type: TextDecorationType.Overline,//添加下划线,可以改变下划线的位置

          color: Color.Red,//改变颜色

          style: TextDecorationStyle.DOTTED//下划线的样式,双实线,虚线,单实线

        })
        PS:实际项目中如有出入,请告知博主,博主会第一时间修改得哇~

解释一下:

--javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

1、关于在text组件中添加decoration属性,.decoration({

          type: TextDecorationType.Overline,//添加下划线,可以改变下划线的位置

          color: Color.Red,//改变颜色

          style: TextDecorationStyle.DOTTED//下划线的样式,双实线,虚线,单实线

        })

在 Text 组件中,decoration 属性主要用于装饰文本。 从基本概念来讲,它可以给文本添加各种装饰效果。常见的有下划线(underline),这使得文本下方出现线条,通常用于链接文本,让用户能直观地识别可点击的内容。比如在网页的导航栏中,链接文本添加下划线,就可以引导用户进行页面跳转操作。 还有删除线(line - through),这种装饰会在文本中间画一条线,一般用于表示文本内容已被废弃、无效或者是一个参考价格与实际价格对比的场景。比如商品原价被划掉,旁边显示折扣后的价格。 另外,overline 装饰会在文本上方添加线条,虽然使用场景相对较少,但在一些需要特殊标注或复古风格的排版中可能会用到,比如古籍排版的模仿或者某些专业领域的标记。通过这些装饰效果,可以丰富文本的视觉呈现,增强文本传达的信息,在不同的应用场景下发挥重要的作用,提升用户界面的表现力。

PS:实际项目中如有出入,请告知博主,博主会第一时间修改得哇~