DOC-03-05 开关按钮(Toggle Button)

在这一章,你将学习ToggleButton类,它是JavaFX API中另一种可用的按钮。

两个或以上的Toggle Button可以组合在一个Group中,同时只有一个Toggle Button可以被选中,或者都无需选中。图5-1是在一个Group中组合了三个Toggle Button的应用程序屏幕截图。应用程序会根据选中的Toggle
Button
绘制一个特定颜色的矩形。

5-1 三个Toggle Button

3-5-1 toggle-buttons

创建一个Toggle Button

你可以使用ToggleButton 类中三个构造方法的任何一个来为你的应用程序创建一个Toggle Button,如例5-1所示。

5-1 创建Toggle Button

ToggleButton类是Labeled类的扩展,所以你可以为其指定一个文本标题、一个图像,或者同时指定二者。你可以通过Labeled类的setTextsetGraphic方法来为ToggleButton指定文本或者图像内容。

一旦你在你的代码中定义了多个Toggle Button,你可以将它们组合到一个Group中,并且设定一个特定的行为。

添加Toggle ButtonGroup

ToggleButton类的具体实现和RadioButton类非常相似。但是,和Radio Button不同的是,在一个组中并不试图强制选中至少一个Toggle Button。也就是说,点击一个选中状态的Toggle Button就会变为非选中状态,而点击一个组中选中状态的Radio Button则没有响应。

现在先花时间看一下代码片段例5-2

5-2 组合Toggle ButtonGroup

5-2创建了三个Toggle Button,并添加到了一个Toggle Group中。rb1 Toggle Button调用了setSelected方法,所以在应用程序启动时rb1是选中状态。但是你可以取消选中Minor Toggle

Button,以使应用程序启动时组中没有Toggle Button被选中,如图5-2

5-2 三个Toggle
Button
在一组

3-5-2 toggle-buttons-select

通常,你可以使用一组Toggle Button来为每个Button指定一个特定的行为。下一节会向你说明如何使用三个Toggle Button来改变一个矩形的颜色。

设置行为

ToggleButton类从Node类继承来的setUserData方法可以帮你为选中项关联一个特别的值。例5-3中,User Data 指示了应该使用哪种颜色来绘制矩形。

5-3 Toggle Button设置User Data

ChangeListener<Toggle>对象监听组中的选中项。如果没有Toggle Button被选中,矩形就绘制成白色。如果其中一个Toggle Button被选中,连续调用getSelectedTogglegetUserData方法会返回一个Color来绘制矩形。

例如,如果用户选中了tb2 Toggle ButtongetSelectedToggle().getUserData()方法将会返回Color.LIGHTBLUE,运行结果如图5-3

5-3 使用Toggle Button绘制Rectangle

3-5-3toggle-buttons-second

应用程序完整的代码见ToggleButtonSample.java文件。

Toggle Button设置样式

你可以为Toggle Button添加CSS样式来加强你的应用程序。在JavaFX应用程序中使用CSS和在HTML中使用类似,因为这两者都是基于相同的CSS规范。

首先,你要在ControlStyle.css 文件中为Toggle Button声明样式,如例5-4

5-4 Toggle Button声明不同的颜色

其次,在ToggleButtonSample 应用程序中启用这些样式,见例5-5中的实现。

5-5 Toggle Button启用CSS样式

当把这些代码添加到应用程序后,将会改变Toggle Button的显示效果,如图5-4

5-4 绘制Toggle Button

3-5-4 toggle-buttons-css

你可能想尝试一下ToggleButton 类的其他CSS属性,或者应用动画、变换以及其他JavaFX API中的可视化特效。

相关的API文档

    · ToggleButton

    · ToggleGroup

 

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/04/doc03_togglebutton/
百度已收录