视图(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();
    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();
    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();
    ui('demo1').setVisibility('visible');
}

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');
}