按钮（Button）

Button 按钮是图形用户界面中最常用的控件之一，任何按钮都可以显示为文本和图标的组合。

点击按钮可以命令计算机执行某些操作，或回答某个问题。常见的按钮包括 确定（OK）、应用（Apply）、取消（Cancel）、关闭（Close）、是（Yes）、否（No） 和 帮助（Help）。

在普通按钮之外，我们库中还提供了另外两种特殊功能的按钮，即RepeatButton（重复按钮）和FileButton（文件按钮）。

RepeatButton（重复按钮）

RepeatButton 主要用于在用户按住按钮时连续触发点击事件，适用于需要连续触发事件的场景。

FileButton（文件按钮）

FileButton用于打开系统文件对话框。通过更改 multiple 属性，可以选择多个文件。通过设置 directory 属性，可以选择文件夹。

事件

点击事件

当用户点击按钮时会触发 click 事件。

// 监听点击事件
button.bind('clicked', (event: ClickEvent): void => {
    event.point; // 鼠标指针相对于页面左上角的位置。
});

重复事件

对于重复按钮，当按钮被按下时，会以一定的时间间隔触发 repeat 事件。

repeatButton.bind('repeated', (): void => {
    // 重复事件会被连续触发。
});

文件更改事件

对于文件按钮，当用户选择文件时会触发 fileChanged 事件。

// 监听文件更改事件
fileButton.bind('fileChanged', (event: FileChangeEvent): void => {
    event.files; // 文件列表
});

示例代码

创建一个按钮

以下代码将创建一个按钮：

const desktop = Desktop.instance();
new Button(desktop, 'Button', 'cube_32.png');

创建一个带有大图标的按钮

如果需要创建一个带有大图标的按钮，可以使用以下代码：

const desktop = Desktop.instance();
const button = new Button(desktop, 'Large Button', 'cube_32.png');
button.mode = Button.Text | Button.LargeIcon;
button.height = 48;

设置文本和图标为垂直布局

您还可以将按钮的文本和图标设置为垂直布局：

const desktop = Desktop.instance();
const button = new Button(desktop, 'Large Button', 'cube_32.png');
button.mode = Button.Vertical | Button.Text | Button.LargeIcon;