冰狐智能辅助 QQ群6:909341206
首页
文档&下载
移动端
微服务
管理中心
社区
关于我们
登录/注册
视图(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。

属性-gravity

控件内容在控件中的位置。
  • left。靠左
  • right。靠右
  • top。靠顶部
  • bottom。靠底部
  • center。居中
  • center_vertical。垂直居中
  • center_horizontal。水平居中
<template>
    <linear>
        <text id="demo" width="matchParent" text="hello" gravity="right"/>
    </linear>
</template>

function main() {
    setupUI();
}

属性-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
<template>
    <linear>
        <text id="demo" width="100" height="100" text="hello" padding="10 20"/>
    </linear>
</template>

function main() {
    setupUI();
}

属性-margin

控件外边距，左、右、上、下四个都有。注意和padding属性区分开来，margin属性是View之间的间距，而padding是View和他自身内容的间距。注意单位为dp，不是像素。 支持三种设置方式
  • margin="20"。表示四个方向的margin都设置为20
  • margin="20 30"。表示上下方向的margin设置为20，左右方向的margin设置为30
  • margin="20 30 40 50"。按顺时针方向，上：20，右：30，下：40，左：50
<template>
    <linear>
        <text id="demo" width="100" height="100" text="hello" margin="10 20"/>
    </linear>
</template>

function main() {
    setupUI();
}

属性-backgroundColor

背景颜色，支持rgb格式颜色或者颜色名：red、white、black等 。 
<template>
    <linear>
        <text id="demo" text="hello" backgroundColor="#223344"/>
    </linear>
</template>

function main() {
    setupUI();
}

属性-visibility

View的可见性，该属性可以决定View是否显示出来。其值可以为：
  • gone。 不可见
  • visible。 可见
  • invisible。 不可见，但仍然占用位置
<template>
    <linear>
        <text id="demo" text="hello" visibility="gone"/>
    </linear>
</template>

function main() {
    setupUI();
}

事件-click

用户点击时会触发。 
<template>
    <linear>
        <button id="demo" text="hello" onClick="cbClick"/>
    </linear>
</template>

function main() {
    setupUI();
}

function cbClick()
    console.log('click');
}

事件-long click

用户长按时会触发。 
<template>
    <linear>
        <button id="demo" text="hello" onLongClick="cbLongClick"/>
    </linear>
</template>

function main() {
    setupUI();
}

function cbLongClick()
    console.log('long click');
}