按钮 - 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 ~"); } ```