JavaFX UI控件教程（六）之Toggle Button

翻译自 Toggle Button

在本章中，您将了解ToggleButton该类，这是通过JavaFX API提供的另一种类型的按钮。

可以将两个或多个切换按钮组合成一个组，其中一次只能选择一个按钮，或者不需要选择。图5-1是组合了三个切换按钮的应用程序的截屏。应用程序根据选择的切换按钮绘制具有特定颜色的矩形。

创建切换按钮

您可以使用ToggleButton该类的三个构造函数中的任何一个在应用程序中创建一个切换按钮，如例5-1所示。

//A toggle button without any caption or icon
ToggleButton tb1 = new ToggleButton();
//A toggle button with a text caption
ToggleButton tb2 = new ToggleButton("Press me");
//A toggle button with a text caption and an icon
Image image = new Image(getClass().getResourceAsStream("icon.png"));
ToggleButton tb3 = new ToggleButton ("Press me", new ImageView(image));

该ToggleButton班是的扩展Labeled类，因此你可以指定一个文本标题，图像，或两者图片和文字。您可以使用类的setText和setGraphic方法Labeled为切换按钮指定文本和图形内容。

在代码中定义了切换按钮后，可以将它们组合在一个组中并设置特定的行为。

将切换按钮添加到组

在实施ToggleButton类是非常相似的实现RadioButton类。但是，与单选按钮不同，切换组中的切换按钮不会尝试强制选择组中的至少一个按钮。也就是说，单击所选的切换按钮会使其取消选中，单击组中所选的单选按钮无效。

花点时间研究代码片段例5-2。

示例5-2组合组中的切换按钮

final ToggleGroup group = new ToggleGroup();ToggleButton tb1 = new ToggleButton("Minor");
tb1.setToggleGroup(group);
tb1.setSelected(true);ToggleButton tb2 = new ToggleButton("Major");
tb2.setToggleGroup(group);ToggleButton tb3 = new ToggleButton("Critical");
tb3.setToggleGroup(group);

例5-2创建了三个切换按钮并将它们添加到切换组。setSelected为tb1切换按钮调用该方法，以便在应用程序启动时选择该方法。但是，您可以取消选择“轻微”切换按钮，以便在启动时不在组中选择切换按钮，如图5-2所示。

图5-2组中的三个切换按钮

通常，您使用一组切换按钮为每个按钮指定特定行为。下一节将介绍如何使用这些切换按钮来更改矩形的颜色。

设置行为

该类从类setUserData继承的方法可帮助您将任何选定的选项与特定值相关联。在示例5-3中，用户数据指示应使用哪种颜色来绘制矩形。ToggleButtonNode

示例5-3设置切换按钮的用户数据

tb1.setUserData(Color.LIGHTGREEN);
tb2.setUserData(Color.LIGHTBLUE);
tb3.setUserData(Color.SALMON);final Rectangle rect = new Rectangle(145, 50);final ToggleGroup group = new ToggleGroup();
group.selectedToggleProperty().addListener(new ChangeListener<Toggle>(){public void changed(ObservableValue<? extends Toggle> ov,Toggle toggle, Toggle new_toggle) {if (new_toggle == null)rect.setFill(Color.WHITE);elserect.setFill((Color) group.getSelectedToggle().getUserData());}
});

该ChangeListener<Toggle>对象检查组中的选定切换。如果未选择任何切换按钮，则矩形将涂上白色。如果选择了其中一个切换按钮，则连续调用getSelectedToggle和getUserData方法将返回一种颜色以绘制矩形。

例如，如果用户选择tb2切换按钮，则setSelectedToggle().getUserData()呼叫返回Color.LIGHTBLUE。结果如图5-3所示。

图5-3使用切换按钮绘制矩形

请参阅ToggleButtonSample.java文件以检查应用程序的完整代码。

造型切换按钮

您可以通过将CSS样式应用于切换按钮来增强此应用程序。在JavaFX 2应用程序中使用CSS类似于在HTML中使用CSS，因为每种情况都基于相同的CSS规范。示例5-4使用该setStyle方法更改-fx-base切换按钮的CSS属性。

示例5-4将CSS样式应用于切换按钮

tb1.setStyle("-fx-base: lightgreen;");
tb2.setStyle("-fx-base: lightblue;");
tb3.setStyle("-fx-base: salmon;");

当添加到应用程序代码中时，这些行会更改切换按钮的可视外观，如图5-4所示。

图5-4绘制的切换按钮

您可能希望尝试ToggleButton该类的其他CSS属性，或应用JavaFX API中提供的动画，转换和视觉效果。

相关的API文档

ToggleButton
ToggleGroup