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

不同类型的按钮

fx选项卡面板 java javafx按钮_前端

 

创建一个按钮

在JavaFX应用程序中有三种构造方法来创建Button控件，见例

例创建按钮

//一个空Button
Button button1 = new Button();
//一个指定了文本标题的Button
Button button2 = new Button("Accept");
//一个指定了文本标题和图标的Button
Image imageOk = new Image(getClass().getResourceAsStream("ok.png"));
Button button3 = new Button("Accept", new ImageView(imageOk));

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

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

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

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

例 为Button添加图标



Image imageDecline = new Image(getClass().getResourceAsStream("not.png"));


Button button5 = new Button();


button5.setGraphic(new ImageView(imageDecline));


运行这段代码，效果如图所示。

图带图标的Button

fx选项卡面板 java javafx按钮_html_02

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

 

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

图Button的几种状态

fx选项卡面板 java javafx按钮_html_03

添加Action

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

为Button定义Action



button2.setOnAction((ActionEvent e) -> {


label.setText("Accepted");


});



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

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

应用视觉特效

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

(DropShadow)特效。

添加DropShadow特效





DropShadow shadow = new DropShadow();


 


//当鼠标进入按钮时添加阴影特效


button3.addEventHandler(MouseEvent.MOUSE_ENTERED, (MouseEvent e) -> {


button3.setEffect(shadow);


});


 


//当鼠标离开按钮时移除阴影效果


button3.addEventHandler(MouseEvent.MOUSE_EXITED, (MouseEvent e) -> {


button3.setEffect(null);


});



 

运行这段代码，效果如图所示。

图带Drop Shadow特效的Button

fx选项卡面板 java javafx按钮_fx选项卡面板 java_04

 

 

为Button设置样式

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

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

为Button设置样式



// CSS文件中的代码


.button1{


-fx-font: 22 arial;


-fx-base: #b6e7c9;


}


 


// ButtonSample.java中的代码


button1.getStyleClass().add("button1");


 

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

使用CSS样式的Button

fx选项卡面板 java javafx按钮_html_05