Widget

简介

Widget 控件,它是一个基础控件(所有窗口控件的基类空间),主要包括控件的基础属性。

控件属性:

属性名 类型 描述
id String 控件的唯一标示,需要保持整个页面中同级别控件 id 唯一
visible Bool 控件是否可视,控件默认可是,true 则控件可是,false 则控件不可是,与 hide 属性为同一机制
hide Bool 控件是否隐藏,控件默认不隐藏,true 则控件隐藏不可是,false 则控件不隐藏可是
position Object 控件位置,控件左上角坐标,相对于父级控件或页面左上角
size Object 控件大小,控件宽和高
rect Object 控件位置大小,控件左上角坐标(相对于页面左上角),以及控件宽和高
foreground Number 控件前景色,示例值ARGB,红色 0xFFFF0000, 绿色 0xFF00FF00, 蓝色 0xFF0000FF
background Number/String 控件背景色或图片,背景色示例值ARGB,红色 0xFFFF0000, 绿色 0xFF00FF00, 蓝色 0xFF0000FF,图片示例值 bg.png
textAlign String 控件文本对齐方式
font Number/Object 控件字体
gesture String 控件监听触摸手势
data Object 控件配置子控件属性,只对容器类型控件有效,相当于对容器子控件进行 setData 操作

setData

id

控件的唯一标示,主要用于修改控件 id

/* 配置 `Widget`  控件的 `id` 为 'newId' */
this.setData({Widget : {id : 'newId'}});

visible

控件是否可视,主要用于控件的显示与隐藏。

/* 配置 `Widget`  控件不可视 */
this.setData({Widget : {visible : false}});

/* 配置 `Widget`  控件可视 */
this.setData({Widget : {visible : true}});

hide

控件是否隐藏,主要用于控件的显示与隐藏。

/* 配置 `Widget`  控件不隐藏 */
this.setData({Widget : {hide : false}});

/* 配置 `Widget`  控件隐藏 */
this.setData({Widget : {hide : true}});

position

控件位置,主要用于修改控件的位置。

属性说明:

属性 类型 必填 说明
x Number 横坐标
y Number 纵坐标
/* 配置 `Widget`  控件横纵坐标 */
this.setData({Widget : {position : {x : 10, y : 10}}});

/* 配置 `Widget`  控件横坐标,纵坐标不变 */
this.setData({Widget : {position : {x : 20}}});

/* 配置 `Widget`  控件纵坐标,横坐标不变 */
this.setData({Widget : {position : {y : 20}}});

size

控件大小,主要用于修改控件的宽高。

属性说明:

属性 类型 必填 说明
width Number
height Number
/* 配置 `Widget`  控件宽和高 */
this.setData({Widget : {size : {width : 100, y : 50}}});

/* 配置 `Widget`  控件宽,高不变 */
this.setData({Widget : {size : {width : 100}}});

/* 配置 `Widget`  控件高,宽不变 */
this.setData({Widget : {size : {height : 50}}});

rect

控件位置大小,主要用于修改控件的宽高。

属性说明:

属性 类型 必填 说明
x Number 横坐标
y Number 纵坐标
width Number
height Number
/* 配置 `Widget`  控件位置以及宽和高 */
this.setData({Widget : {rect : {x : 10, y : 10, width : 100, y : 50}}});

foreground

控件前景色,主要用于配置文本显示颜色。

/* 配置 `Widget`  控件前景色,0xFF0000FF 蓝色 */
this.setData({Widget : {foreground : 0xFF0000FF}});

background

控件背景色或图片。

/* 配置 `Widget`  控件背景色,0xFF0000FF 蓝色 */
this.setData({Widget : {background : 0xFF0000FF}});

/* 配置 `Widget`  控件背景图 */
this.setData({Widget : {background : "bg.png"}});

textAlign

控件文本显示对齐方式。

ALIGN_NONE                    /* 默认对齐 */
ALIGN_LEFT                    /* 左对齐 */
ALIGN_RIGHT                   /* 右对齐 */
ALIGN_TOP                     /* 顶对齐 */
ALIGN_BOTTOM                  /* 底对齐 */
ALIGN_CENTER_HORIZONTAL       /* 左右居中 */
ALIGN_CENTER_VERTICAL         /* 上下居中 */
ALIGN_CENTER                  /* 居中对齐 */
ALIGN_TTF_SIZE                /* TTF 矢量字体基线对齐使能,仅对矢量字体有效 */
/* 配置 `Widget`  控件文本显示对齐方式,右对齐 */
this.setData({Widget : {textAlign : "ALIGN_RIGHT"}});

/* 配置 `Widget`  控件文本显示对齐方式,右下对齐 */
this.setData({Widget : {textAlign : "ALIGN_RIGHT | ALIGN_BOTTOM"}});

/* 配置 `Widget`  控件文本显示对齐方式,左右居中底对齐 */
this.setData({Widget : {textAlign : "ALIGN_BOTTOM | ALIGN_CENTER_HORIZONTAL"}});

font

修改控件字体。

属性说明:

属性 类型 必填 说明
family String 字体文件相对路径命或字体名
size Number 字号
/* 配置 `Widget`  控件控件字体 */
this.setData({Widget : {font : {family:"demo.ttf", size : 20}}});

/* 配置 `Widget`  控件字体字号 */
this.setData({Widget : {font : 30}});

gesture

修改控件监听触摸手势。

NONE                  /* 不监听 */
TAP                   /* 监听点击 */
LONGPRESS             /* 监听长按 */
DRAG_HORIZONTAL       /* 监听水平拖拽 */
DRAG_VERTICAL         /* 监听垂直拖拽 */
/* 配置 `Widget`  控件监听点击手势 */
this.setData({Widget : {gesture : "TAP"}});

/* 配置 `Widget`  控件监听点击和水平拖拽手势 */
this.setData({Widget : {gesture : "TAP | DRAG_HORIZONTAL"}});

/* 配置 `Widget`  控件不监听任何手势 */
this.setData({Widget : {gesture : "NONE"}});

data

配置子控件属性。

/* 配置 `Widget`  控件中子控件 `child` 的 `id` 属性 */
this.setData({Widget : {data : {child : {id : 'newId'}}}});
/* 功能类似 `this.setData({child : {id : 'newId'}});` */