文本(text)

文本控件介绍

文本控件(view)用于显示文本,可以控制文本的字体大小、颜色和字体等。

属性-text

文本内容。 支持函数设置和获取值:view.setText('hello');var text = view.getText(); <template> <text id="demo" text="hello"/> </template>

属性-size

设置文本字体大小,单位为sp。 支持函数动态设置属性:view.setSize(12); <template> <text id="demo" size="20"/> </template>

属性-gravity

控件内容在控件中的位置。
  • left。靠左
  • right。靠右
  • top。靠顶部
  • bottom。靠底部
  • center。居中
  • center_vertical。垂直居中
  • center_horizontal。水平居中
支持函数动态设置属性:view.setGravity('left|top');
<template>
    <linear>
        <text id="demo" width="matchParent" text="hello" gravity="right"/>
    </linear>
</template>

function main() {
    setupUI();
}

属性-color

设置文本字体颜色。 支持函数动态设置属性:view.setColor('#44332211'); <template> <text id="demo" color="red"/> </template>

属性-lines

设置文本控件的行数。即使文本内容没有达到设置的行数,控件也会留出相应的宽度来显示空白行;如果文本内容超出了设置的行数,则超出的部分不会显示。 <template> <text id="demo" lines="1"/> </template>

属性-maxLines

设置文本框最大显示几行。 <template> <text id="demo" maxLines="3"/> </template>

属性-style

设置字体的样式,比如斜体、粗体等。可选的值为:
  • bold 加粗字体
  • italic 斜体
  • normal 正常字体
可以用或("|")把他们组合起来,比如粗斜体为"bold|italic"。 <template> <linear> <text id="demo" style="bold|italic" text="hello"/> </linear> </template>

属性-ellipsize

设置文本的省略号位置。文本的省略号会在文本内容超出文本控件时显示。可选的值为:
  • end。在文本末尾显示省略号
  • marquee。跑马灯效果,文本将滚动显示
  • middle。在文本中间显示省略号
  • none。不显示省略号
  • start。在文本开头显示省略号
<template> <linear> <text id="demo" text="hello" ellipsize="middle"/> </linear> </template>