JavaFX UI控件教程（四）之Button

翻译自  Button

Button通过JavaFX API提供的类使开发人员能够在用户单击按钮时处理操作。该Button班是的扩展Labeled类。它可以显示文本，图像或两者。图3-1显示了具有各种效果的按钮。在本章中，您将学习如何创建这些按钮类型。

图3-1按钮类型

 

创建一个按钮

您可以Button使用Button类的三个构造函数在JavaFX应用程序中创建控件，如示例3-1所示。

示例3-1创建按钮

//A button with an empty text caption.
Button button1 = new Button();
//A button with the specified text caption.
Button button2 = new Button("Accept");
//A button with the specified text caption and icon.
Image imageOk = new Image(getClass().getResourceAsStream("ok.png"));
Button button3 = new Button("Accept", new ImageView(imageOk));

因为Button类扩展了Labeled类，所以可以使用以下方法为没有图标或文本标题的按钮指定内容：

• 该setText(String text)方法-指定按钮上的文本标题

• 所述setGraphic(Node graphic)方法-指定图形图标

示例3-2显示了如何创建带图标但没有文本标题的按钮。

示例3-2向按钮添加图标

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

添加到应用程序后，此代码片段将生成如图3-2所示的按钮。

图3-2带图标的按钮

在例3-2和图3-2中，图标是一个ImageView对象。但是，您可以使用其他图形对象，例如，包含在javafx.scene.shape包中的形状。为按钮定义文本和图形内容时，可以使用该setGraphicTextGap方法设置它们之间的间隙。

Button该类的默认外观区分按钮的以下可视状态。图3-3显示了带图标的按钮的默认状态。

图3-3按钮状态

 

分配动作

每个按钮的主要功能是在单击时生成动作。使用类的setOnAction方法Button来定义用户单击按钮时将发生的情况。示例3-3显示了定义button2操作的代码片段。

示例3-3定义按钮的操作

button2.setOnAction(new EventHandler() {
    @Override public void handle(ActionEvent e) {
        label.setText("Accepted");
    }
});

ActionEvent是由...处理的事件类型EventHandler。一个EventHandler对象提供了handle以处理烧制一个按钮的操作方法。示例3-3显示了如何覆盖该handle方法，以便当用户按下button2时，标签的文本标题设置为“已接受”。

您可以使用Button该类设置所需数量的事件处理方法，以引起特定行为或应用视觉效果。

应用效果

因为Button类扩展了Node类，所以可以应用javafx.scene.effect包中的任何效果来增强按钮的视觉外观。在示例3-4中，DropShadow当onMouseEntered事件发生时，效果应用于button3 。

示例3-4应用DropShadow效果

DropShadow shadow = new DropShadow();
//Adding the shadow when the mouse cursor is on
button3.addEventHandler(MouseEvent.MOUSE_ENTERED, 
    new EventHandler() {
        @Override public void handle(MouseEvent e) {
            button3.setEffect(shadow);
        }
});
//Removing the shadow when the mouse cursor is off
button3.addEventHandler(MouseEvent.MOUSE_EXITED, 
    new EventHandler() {
        @Override public void handle(MouseEvent e) {
            button3.setEffect(null);
        }
});

图3-4显示了当鼠标光标在其上时以及何时关闭时按钮3的状态。

图3-4带投影的按钮

 

造型按钮

增强按钮视觉外观的下一步是应用由Skin类定义的CSS样式。在JavaFX 2应用程序中使用CSS类似于在HTML中使用CSS，因为每种情况都基于相同的CSS规范。

您可以在单独的CSS文件中定义样式，并使用该setStyleClass方法在应用程序中启用它们。此方法继承自Node该类，可用于所有UI控件。或者，您可以使用该setStyle方法直接在代码中定义按钮的样式。例3-5和图3-4说明了后一种方法。

示例3-5设置按钮样式

button1.setStyle("-fx-font: 22 arial; -fx-base: #b6e7c9;");

该-fx-font-size属性设置button1的字体大小。该-fx-base属性会覆盖应用于按钮的默认颜色。结果，button1为浅绿色，文本大小较大，如图3-5所示。

图3-5使用CSS设置样式的按钮

 

相关的API文档  

• Button

• Labeled