切换按钮（ToggleButton）

ToggleButton 类是一种可选中按钮，可以切换为开启（选中）或关闭（未选中）状态。

按钮组（ButtonGroup）

ButtonGroup 是一个互斥的按钮组，在组内任何时候只能有一个按钮处于选中状态。

单选按钮（RadioButton）

RadioButton 类是带有文本标签或者图标的单选按钮，通常用于让用户在“多选一”的场景中做出选择。

复选框（CheckBox）

CheckBox 类是带有文本标签或者图标的复选框，通常用于表示可以启用或禁用的功能，这些功能相互独立，不会互相影响。

事件

切换事件

当切换按钮的状态发生变化时，会触发 toggle 事件。

//  监听切换事件
toggleButton.bind('toggled', (event: ToggleEvent): void => {
    event.toggled; // 按钮状态发生变化。
});

按钮组的选择更改事件

当按钮组中任意一个按钮的状态发生变化时，会触发 selectionChanged 事件。

// 监听选择更改事件
buttonGroup.bind('selectionChanged', (): void => {
    const group = EventWatcher.sender as ButtonGroup;
    group.toggledButton; // 按钮状态发生变化。
});

示例代码

创建切换按钮

以下代码将创建切换按钮：

const desktop = Desktop.instance();
const hLayout = new FlexLayout(desktop);
hLayout.spacing = 6;

const buttonGroup = new ButtonGroup();
const button1 = new ToggleButton(hLayout, 'ToggleButton 1');
const button2 = new ToggleButton(hLayout, 'ToggleButton 2');
const button3 = new ToggleButton(hLayout, 'ToggleButton 3');
button1.group = buttonGroup;
button2.group = buttonGroup;
button3.group = buttonGroup;

创建单选按钮

如果需要创建单选按钮，可以使用以下代码：

const desktop = Desktop.instance();
const layout = new FlexLayout(desktop);
layout.spacing = 6;

const buttonGroup = new ButtonGroup();
const button1 = new RadioButton(layout, 'RadioButton 1');
const button2 = new RadioButton(layout, 'RadioButton 2');
const button3 = new RadioButton(layout, 'RadioButton 3');
button1.group = buttonGroup;
button2.group = buttonGroup;
button3.group = buttonGroup;
buttonGroup.toggledButton = button1;

创建复选框

如果需要创建复选框，可以使用以下代码：

const desktop = Desktop.instance();
const layout = new FlexLayout(desktop);
layout.spacing = 6;

const checkBox = new CheckBox(layout, 'CheckBox 1');
checkBox.toggled = true;
new CheckBox(layout, 'CheckBox 2');
new CheckBox(layout, 'CheckBox 3');