Skip to main content
版本：v2

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'
      }
    })
  }
})