关于HarmonyOs开发的text组件及其属性的相关笔记

发布于:2023-01-21 ⋅ 阅读:(507) ⋅ 点赞:(0)

如果想要去开发一个app界面,不仅需要掌握相关的html、css、js基础,还要去了解,开发这个app界面的官方文档,本次的笔记就是基于HarmonyOs开发的指导文档

text开发指导-基础组件-常见组件开发指导-基于JS扩展的类Web开发范式-UI开发-基于JS开发-开发-HarmonyOS应用开发

所以说开发之前是一定需要先好好看看开发文档的一些内容,来了解开发这个app界面与正常的开发网页界面的一些不同的地方。

首先,官方给的第一个例子就很形象的展示了如容器内(比如下图的div)只有一个组件的话(下文是只有一个text)可以直接在第一个容器标签内书写,对其进行修饰,当然也可以在css里面进行修饰,是两种方法,提供了多样的选择。

之后便是官方给出的第二个例子,从这个例子里面也可以了解到许多的东西

首先呢,就是官方提供了很多的组件的属性,可以对文本的颜色、文本的字体大小、缩放文本、文本之间的间距、文本的对齐方式,都可以很方便的进行修改,便于我们进行一些精细化的操作。此外这个例子还有一个注意的点,就是上面的两个文本的样式基本上都是一样的,每个文字都有间距,但是第二个添加了一个word-spacing,使得每个分隔的字符之间的距离更大,所以说,word-spacing是运用于字符之间有间隔的,并不适用于一整局话。

后几个官方的例子的话,比较实用的应该就是设置文本折行还有支持span子组件,这里分开来讲,文本折行指的是当一行无法显示全部被内容的时候,可以进行折断,不必再去调整容器的大小什么的,折断的话也比较的方便,这里的折断属性为word-break,有两种可供选择,一种是break-word和break-all,效果如下图所示

支持span组件可能是HamonyOs开发比较特别的一个点,意思是可以讲一句话拆分成好几句从而对每个部分进行修改,如下图所示

不过官方文档中倒是提到了一些需要注意到的问题 ,第一就是span子组件的属性不能太过异常,否则就会不能显示;第二个便是当时有span子组件时,父组件text中不能再写内容,写了也不会显示

        此外,再多写一些关于其他属性的比如颜色,内边距和外边距,对于颜色的话,首先就是可以多种方法显示比如rgb,或者系统设置好的颜色,再或者是一个#加一些数字,比如#000000,代表的就是黑色,#后面的数字可以是三个也可以是六个,这里的三个指的是什么呢,可以将六个数两两一分,当两个数字一样是可以直接用一个数字代替,比如#000,代表的也是黑色。取值范围是0~FF。这里所用的便是16进制来表示。

对于内外边距这里可以先解释一下内外边距的区别:

内边距是边框到内容的距离,外边距是对象外边延伸的距离,内边距不能为负值,外边距可以为负值。在对容器进行编辑时可以通过对内外边距的掌握,来达到自己想要的结果。

以上为个人见解,仅供参考,也欢迎大家指正。


网站公告

今日签到

点亮在社区的每一天
去签到