文本(text)

文本控件介绍

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

属性-text

文本内容。 支持两种设置方式,1.在template中直接设置;2.使用函数动态设置和获取文本。 <template> <text id="demo" text="hello"/> </template> function main() { setupUI(); ui('demo').setText('ok'); var text = ui('demo').getText(); }

属性-size

设置文本字体大小,单位为sp。 支持两种设置方式,1.在template中直接设置;2.使用函数动态设置。 <template> <text id="demo" size="20"/> </template> function main() { setupUI(); ui('demo').setSize(12); }

属性-gravity

控件内容在控件中的位置。
  • left。靠左
  • right。靠右
  • top。靠顶部
  • bottom。靠底部
  • center。居中
  • center_vertical。垂直居中
  • center_horizontal。水平居中
支持两种设置方式,1.在template中直接设置;2.使用函数动态设置。
<template>
    <linear>
        <text id="demo" width="matchParent" text="hello" gravity="right"/>
    </linear>
</template>

function main() {
    setupUI();
    ui('demo').setGravity('left|top');
}

属性-color

设置文本字体颜色。 支持两种设置方式,1.在template中直接设置;2.使用函数动态设置。
                    <template>
    <text id="demo" color="red"/>
</template>
function main() {
    setupUI();
    ui('demo').setColor('#44332211');
}

属性-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>