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
start_angle弧形布局起始角度否number
end_angle弧形布局结束角度（start_angle < end_angle）否number
mode弧形布局模式，默认 0
0: inner
1: outer		否number
radius控制弧形布局半径，默认为控件宽高的一半。否number

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换行

属性访问支持列表​

属性名setPropertygetPropertysettergetter
xYYYY
yYYYY
wYYYY
hYYYY
colorYYYY
align_hYYYY
align_vYYYY
textYYYY
text_sizeYYYY
fontYYYY
text_styleYYYY
line_spaceYYYY
char_spaceYYYY
text_i18nNNYY
start_angleNNNN
end_angleNNNN
modeNNNN
radiusNNNN

光标与文本编辑​

API_LEVEL 4.0 开始支持。

以下方法通过 createWidget(widget.TEXT, Param) 返回的文本控件实例调用。使用前先调用 enableCursor(true) 启用光标功能。

enableCursor​

enableCursor(enable: boolean): void

启用或关闭文本光标。enable 为 true 时启用，为 false 时关闭。

getCursorPos​

getCursorPos(index: number): { x: number; y: number }

获取字符索引 index 对应的光标位置。返回值是坐标对象：

属性类型说明
xnumber相对于文本控件的横向偏移坐标
ynumber相对于文本控件的纵向偏移坐标

getCursorIndex​

getCursorIndex(x: number, y: number): number

根据坐标获取光标在文本中的字符索引。x、y 均为相对于文本控件的偏移坐标，与 getCursorPos 返回的坐标使用同一个坐标系。

getTextCount​

getTextCount(): number

获取文本的字符数量。

insertString​

insertString(index: number, str: string): void

在字符索引 index 处插入字符串 str。

deleteCharacter​

deleteCharacter(index: number): void

删除字符索引 index 处的一个字符。

getCursorHeight​

getCursorHeight(): number

获取光标高度，单位为像素。

getLineHeight​

getLineHeight(): number

获取文本行高，单位为像素。

光标与文本编辑示例​

以下示例先启用光标，再插入和删除文本，最后查询字符数量、光标位置及高度。

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

Page({
  build() {
    const text = createWidget(widget.TEXT, {
      x: 40,
      y: 120,
      w: 320,
      h: 160,
      color: 0xffffff,
      text_size: 28,
      align_h: align.LEFT,
      align_v: align.TOP,
      text_style: text_style.WRAP,
      text: 'Hello',
    })

    text.enableCursor(true)
    text.insertString(5, ', Zepp OS')
    text.deleteCharacter(5)

    // The text is now "Hello Zepp OS".
    console.log(text.getTextCount())

    const position = text.getCursorPos(0)
    console.log(position.x, position.y)
    console.log(text.getCursorIndex(position.x, position.y))
    console.log(text.getCursorHeight(), text.getLineHeight())
  },
})

代码示例​

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

补充示例​

示例 1​

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

createWidget(widget.TEXT, {
  x: 0,
  y: 0,
  w: 200,
  h: 200,
  text: 'hello',
  color: 0x34e073,
  align_h: align.LEFT,
  font: 'fonts/Pacifico-Regular.ttf',
})

示例 2​

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

const rootContainer = createWidget(widget.VIRTUAL_CONTAINER, {
  layout: { x: '10vw', y: '10vh', width: '80vw', height: '50vh' },
})

const groupRoot = createWidget(widget.GROUP, {
  parent: rootContainer,
  layout: {
    display: 'flex',
    'flex-flow': 'row wrap',
    'column-gap': '20',
    'row-gap': '10',
    'justify-content': 'space-evenly',
    'align-items': 'center',
    width: '100%',
    height: '100%',
  },
})

for (let i = 0; i < 3; i += 1) {
  groupRoot.createWidget(widget.TEXT, {
    text: 'hello zepp os',
    color: 0x34e073,
    align_v: align.CENTER_V,
    layout: {
      width: '30%',
      height: '25%',
      'font-size': '16',
    },
  })
}