DOC-03-03 按钮(Button)

JavaFX API中的Button类用来处理当用户点击一个按钮时执行一个动作(Action)Button类继承自Labeled类,它可以显示文本,图像,或两者兼而有之。图2-1显示了几个不同效果的按钮,在本章中你将学习如何创建这些类型的按钮。

3-1 不同类型的按钮

3-3-1 button-collections

创建一个按钮

JavaFX应用程序中有三种构造方法来创建Button控件,见例3-1

3-1 创建按钮

因为Button类继承自Labeled类,你可以使用以下方法来指定按钮的内容:

    ·setText(String text)method——指定文本

    ·setGraphic(Node graphic)method——指定图标

3-2展示了如何创建一个只有图标但没有文本的按钮。

3-2 Button添加图标

运行这段代码,效果如图3-2所示。

3-2 带图标的Button

3-3-2 decline-button

3-2和图3-2中,给按钮设置的图标是一个ImageView对象。然而你也可以使用其他图形对象。例如位于javafx.scene.shape 包中的各种形状。当为按钮同时设置了文本和图形内容时,可以使用setGraphicTextGap方法来设置它们之间的间距。

按钮的默认皮肤区分了以下几种显示状态。3-3显示了一个带图标按钮的几种默认状态。

3-3 Button的几种状态

3-3-3 button-states

添加Action

当鼠标点击按钮时,首要的功能就是执行一个Action。使用setOnAction的方法来定义当用户点击按钮时将发生什么。例3-3展示了为button2定义一个Action

3-3 Button定义Action

3-3展示了如何处理一个ActionEvent这样当用户点击button2时,一个Label的文本被设置为Accepted

你可以为一个Button设置多个事件处理方法,来执行特定的行为或添加视觉特效。

应用视觉特效

因为Button类继承自Node类,所以你可以为Button添加javafx.scene.effect包下的任何特效来增强视觉效果。例3-4onMouseEntered事件被触发时会向button3上添加阴影(DropShadow)特效

3-4添加DropShadow特效

 

运行这段代码,效果如3-4所示。

3-4Drop Shadow特效的Button

3-3-4 button-with-shadow

Button设置样式

接下来我们通过使用Skin类中定义的CSS样式来增强按钮的视觉外观。在JavaFX中使用CSS类似于在HTML中使用CSS,因为它们都基于相同的CSS规范。

你可以在一个单独的CSS样式文件中定义样式,然后通过getStyleClass方法在应用程序中使用它。该方法继承自Node类,并且在所有的UI控件中都可用3-5和图3-4展示了如何使用CSS及其运行结果。

3-5 Button设置样式

 

-fx-font属性设置了button1的字体名称和大小,-fx-base属性重设了按钮的默认颜色。运行这段代码,结果如3-5所示,button1的背景将变成浅绿色,并且字体会变得比默认字体更大。

3-5 使用CSS样式的Button

3-3-5 styled-button

相关的API文档

    · Button

    · Labeled

 

 
   

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