tt.createInteractiveButton
收藏
我的收藏

基础库 2.46.0 开始支持此方法，这是一个异步方法

该方法创建一个 Native 按钮，位于小游戏层级最上面，覆盖在小游戏 Canvas 画布上。通过该方法创建的按钮在录屏时，不会被采集进录屏画面。开发者可以通过创建此类按钮，优化录屏效果，减少录屏画面的元素内容

语法

tt.createInteractiveButton(options);

参数说明

options 为 object 类型，属性如下：

属性名	类型	默认值	必填	说明	最低支持版本
type	string	text	是	按钮类型： text 、 image	2.46.0
text	string		按钮类型为 text，这个字段必须填	按钮上显示的文本	2.46.0
image	string		按钮类型为 image ，这个字段必填	按钮上显示图片的路径，可以接受网络地址，本地 ttfile:// 协议地址，以及相对路径	2.46.0
style	object		是	设置按钮的大小，位置，字体，颜色等属性	2.46.0
success	function		否	接口调用成功的回调函数	2.46.0
fail	function		否	接口调用失败的回调函数	2.46.0

style 属性

属性名	类型	默认值	必填	说明	最低支持版本
left	number	20	是	x 轴坐标	2.46.0
top	number	40	是	y 轴坐标	2.46.0
width	number	150	是	宽度	2.46.0
height	number	40	是	高度	2.46.0
lineHeight	number	40	是	多行文本的间距	2.46.0
backgroundColor	string	#ffffff	是	背景颜色	2.46.0
textAlign	string	center	是	文本对齐方式：left，center 和 right	2.46.0
fontSize	number	16	是	字体大小	2.46.0
borderRadius	number	4	是	边框圆角	2.46.0
borderColor	string	#ffffff	是	边框颜色	2.46.0
borderWidth	number	1	是	边框宽度	2.46.0
textColor	string	#ffffff	是	字体颜色	2.46.0

回调成功

回调参数为 InteractiveButton类型，属性如下：

属性	类型	说明	最低支持版本
buttonid	string	按钮的唯一 ID，用来区别多个 button 的场景	2.46.0
InteractiveButton.show	function	显示交互按钮	2.46.0
InteractiveButton.hide	function	隐藏交互按钮	2.46.0
InteractiveButton.destroy()	function	销毁按钮	2.46.0
InteractiveButton.onTap	function	注册点击事件的回调函数	2.46.0
InteractiveButton.offTap	function	注销点击事件的回调函数	2.46.0

回调失败

object 类型，属性如下：

属性	类型	说明	最低支持版本
errMsg	string	"createInteractiveButton:fail " + 错误详情	2.46.0

扫码体验

请使用字节宿主APP扫码

代码示例

let params = {
  type: "text",
  text: "text button",
  style: {
    left: 100,
    top: 100,
    width: 200,
    height: 20,
    textColor: "#111111",
  },
  success(button) {
    function button_tap(res) {
      logger.log("button_tap:" + res.buttonid);
      // button.hide();
      // button.offTap(button_tap);
      // button.destroy();
    }
    button.onTap(button_tap);
  },
  fail(res) {
    console.log("创建失败", res.errMsg);
  },
};
tt.createInteractiveButton(params);

Bug & Tip

按钮不使用时，务必调用 destroy() 释放资源，destroy() 会自动移除监听事件

下一篇：常见问题

tt.createInteractiveButton收藏我的收藏

语法

参数说明

style 属性

回调成功

回调失败

扫码体验

代码示例

Bug & Tip

tt.createInteractiveButton
收藏
我的收藏