按钮 - Button
# 按钮控件: button
按钮控件是一个特殊的文本控件,因此所有文本控件的函数的属性都适用于按钮控件。
除此之外,按钮控件有一些内置的样式,通过`style`属性设置,包括:
* Widget.AppCompat.Button.Colored 带颜色的按钮
* Widget.AppCompat.Button.Borderless 无边框按钮
* Widget.AppCompat.Button.Borderless.Colored 带颜色的无边框按钮
这些样式的具体效果参见"示例/界面控件/按钮控件.js"。
例如:`<button style="Widget.AppCompat.Button.Colored" text="漂亮的按钮"/>`
## 按钮控件(APP自带例子)
```js
"ui";
ui.layout(
<vertical padding="16">
<button text="普通按钮" w="auto"/>
<button text="带颜色按钮" style="Widget.AppCompat.Button.Colored" w="auto"/>
<button text="无边框按钮" style="Widget.AppCompat.Button.Borderless" w="auto"/>
<button text="无边框有颜色按钮" style="Widget.AppCompat.Button.Borderless.Colored" w="auto"/>
<button text="长长的按钮" w="*"/>
<button id="click_me" text="点我" w="auto"/>
</vertical>
);
ui.click_me.on("click", ()=>{
toast("我被点啦");
});
ui.click_me.on("long_click", ()=>{
toast("我被长按啦");
});
```
## 自定义控件-带颜色按钮(APP自带例子)
```js
"ui";
var ColoredButton = (function() {
//继承ui.Widget
util.extend(ColoredButton, ui.Widget);
function ColoredButton() {
//调用父类构造函数
ui.Widget.call(this);
//自定义属性color,定义按钮颜色
this.defineAttr("color", (view, name, defaultGetter) => {
return this._color;
}, (view, name, value, defaultSetter) => {
this._color = value;
view.attr("backgroundTint", value);
});
//自定义属性onClick,定义被点击时执行的代码
this.defineAttr("onClick", (view, name, defaultGetter) => {
return this._onClick;
}, (view, name, value, defaultSetter) => {
this._onClick = value;
});
}
ColoredButton.prototype.render = function() {
return (
<button textSize="16sp" style="Widget.AppCompat.Button.Colored" w="auto"/>
);
}
ColoredButton.prototype.onViewCreated = function(view) {
view.on("click", () => {
if (this._onClick) {
eval(this._onClick);
}
});
}
ui.registerWidget("colored-button", ColoredButton);
return ColoredButton;
})();
ui.layout(
<vertical>
<colored-button text="第一个按钮" color="#ff5722"/>
<colored-button text="第二个按钮" onClick="hello()"/>
</vertical>
);
function hello() {
alert("Hello ~");
}
```