JavaFX- 2.2 JavaFX控件:Button

按钮

位于JavaFX API中的Button 类允许开发者在用户点击一个按钮之后进行相应的处理。Button 类是Labeled类的子类。他可以显示文本、图像或者文本+图像。图1显示了不同效果状态下的按钮。在本小节你将学习到如何创建这些按钮。

图1 按钮类型

创建按钮

你可以通过Button 类提供的三个构造方法在JavaFX 应用程序用创建按钮控件：

//一个不带文字的按钮
        Button button1 = new Button();
        //一个带文字的按钮
        Button button2 = new Button("Accept");
        Image imageOk = new Image(getClass().getResourceAsStream("ok.png"),50,50,true,true);
        //一个带图像和文字的按钮
        Button button3 = new Button("Accept", new ImageView(imageOk));
           

因为Button继承了Labeled 类，我们可以使用下面两个方法设置按钮的文本和图像：

• setText(String text)设置在Button上显示的文字
• setGraphic(Node graphic) 设置图形图标

下面代码展示了如何新建一个只带有图标的按钮：

Button button4 = new Button();
        Image imageNot = new Image(getClass().getResourceAsStream("not.png"),50,50,true,true);
        button4.setGraphic(new ImageView(imageNot));
           

上述两个例子中的图标是一个ImageView对象。不过我们也可以用其他的graphical 对象，比如位于javafx.scene.shape包中的各种图形。当我们在一个按钮中同时显示文本和图形内容时，可以使用setGraphicTextGap 方法设置两者之间的间距。

下图显示了默认的按钮风格的三种状态：

设置动作

按钮的主要作用就是在点击的时候执行一些动作。使用Button类中setOnAction 方法可以设置按钮点击时候的触发行为。下面代码展示了给button2添加动作响应事件：

button2.setOnAction(event -> {
            button2.setText("hello");
        });
           

可以使用Button类来设置导致特定行为或应用视觉效果所需的许多事件处理方法。

应用效果

因为Button继承了Node类，因此可以使用 javafx.scene.effect包中的所有效果去增加按钮的视觉特性。下面代码展示了往按钮中添加一个鼠标移入之后显示阴影的视觉效果：

DropShadow dropShadow = new DropShadow();
     button3.addEventHandler(MouseEvent.MOUSE_ENTERED, event -> {
            button3.setEffect(dropShadow);
        });
     button3.addEventHandler(MouseEvent.MOUSE_EXITED,event -> {
            button3.setEffect(null);
        });
           

设置按钮样式

下一步可以使用CSS样式去定义我们的按钮外观。

1. 新建一个css文件
2. 在css文件中添加样式

   .button1 {
   -fx-font: 22 arial;
   -fx-background-color: #b6e7c9;
   }
              

3. 使用

   scene.getStylesheets().add(getClass().getResource("css.css").toExternalForm());

   往scene中添加我们的css样式表
4. 添加类名到按钮中

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

完整代码

/**
 * <h3>helloJavaFx</h3>
 * <p></p>
 *
 * @author : ZhouKun
 * @date : 2020-03-16 19:12
 **/
public class ButtonDemo extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("Button Demo");
        HBox hBox = new HBox(10);
        hBox.setPadding(new Insets(25,25,25,25));
        //一个不带文字的按钮
        Button button1 = new Button();
        //一个带文字的按钮
        Button button2 = new Button("Accept");

        button2.setOnAction(event -> {
            button2.setText("hello");
        });
        Image imageOk = new Image(getClass().getResourceAsStream("ok.png"),50,50,true,true);
        //一个带图像和文字的按钮
        Button button3 = new Button("Accept", new ImageView(imageOk));
        button3.getStyleClass().add("button1");
        DropShadow dropShadow = new DropShadow();
        button3.addEventHandler(MouseEvent.MOUSE_ENTERED, event -> {
            button3.setEffect(dropShadow);
        });
        button3.addEventHandler(MouseEvent.MOUSE_EXITED,event -> {
            button3.setEffect(null);
        });

        Button button4 = new Button();
        Image imageNot = new Image(getClass().getResourceAsStream("not.png"),50,50,true,true);
        button4.setGraphic(new ImageView(imageNot));

        hBox.getChildren().addAll(button1,button2,button3,button4);
        Scene scene = new Scene(hBox, 500, 180);
        scene.getStylesheets().add(getClass().getResource("css.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

           

运行结果