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 控件的进度值置为 60
  this.setData({progressBar1 : {value : 60}})	将 id 为 progressBar1 的 ProgressBar 控件的进度值置为 60

Slider 控件

• 控件自有属性

  属性名	类型	描述	注解
  slider	Number	Slider控件当前值	Slider 控件有最小值和最大值

• setData 设置更改属性示例

  示例代码	注解
  this.setData({slider1 : 60})	将 id 为 slider1 的 Slider 控件当前值置为 60
  this.setData({slider1 : {value : 60}})	将 id 为 slider1 的 Slider 控件当前值置为 60

Numerical 控件

• 控件自有属性

  属性名	类型	描述	注解
  value	Number	Numerical控件当前值

• setData 设置更改属性示例

  示例代码	注解
  this.setData({numerical1 : 60})	将 id 为 numerical1 的 Numerical 控件当前值置为 60
  this.setData({numerical1 : 60.06})	将 id 为 numerical1 的 Numerical 控件当前值置为 60.06
  this.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 控件的进度值置为 60
  this.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 控件中添加自定义面板

Qestion && Feedback