Skip to main content
版本:v3

TEXT

API_LEVEL 2.0 开始支持,API 兼容性请参考 API_LEVEL

text_sample

文本控件用于展示文本。支持设置文本大小、颜色、对齐方式、字体。

创建 UI 控件

import { createWidget, widget } from '@zos/ui'

const text = createWidget(widget.TEXT, Param)

类型

Param: object

属性备注是否必须类型
x控件 x 坐标number
y控件 y 坐标number
w控件显示宽度number
h控件显示高度number
color文本颜色number
align_h横轴对齐方式(值见 ALIGN)ALIGN
align_v竖轴对齐方式(值见 ALIGN)ALIGN
text文本string
text_size字体大小number
text_style文本超长处理方式 默认为跑马灯(值见 TEXT_STYLE)TEXT_STYLE
line_space行间距number
char_space字符间距number
font字体路径,资源存放路径参考 目录结构string
text_i18n多国语言文本支持,参考代码示例,其中 'en-US' 字段必填,当没有配置当前国家语言,会使用 'en-US' 的值,以此方式传入时,text 属性失效,object

ALIGN 对齐方式

说明
align.LEFT横轴-左对齐
align.RIGHT横轴-右对齐
align.CENTER_H横轴-居中
align.TOP竖轴-最上端
align.BOTTOM竖轴-最底端
align.CENTER_V竖轴-居中

TEXT_STYLE 文本排版

说明
text_style.ELLIPSIS单行溢出字符显示...
text_style.NONE跑马灯
text_style.WRAP换行

代码示例

import { createWidget, widget, align, prop, text_style, event } from '@zos/ui'

Page({
build() {
const text = createWidget(widget.TEXT, {
x: 96,
y: 120,
w: 288,
h: 46,
color: 0xffffff,
text_size: 36,
align_h: align.CENTER_H,
align_v: align.CENTER_V,
text_style: text_style.NONE,
text: 'HELLO, Zepp OS',
})

text.addEventListener(event.CLICK_DOWN, (info) => {
text.setProperty(prop.MORE, {
y: 200
})
})

const textWithFont = createWidget(widget.TEXT, {
x: 96,
y: 300,
w: 288,
h: 46,
color: 0xffffff,
text_size: 36,
align_h: align.CENTER_H,
align_v: align.CENTER_V,
text_style: text_style.NONE,
font: 'fonts/custom.ttf',
text_i18n: {
'en-US': 'Hello Zepp OS'
'zh-CN': '你好 Zepp OS'
}
})
}
})