PersimmonM setData
JS 调用 setData
接口对各个控件进行属性设置更改参数的格式。
-
控件共有属性
属性名 类型 描述 注解 id String 控件的唯一标示 保持整个页面唯一 hide Bool 控件是否隐藏 所有控件默认显示 position Object 控件位置 控件左上角坐标 refresh Bool 控件刷新 控件绘图, true
则更新屏幕显示,false
则不更新屏幕显示background Number 控件背景色 示例值ARGB,红色 0xFFFF0000
, 绿色0xFF00FF00
, 蓝色0xFF0000FF
background String 控件背景图片 示例值 bg.png
-
setData
设置更改共有属性示例属性名 示例代码 注解 id this.setData({Label : {id : 'label_id'}})
将 id
为Label
的控件的id
更改为label_id
hide this.setData({Label : {hide : true}})
将 id
为Label
的控件隐藏position this.setData({Label : {position : {x : 100, y : 100}}})
将 id
为Label
的控件的位置设置为x,y
为100,100
refresh this.setData({Label : {refresh : true}})
使 id
为Label
的控件刷新并更新屏幕显示background this.setData({Label : {background : 0xFF0000FF}})
使 id
为Label
的控件背景色设置为蓝色background this.setData({Label : {background : 'bg.png'}})
使 id
为Label
的控件背景设置为图片bg.png
font this.setData({Label : {font : {family : 'hz', size : 16}}})
将 id
为Label
的控件字体设置为hz
16 号字体,系统自带hz
asc
的 12 和 16 号字体
Label 控件
-
控件自有属性
属性名 类型 描述 注解 text String/Number Label 控件文本 Number 时会转换为 String -
setData
设置更改属性示例示例代码 注解 this.setData({label1 : 'label_text'})
将 id
为label1
的 Label 控件文本设置为label_text
this.setData({label1 : 1234})
将 id
为label1
的 Label 控件文本设置为1234
this.setData({label1 : {value : 'label_text'}})
将 id
为label1
的 Label 控件文本设置为label_text
this.setData({label1 : {value : 1234}})
将 id
为label1
的 Label 控件文本设置为1234
Button 控件
-
控件自有属性
属性名 类型 描述 注解 text String Button控件文本 norImg Object Button控件默认显示图片 downImg Object Button控件按下时显示图片 -
setData
设置更改属性示例示例代码 注解 this.setData({button1 : 'Button'})
将 id
为button1
的 Button 控件文本设置为Button
this.setData({button1 : {value : 'Button'}})
将 id
为button1
的 Button 控件文本设置为Button
this.setData({button1 : {norImg :'nor.png'}})
将 id
为button1
的 Button 控件默认显示图片设置为nor.png
this.setData({button1 : {downImg :'down.png'}})
将 id
为button1
的 Button 控件按下时显示图片设置为down.png
ImageBox 控件
-
控件自有属性
属性名 类型 描述 注解 image String ImageBox控件显示图片 -
setData
设置更改属性示例示例代码 注解 this.setData({imagebox1 : 'imagebox.png'})
将 id
为imagebox1
的 ImageBox 控件显示图片设置为imagebox.png
this.setData({imagebox1 : {value : 'imagebox.png'}})
将 id
为imagebox1
的 ImageBox 控件显示图片设置为imagebox.png
Checkbox 控件
-
控件自有属性
属性名 类型 描述 注解 select Bool Checkbox控件状态 true
为选中,false
为非选中auto Bool Checkbox控件状态变化自动绘图刷新 true
为状态变化自动绘图刷新,false
为状态变化不自动绘图刷新 -
setData
设置更改属性示例示例代码 注解 this.setData({checkbox1 : true})
将 id
为checkbox1
的 Checkbox 控件置为选中状态this.setData({checkbox1 : {value : true}})
将 id
为checkbox1
的 Checkbox 控件置为选中状态this.setData({ checkbox1 : {auto : false}})
将 id
为checkbox1
的 Checkbox 控件置为状态变换时不自己绘图刷新
Switch 控件
-
控件自有属性
属性名 类型 描述 注解 on Bool Switch控件状态 true
为打开状态,false
为关闭状态 -
setData
设置更改属性示例示例代码 注解 this.setData({switch1 : true})
将 id
为switch1
的 Switch 控件置为打开状态this.setData({switch1 : {value : true}})
将 id
为switch1
的 Switch 控件置为打开状态
Card 控件
-
控件自有属性
属性名 类型 描述 注解 showItem Number Card控件显示切换 显示项,值从 0
开始next Bool Card控件显示切换 值为 true
则切换到后一项,false
则切换到前一项prev Bool Card控件显示切换 值为 false
则切换到后一项,true
则切换到前一项 -
setData
设置更改属性示例示例代码 注解 this.setData({card1 : 1})
将 id
为card1
的 Card 控件的选中项置为 1,即第2项this.setData({card1 : {value : 1}})
将 id
为card1
的 Card 控件的选中项置为 1,即第2项this.setData({card1 : {next : true}})
将 id
为card1
的 Card 控件显示切换到下一项this.setData({card1 : {prev : true}})
将 id
为card1
的 Card 控件显示切换到前一项
DotIndicator 控件
-
控件自有属性
属性名 类型 描述 注解 selectDot Number DotIndicator控件选中点 值从 0
开始 -
setData
设置更改属性示例示例代码 注解 this.setData({dotIndicator1 : 1})
将 id
为dotIndicator1
的 DotIndicator 控件的选中点置为 1,即第2个点this.setData({dotIndicator1 : {value : 1}})
将 id
为dotIndicator1
的 DotIndicator 控件的选中点置为 1,即第2个点
ProgressBar 控件
-
控件自有属性
属性名 类型 描述 注解 progress Number ProgressBar控件进度值 ProgressBar 控件有最小值和最大值 -
setData
设置更改属性示例示例代码 注解 this.setData({progressBar1 : 60})
将 id
为progressBar1
的 ProgressBar 控件的进度值置为 60this.setData({progressBar1 : {value : 60}})
将 id
为progressBar1
的 ProgressBar 控件的进度值置为 60
Slider 控件
-
控件自有属性
属性名 类型 描述 注解 slider Number Slider控件当前值 Slider 控件有最小值和最大值 -
setData
设置更改属性示例示例代码 注解 this.setData({slider1 : 60})
将 id
为slider1
的 Slider 控件当前值置为 60this.setData({slider1 : {value : 60}})
将 id
为slider1
的 Slider 控件当前值置为 60
Numerical 控件
-
控件自有属性
属性名 类型 描述 注解 value Number Numerical控件当前值 -
setData
设置更改属性示例示例代码 注解 this.setData({numerical1 : 60})
将 id
为numerical1
的 Numerical 控件当前值置为 60this.setData({numerical1 : 60.06})
将 id
为numerical1
的 Numerical 控件当前值置为 60.06this.setData({numerical1 : {value : 60}})
将 id
为numerical1
的 Numerical 控件当前值置为 60
ListCtrl 控件
-
控件自有属性
属性名 类型 描述 注解 item Object ListCtrl控件列表条目 remove String ListCtrl控件列表条目移除 值对应条目 id
empty Bool ListCtrl控件列表清空 true
清空,false
不清空 -
setData
设置更改属性示例示例代码 注解 this.setData({listCtrl1 : {page: this, xml: 'list/list_item', items : [{Label : {id : 'label_id'}}]}})
往 id
为listCtrl1
的 ListCtrl 控件列表中添加一个item
,item
定义由list
中的自定义面板list_item.xml
决定,并将其中id
为Label
的控件的id
更改为label_id
this.setData({listCtrl1 : {remove : 'item1'}})
将 id
为listCtrl1
的 ListCtrl 控件列表中id
为item1
条目删除this.setData({listCtrl1 : {empty : true}})
将 id
为listCtrl1
的 ListCtrl 控件列表清空
AnimatedImage 控件
-
控件自有属性
属性名 类型 描述 注解 start Bool AnimatedImage控件启动图片播放 true
则启动,false
则无操作stop Bool AnimatedImage控件停止图片播放 true
则停止,false
则无操作pause Bool AnimatedImage控件暂停图片播放 true
则暂停,false
则无操作 -
setData
设置更改属性示例示例代码 注解 this.setData({animatedImage1 : 'start'})
使 id
为animatedImage1
的 AnimatedImage 控件启动图片播放this.setData({animatedImage1 : 'stop'})
使 id
为animatedImage1
的 AnimatedImage 控件停止图片播放this.setData({animatedImage1 : 'pause'})
使 id
为animatedImage1
的 AnimatedImage 控件暂停图片播放this.setData({animatedImage1 : {value : 'pause'}})
使 id
为animatedImage1
的 AnimatedImage 控件暂停图片播放
QRCode 控件
-
控件自有属性
属性名 类型 描述 注解 version Number 二维码纠错等级 范围 1 到 40 source String 二维码内容 -
setData
设置更改属性示例示例代码 注解 this.setData({QRCode : {version : 4, source : 'https://www.rt-thread.org/'}})
更新 id
为QRCode
的 QRCode 控件二维码内容
WheelImage 控件
-
控件自有属性
属性名 类型 描述 注解 select Number WheelImage控件当前选中项 值从 0
起,对应第一项 -
setData
设置更改属性示例示例代码 注解 this.setData({wheelImage1 : 1})
将 id
为wheelImage1
的 WheelImage 控件当前选中项置为第二项this.setData({wheelImage1 : {value : 1}})
将 id
为wheelImage1
的 WheelImage 控件当前选中项置为第二项
WheelString 控件
-
控件自有属性
属性名 类型 描述 注解 select Number WheelString控件当前选中项 值从 0
起,对应第一项 -
setData
设置更改属性示例示例代码 注解 this.setData({wheelString1 : 1})
将 id
为wheelString1
的 WheelString 控件当前选中项置为第二项this.setData({wheelString1 : {value : 1}})
将 id
为wheelString1
的 WheelString 控件当前选中项置为第二项
CircleProgress 控件
-
控件自有属性
属性名 类型 描述 注解 progress Number CircleProgress控件进度值 CircleProgress 控件有最小值和最大值 -
setData
设置更改属性示例示例代码 注解 this.setData({circleProgress1 : 60})
将 id
为circleProgress1
的 CircleProgress 控件的进度值置为 60this.setData({circleProgress1 : {value : 60}})
将 id
为circleProgress1
的 CircleProgress 控件的进度值置为 60
Panel 控件
-
控件自有属性
属性名 类型 描述 注解 custom Object Panel控件 自定义面板 -
setData
设置更改属性示例示例代码 注解 this.setData({panel1 : {page: this, xml: 'Panels/panel1'}})
往 id
为panel1
的 Panel 控件中加载自定义面板this.setData({panel1 : {page: this, item: 'Panels/panel1'}})
往 id
为panel1
的 Panel 控件中添加自定义面板
MultiTextBox 控件
-
控件自有属性
属性名 类型 描述 注解 text String MultiTextBox 控件文本 设置控件显示文本 clear bool MultiTextBox 控件文本清除 值为 true
时清空文本 -
setData
设置更改属性示例示例代码 注解 this.setData({MultiTextBox1 : 'MultiTextBox1'})
设置控件文本为 MultiTextBox1
this.setData({MultiTextBox1 : {clear : true}})
清空控件文本
Clock 控件
-
控件自有属性
属性名 类型 描述 注解 time Number Clock控件值 时间值单位秒 -
setData
设置更改属性示例示例代码 注解 this.setData({clock1 : 60})
设置控件的时间值置为 60 this.setData({clock1 : {value : 60}})
设置控件的时间值置为 60
Page 控件
-
setData
使用示例示例代码 注解 this.setData({page1 : {page: this, item: 'Panels/panel1'}})
往 id
为page1
的 Page 控件中添加自定义面板