跳转至

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'}}) idLabel 的控件的 id 更改为 label_id
    hide this.setData({Label : {hide : true}}) idLabel 的控件隐藏
    position this.setData({Label : {position : {x : 100, y : 100}}}) idLabel 的控件的位置设置为 x,y100,100
    refresh this.setData({Label : {refresh : true}}) 使 idLabel 的控件刷新并更新屏幕显示
    background this.setData({Label : {background : 0xFF0000FF}}) 使 idLabel 的控件背景色设置为蓝色
    background this.setData({Label : {background : 'bg.png'}}) 使 idLabel 的控件背景设置为图片 bg.png
    font this.setData({Label : {font : {family : 'hz', size : 16}}}) idLabel 的控件字体设置为 hz 16 号字体,系统自带 hz asc 的 12 和 16 号字体

Label 控件

  • 控件自有属性

    属性名 类型 描述 注解
    text String/Number Label 控件文本 Number 时会转换为 String
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({label1 : 'label_text'}) idlabel1 的 Label 控件文本设置为 label_text
    this.setData({label1 : 1234}) idlabel1 的 Label 控件文本设置为 1234
    this.setData({label1 : {value : 'label_text'}}) idlabel1 的 Label 控件文本设置为 label_text
    this.setData({label1 : {value : 1234}}) idlabel1 的 Label 控件文本设置为 1234

Button 控件

  • 控件自有属性

    属性名 类型 描述 注解
    text String Button控件文本
    norImg Object Button控件默认显示图片
    downImg Object Button控件按下时显示图片
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({button1 : 'Button'}) idbutton1 的 Button 控件文本设置为 Button
    this.setData({button1 : {value : 'Button'}}) idbutton1 的 Button 控件文本设置为 Button
    this.setData({button1 : {norImg :'nor.png'}}) idbutton1 的 Button 控件默认显示图片设置为 nor.png
    this.setData({button1 : {downImg :'down.png'}}) idbutton1 的 Button 控件按下时显示图片设置为 down.png

ImageBox 控件

  • 控件自有属性

    属性名 类型 描述 注解
    image String ImageBox控件显示图片
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({imagebox1 : 'imagebox.png'}) idimagebox1 的 ImageBox 控件显示图片设置为 imagebox.png
    this.setData({imagebox1 : {value : 'imagebox.png'}}) idimagebox1 的 ImageBox 控件显示图片设置为 imagebox.png

Checkbox 控件

  • 控件自有属性

    属性名 类型 描述 注解
    select Bool Checkbox控件状态 true 为选中,false 为非选中
    auto Bool Checkbox控件状态变化自动绘图刷新 true 为状态变化自动绘图刷新,false 为状态变化不自动绘图刷新
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({checkbox1 : true}) idcheckbox1 的 Checkbox 控件置为选中状态
    this.setData({checkbox1 : {value : true}}) idcheckbox1 的 Checkbox 控件置为选中状态
    this.setData({ checkbox1 : {auto : false}}) idcheckbox1 的 Checkbox 控件置为状态变换时不自己绘图刷新

Switch 控件

  • 控件自有属性

    属性名 类型 描述 注解
    on Bool Switch控件状态 true 为打开状态,false 为关闭状态
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({switch1 : true}) idswitch1 的 Switch 控件置为打开状态
    this.setData({switch1 : {value : true}}) idswitch1 的 Switch 控件置为打开状态

Card 控件

  • 控件自有属性

    属性名 类型 描述 注解
    showItem Number Card控件显示切换 显示项,值从 0 开始
    next Bool Card控件显示切换 值为 true 则切换到后一项,false 则切换到前一项
    prev Bool Card控件显示切换 值为 false 则切换到后一项,true 则切换到前一项
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({card1 : 1}) idcard1 的 Card 控件的选中项置为 1,即第2项
    this.setData({card1 : {value : 1}}) idcard1 的 Card 控件的选中项置为 1,即第2项
    this.setData({card1 : {next : true}}) idcard1 的 Card 控件显示切换到下一项
    this.setData({card1 : {prev : true}}) idcard1 的 Card 控件显示切换到前一项

DotIndicator 控件

  • 控件自有属性

    属性名 类型 描述 注解
    selectDot Number DotIndicator控件选中点 值从 0 开始
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({dotIndicator1 : 1}) iddotIndicator1 的 DotIndicator 控件的选中点置为 1,即第2个点
    this.setData({dotIndicator1 : {value : 1}}) iddotIndicator1 的 DotIndicator 控件的选中点置为 1,即第2个点

ProgressBar 控件

  • 控件自有属性

    属性名 类型 描述 注解
    progress Number ProgressBar控件进度值 ProgressBar 控件有最小值和最大值
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({progressBar1 : 60}) idprogressBar1 的 ProgressBar 控件的进度值置为 60
    this.setData({progressBar1 : {value : 60}}) idprogressBar1 的 ProgressBar 控件的进度值置为 60

Slider 控件

  • 控件自有属性

    属性名 类型 描述 注解
    slider Number Slider控件当前值 Slider 控件有最小值和最大值
  • setData 设置更改属性示例

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

Numerical 控件

  • 控件自有属性

    属性名 类型 描述 注解
    value Number Numerical控件当前值
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({numerical1 : 60}) idnumerical1 的 Numerical 控件当前值置为 60
    this.setData({numerical1 : 60.06}) idnumerical1 的 Numerical 控件当前值置为 60.06
    this.setData({numerical1 : {value : 60}}) idnumerical1 的 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'}}]}}) idlistCtrl1 的 ListCtrl 控件列表中添加一个 itemitem 定义由 list 中的自定义面板 list_item.xml 决定,并将其中 idLabel 的控件的 id 更改为 label_id
    this.setData({listCtrl1 : {remove : 'item1'}}) idlistCtrl1 的 ListCtrl 控件列表中 iditem1 条目删除
    this.setData({listCtrl1 : {empty : true}}) idlistCtrl1 的 ListCtrl 控件列表清空

AnimatedImage 控件

  • 控件自有属性

    属性名 类型 描述 注解
    start Bool AnimatedImage控件启动图片播放 true 则启动,false 则无操作
    stop Bool AnimatedImage控件停止图片播放 true 则停止,false 则无操作
    pause Bool AnimatedImage控件暂停图片播放 true 则暂停,false 则无操作
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({animatedImage1 : 'start'}) 使 idanimatedImage1 的 AnimatedImage 控件启动图片播放
    this.setData({animatedImage1 : 'stop'}) 使 idanimatedImage1 的 AnimatedImage 控件停止图片播放
    this.setData({animatedImage1 : 'pause'}) 使 idanimatedImage1 的 AnimatedImage 控件暂停图片播放
    this.setData({animatedImage1 : {value : 'pause'}}) 使 idanimatedImage1 的 AnimatedImage 控件暂停图片播放

QRCode 控件

  • 控件自有属性

    属性名 类型 描述 注解
    version Number 二维码纠错等级 范围 1 到 40
    source String 二维码内容
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({QRCode : {version : 4, source : 'https://www.rt-thread.org/'}}) 更新 idQRCode 的 QRCode 控件二维码内容

WheelImage 控件

  • 控件自有属性

    属性名 类型 描述 注解
    select Number WheelImage控件当前选中项 值从 0 起,对应第一项
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({wheelImage1 : 1}) idwheelImage1 的 WheelImage 控件当前选中项置为第二项
    this.setData({wheelImage1 : {value : 1}}) idwheelImage1 的 WheelImage 控件当前选中项置为第二项

WheelString 控件

  • 控件自有属性

    属性名 类型 描述 注解
    select Number WheelString控件当前选中项 值从 0 起,对应第一项
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({wheelString1 : 1}) idwheelString1 的 WheelString 控件当前选中项置为第二项
    this.setData({wheelString1 : {value : 1}}) idwheelString1 的 WheelString 控件当前选中项置为第二项

CircleProgress 控件

  • 控件自有属性

    属性名 类型 描述 注解
    progress Number CircleProgress控件进度值 CircleProgress 控件有最小值和最大值
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({circleProgress1 : 60}) idcircleProgress1 的 CircleProgress 控件的进度值置为 60
    this.setData({circleProgress1 : {value : 60}}) idcircleProgress1 的 CircleProgress 控件的进度值置为 60

Panel 控件

  • 控件自有属性

    属性名 类型 描述 注解
    custom Object Panel控件 自定义面板
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({panel1 : {page: this, xml: 'Panels/panel1'}}) idpanel1 的 Panel 控件中加载自定义面板
    this.setData({panel1 : {page: this, item: 'Panels/panel1'}}) idpanel1 的 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'}}) idpage1 的 Page 控件中添加自定义面板

评论