按钮 - Button

按钮控件: button

按钮控件是一个特殊的文本控件，因此所有文本控件的函数的属性都适用于按钮控件。

除此之外，按钮控件有一些内置的样式，通过style属性设置，包括：

• Widget.AppCompat.Button.Colored 带颜色的按钮
• Widget.AppCompat.Button.Borderless 无边框按钮
• Widget.AppCompat.Button.Borderless.Colored 带颜色的无边框按钮

这些样式的具体效果参见"示例/界面控件/按钮控件.js"。

例如：<button text="漂亮的按钮"/>

按钮控件(APP自带例子)

"ui";

ui.layout(
    <vertical padding="16">
        <button text="普通按钮" w="auto"/>
        <button text="带颜色按钮" w="auto"/>
        <button text="无边框按钮" w="auto"/>
        <button text="无边框有颜色按钮" 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自带例子)

"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" 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 ~");

}