ImageBox

简介

imageBox是图片盒控件，用于显示图片元素。不可缩放，控件大小将自动设定为图片的大小，但可以更改。

Sample

Sample实现根据Textbox控件修改ImageBox的显示图片

控件布局

在Page中加入Textbox并把bingchange属性设置为 onChage，再加入一个Imagebox，将其透明度设为0。

注：需要将图片加入图片库中

JS代码

onChange:function(event){
    //根据Textbox的文本内容，设定Imagebox的显示图片
    this.setData({imagebox1 : {value : event.detail.value + ".png", refresh : true});
},

效果

ImageBox属性

公共属性

• 控件类型

  默认 imagebox，且不可改动

• 透明度

  设置背景颜色的透明度，范围： 0 ~ 255。也可以在背景颜色中设定。

  注：当背景图片的设定不为空时，将自动设置为 0。

名称

• 控件名称

  设定控件的名称。

  在JS脚本中，可根据控件名称来指定控件，并对其进行设定或操作。

设计

• 控件锁定

  选项：True/False

  设定该控件是否锁定。

  如果设定值为True,则设计器中无法移动该控件。

• 是否隐藏控件

  选项：True/False

  设定该控件是否需要隐藏。

  如果设定值为True,设计器与实际效果都不会显示该控件及控件中的内容。

  当控件已隐藏时，可通过在工程管理器中点击来选中该控件。

图片

• 背景图片

  设定控件的背景图片，不支持缩放，且居中显示。

外观

• 背景颜色

  设定背景颜色，设定背景颜色的ARGB值。

  可打开颜色选择器，通过颜色选择器修改RGB值。

  Alpha值(即透明度)，可以直接修改设定值 或 修改透明度的值。背景颜色的透明度与属性透明度的值会自动保持一致。

• 图片

  设定在控件内显示的图片，图片大小为原始大小。当图片大小与控件大小不一致时，图片将居中或显示最中心的图片内容

位置属性

• x坐标点

  设定 控件的左上角 相对于 父控件的左上角 的横坐标。

• y坐标点

  设定 控件的左上角 相对于 父控件的左上角 的纵坐标。

• 高度

  设定控件的高度

• 宽度

  设定控件的宽度

setData

• 控件自有属性

  属性名	类型	描述
  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