冰狐智能辅助
首页
文档&下载
移动端
微服务
社区
码农教程
管理中心
关于我们
登录/注册
视图(view)

视图介绍

视图（view）是所有控件及其布局的父控件，也就是说视图的所有属性其他控件和布局也具有。

属性-id

属性id，用来区分一个界面下的不同控件和布局，一个界面的id在同一个界面下通常是唯一的，也就是一般不存在两个View有相同的id。id属性也是连接xml布局和JavaScript代码的桥梁，在代码中可以通过一个View的id来获取到这个View，并对他进行操作(设置点击动作、设置属性、获取属性等)。例： 
<template>
    <text id="demo" text="hello"/>
</template>

function main() {
    setupUI();
    console.log(ui('demo').getText());
}
text控件的id为demo，在js中通过ui('demo')来获取控件，然后调用getText函数获取文本。

属性-width

控件宽，可以设置为数字（单位为dp）或者字符串。字符串可以取值：matchParent、wrapContent，分别表示使用父控件的宽、使用内容宽。 <template> <linear orientation="vertical"> <text text="hello" width="matchParent"/> <text text="hello world" width="100"/> </linear> </template> 第一个text控件宽为linear的宽，第二个text控件宽为100dp。

属性-height

控件高，可以设置为数字（单位为dp）或者字符串。字符串可以取值：matchParent、wrapContent，分别表示使用父控件的高、使用内容高。 <template> <linear orientation="horizontal"> <text text="hello" height="matchParent"/> <text text="hello world" height="100"/> </linear> </template> 第一个text控件高为linear的高，第二个text控件高为100dp。

属性-padding

控件内边距，左、右、上、下四个都有。注意和margin属性区分开来，margin属性是View之间的间距，而padding是View和他自身内容的间距。注意单位为dp，不是像素。 支持三种设置方式
  • padding="20"。表示四个方向的padding都设置为20
  • padding="20 30"。表示上下方向的padding设置为20，左右方向的padding设置为30
  • padding="20 30 40 50"。按顺时针方向，上：20，右：30，下：40，左：50
支持函数动态设置属性:view.setPadding({left: 3, right: 3, top: 5, bottom: 5}); 
<template>
    <linear>
        <text id="demo" width="100" height="100" text="hello" padding="10 20"/>
    </linear>
</template>

function main() {
    setupUI();
}

属性-layoutMargin

控件外边距，左、右、上、下四个都有。注意和padding属性区分开来，layoutMargin属性是View之间的间距，而padding是View和他自身内容的间距。注意单位为dp，不是像素。 支持三种设置方式
  • layoutMargin="20"。表示四个方向的layoutMargin都设置为20
  • layoutMargin="20 30"。表示上下方向的layoutMargin设置为20，左右方向的layoutMargin设置为30
  • layoutMargin="20 30 40 50"。按顺时针方向，上：20，右：30，下：40，左：50
支持函数动态设置属性:view.setMargin({left: 3, right: 3, top: 5, bottom: 5}); 
<template>
    <linear>
        <text id="demo" width="100" height="100" text="hello" layoutMargin="10 20"/>
    </linear>
</template>

function main() {
    setupUI();
}

属性-backgroundColor

背景颜色，支持rgb格式颜色(#AARRGGBB, #RRGGBB)或者颜色名：red、white、black等 。 支持两种设置方式，1.在template中直接设置；2.使用函数动态设置。 
<template>
    <linear>
        <text id="demo" text="hello" backgroundColor="#223344"/>
    </linear>
</template>

function main() {
    setupUI();
}

function onUIResume() {
    ui('demo').setBackgroundColor('red');
}

属性-backgroundImage

背景图片，支持网络、本地图片和asset格式，asset图片可以在定制app中上传图片后使用。 支持两种设置方式，1.在template中直接设置；2.使用函数动态设置。 
<template>
    <linear>
        <text id="demo1" text="hello" backgroundImage="asset:logo1.png"/>
        <text id="demo2" text="hello" backgroundImage="https://www.baidu.com/img/bd_logo.png"/>
        <text id="demo3" text="hello" backgroundImage="logo3.png"/>
    </linear>
</template>

function main() {
    setupUI();
}

function onUIResume() {
    ui('demo1').setBackgroundImage('asset:logo.png');
}

属性-visibility

View的可见性，该属性可以决定View是否显示出来。其值可以为：
  • gone。 不可见
  • visible。 可见
  • invisible。 不可见，但仍然占用位置
支持两种设置方式，1.在template中直接设置；2.使用函数动态设置。 
<template>
    <linear>
        <text id="demo" text="hello" visibility="gone"/>
    </linear>
</template>

function main() {
    setupUI();
}

function onUIResume() {
    ui('demo').setVisibility('visible');
}

click事件

用户点击时会触发。系统会自动传递控件id给事件处理函数 
<template>
    <linear>
        <button id="demo" text="hello" onClick="onClick"/>
    </linear>
</template>

function main() {
    setupUI();
}

function onClick(id)
    console.log('click:', id);
}

事件-long click

用户长按时会触发。系统会自动传递控件id给事件处理函数 
<template>
    <linear>
        <button id="demo" text="hello" onLongClick="onLongClick"/>
    </linear>
</template>
function main() {
    setupUI();
}

function onLongClick(id)
    console.log('long click:', id);
}

函数-setBackgroundColor

设置控件背景颜色，返回Node。
参数：
参数名 类型 必填 说明
color string 必填 颜色，支持rgb格式颜色(#AARRGGBB, #RRGGBB)或者颜色名：red、white、black等 。 
<template>
    <linear>
        <text id="demo" text="hello" backgroundColor="#223344"/>
    </linear>
</template>

function main() {
    setupUI();
}

function onUIResume() {
    ui('demo').setBackgroundColor('#ff0000')
}

函数-setBackgroundImage

设置控件背景图片，返回Node。
参数：
参数名 类型 必填 说明
imgSrc string 必填 背景图片,支持网络、本地图片和asset格式，asset图片可以在定制app中上传图片后使用。 
<template>
    <linear>
        <text id="demo" text="hello"/>
    </linear>
</template>

function main() {
    setupUI();
}

function onClick(event) {
    ui('demo').setBackgroundImage('/sdcard/bg.png')
//    ui('demo').setBackgroundImage('asset:logo1.png')
//    ui('demo').setBackgroundImage('https://www.baidu.com/img/bd_logo.png')
}

函数-setVisibility

设置控件是否可见，返回Node。
参数：
参数名 类型 必填 说明
visibility string 必填 可见属性，支持visible（可见）， invisible（不可见，但仍然占用位置）， gone（不可见） 
<template>
    <linear>
        <text id="demo" text="hello" visibility="gone"/>
    </linear>
</template>

function main() {
    setupUI();
}

function onUIResume() {
    ui('demo').setVisible('gone')
}

函数-setPadding

设置padding，返回Node。
参数：
参数名 类型 必填 说明
padding JS Object 必填 可以设置一个或者多个值{left:10, top: 10, right: 10, bottom: 10}，单位为dp，不是px 
<template>
    <linear>
        <text id="demo" text="hello"/>
    </linear>
</template>

function main() {
    setupUI();
}

function onUIResume() {
    ui('demo').setPadding({left: 10})
}

函数-setMargin

设置margin，返回Node。
参数：
参数名 类型 必填 说明
margin JS Object 必填 可以设置一个或者多个值{left:10, top: 10, right: 10, bottom: 10}，单位为dp，不是px 
<template>
    <linear>
        <text id="demo" text="hello"/>
    </linear>
</template>

function main() {
    setupUI();
}

function onUIResume() {
    ui('demo').setMargin({left: 10})
}

函数-on

绑定控件的事件，返回Node。
参数：
参数名 类型 必填 说明
eventType string 必填 支持click, selected等所有控件的事件
function FunctionSentence 必填 事件函数 
<template>
    <linear>
        <button id="demo" text="hello" />
    </linear>
</template>

function main() {
    setupUI();
    ui('demo').on('click', onClick)
}

function onClick() {
    console.log('click');
}

函数-off

解除绑定控件的事件，返回Node。
参数：
参数名 类型 必填 说明
eventType string 必填 支持click, selected等所有控件的事件 
<template>
    <linear>
        <button id="demo" text="hello" />
    </linear>
</template>

function main() {
    setupUI();
}

function onUIResume() {
    ui('demo').on('click', onClick)
}

function onUIPause() {
    ui('demo').off('click')
}

function onClick() {
    console.log('click');
}