Skip to main content
版本：v3

BUTTON

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

button_sample

按钮控件支持设置正常态和按压态的颜色或者图片。

创建 UI 控件​

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

const button = createWidget(widget.BUTTON, Param)

类型​

Param: object​

属性说明是否必须类型API_LEVEL
x控件 x 坐标是number2.0
y控件 y 坐标是number2.0
w控件显示宽度 注: 设为-1 则优先根据 normal_src 的 size 适配，否则默认为 100是number2.0
h控件显示高度 注: 设为-1 则优先根据 normal_src 的 size 适配，否则默认为 40是number2.0
text按钮显示的文本否string2.0
color文本颜色否number2.0
text_size文本字体大小否number2.0
normal_color正常状态的背景色，需要与 press_color 同时设置才能生效否number2.0
press_color按压时显示的背景色，需要与 normal_color 同时设置才能生效否number2.0
radius使用颜色作为按钮背景时的圆角否number2.0
normal_src正常状态的背景图，需要与 press_src 同时设置才能生效否string2.0
press_src按压时显示的背景图，需要与 normal_src 同时设置才能生效否string2.0
click_func点击按钮的回调否ClickFunc2.0
longpress_func长按（700ms）按钮的回调否ClickFunc2.0
font字体路径，资源存放路径参考 目录结构否string3.6
警告
  • 当按钮的背景和颜色都没有设置的时候，会使用默认的点击态背景色（正常黑色 点击灰色）
  • 当按钮的背景和颜色都设置时会优先使用背景色而不是背景图
  • radius 字段只有在设置背景色之后才有用
  • 背景色 normal_color 与按压背景色 press_color 需要同时设置才能生效
  • 背景色 normal_src 与按压背景色 press_color 需要同时设置才能生效
  • 在使用 widget.setProperty API 修改 BUTTON 控件属性时，需要传入必填字段 x、y、w、h（参考代码示例）

ClickFunc​

(button: Button) => void

createWidget 方法创建的 button 实例

代码示例​

提示

代码示例中的图片资源请参考 设计资源

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

Page({
  build() {
    const img_button = createWidget(widget.BUTTON, {
      x: (480 - 96) / 2,
      y: 120,
      text: 'Hello',
      w: -1,
      h: -1,
      normal_src: 'button_normal.png',
      press_src: 'button_press.png',
      click_func: () => {
        console.log('button click')
      }
    })

    createWidget(widget.BUTTON, {
      x: (480 - 400) / 2,
      y: 240,
      w: 400,
      h: 100,
      radius: 12,
      normal_color: 0xfc6950,
      press_color: 0xfeb4a8,
      text: 'Hello',
      click_func: (button_widget) => {
        button_widget.setProperty(prop.MORE, {
          x: (480 - 400) / 2,
          y: 300,
          w: 400,
          h: 100
        })
      }
    })
  }
})