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 适配,否则默认为 100number2.0
h控件显示高度 注: 设为-1 则优先根据 normal_src 的 size 适配,否则默认为 40number2.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 控件属性时,需要传入必填字段 xywh(参考代码示例)

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