从零开始学习JavaFX(7)控件篇之Button

在上一节教程中,我们已经学习了如何在JavaFX中Label的一些用法。那么,在这一节中,我们将学习Button的用法。

创建Button

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图片

Image imageDecline = new Image(getClass().getResourceAsStream("not.png"));
Button button5 = new Button();
button5.setGraphic(new ImageView(imageDecline));

如下图所示:

主要是通过setGraphic来指定显示的图片。

设置Button状态

在使用按钮的时候,在鼠标移动上去,点击等等会表现出不同的状态。当然,我们可以通过CSS实现。不过默认的Button效果如上图所示。

我们下面来看看,如何用事件来实现自己的效果。

DropShadow shadow = new DropShadow();
//当鼠标移动到Button上时,增加一个阴影效果
button3.addEventHandler(MouseEvent.MOUSE_ENTERED, (MouseEvent e) -> {
    button3.setEffect(shadow);
});
 
//当鼠标离开Button时,移除阴影效果
button3.addEventHandler(MouseEvent.MOUSE_EXITED, (MouseEvent e) -> {
    button3.setEffect(null);
});

在上面的代码里,我们通过添加鼠标Enter和Exit事件来在鼠标移动到按钮上时增加阴影的效果。同理,想实现其他效果也可以这样。

效果图:

Button事件

很简单,同样是setOnAction。代码如下:

button2.setOnAction((ActionEvent e) -> {
    label.setText("Accepted");
});

Button样式

我们可以使用CSS来改变Button的样式,如下所示:

//将下面的代码添加到CSS文件中
.button1{
    -fx-font: 22 arial; 
    -fx-base: #b6e7c9;    
}
//将下面的代码添加到.java文件中
button1.getStyleClass().add("button1");

给Button增加了CSS样式,显示效果如下:

以上就是JavaFX中Button的基本用法了。我们下一节课再见。

发表评论

电子邮件地址不会被公开。