JavaFX - 创建带有图像的自定义按钮

Question

我想创建一个自定义按钮，它具有按下或未按下两种状态，就像切换按钮一样。我有两个图像来执行此操作(按下和未按下)，那么我如何创建按钮并与我的图像一起显示它？按钮必须采用图像的大小。
我没有使用 FXML。感谢您的帮助。

Answer 1

有几种不同的方法可以实现这一目标，我将概述我最喜欢的方法。

这个问题询问切换行为，因此答案集中于此。如果您不需要切换行为，则只需使用标准 Button，其样式可以与此答案中引用的 ToggleButton 相同。

另请参阅:

• Styling a JavaFX 2 button using FXML only - How to add an image to a button?

使用 ToggleButton并对其应用自定义样式。我建议这样做，因为您所需的控件“类似于切换按钮”，但看起来与默认切换按钮样式不同。

我的首选方法是在 css 中为按钮定义图形:

.toggle-button {
  -fx-graphic: url('http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Pizza-icon.png');
}

.toggle-button:selected {
  -fx-graphic: url('http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Piece-of-cake-icon.png');
}

或者使用附加的 CSS 来定义背景图像。

// file imagetogglebutton.css deployed in the same package as ToggleButtonImage.class
.toggle-button {
  -fx-background-image: url('http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Pizza-icon.png');
  -fx-background-repeat: no-repeat;
  -fx-background-position: center;
}

.toggle-button:selected {
  -fx-background-image: url('http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Piece-of-cake-icon.png');
}

与 -fx-background-* 规范相比，我更喜欢 -fx-graphic 规范，因为背景图像样式的规则很棘手，并且设置背景不会自动调整按钮的图像大小，而设置图形则会自动调整按钮的大小。

以及一些示例代码:

注意:本示例中使用的 StackPaneBuilder 已被弃用并从 JavaFX 中删除，请使用 new StackPane() 替换该代码，并在生成的堆栈 Pane 上调用方法来设置堆栈 Pane 属性，而不是使用构建器。

import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.control.ToggleButton;
import javafx.scene.layout.StackPaneBuilder;
import javafx.stage.Stage;

public class ToggleButtonImage extends Application {
  public static void main(String[] args) throws Exception { launch(args); }
  @Override public void start(final Stage stage) throws Exception {
    final ToggleButton toggle = new ToggleButton();
    toggle.getStylesheets().add(this.getClass().getResource(
      "imagetogglebutton.css"
    ).toExternalForm());
    toggle.setMinSize(148, 148); toggle.setMaxSize(148, 148);
    stage.setScene(new Scene(
      StackPaneBuilder.create()
        .children(toggle)
        .style("-fx-padding:10; -fx-background-color: cornsilk;")
        .build()
    ));
    stage.show();
  }
}

这样做的一些优点是:

1. 您可以获得默认的切换按钮行为，而不必通过添加自己的焦点样式、鼠标和按键处理程序等来重新实现它。
2. 如果您的应用被移植到不同的平台(例如移动设备)，它将立即响应触摸事件而不是鼠标事件等。
3. 您的样式与应用程序逻辑分离，因此可以更轻松地重新设计应用程序的样式。

另一种方法是不使用 css 并仍然使用 ToggleButton，但在代码中设置图像图形:

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.scene.*;
import javafx.scene.control.ToggleButton;
import javafx.scene.image.*;
import javafx.scene.layout.StackPaneBuilder;
import javafx.stage.Stage;

public class ToggleButtonImageViaGraphic extends Application {
  public static void main(String[] args) throws Exception { launch(args); }
  @Override public void start(final Stage stage) throws Exception {
    final ToggleButton toggle      = new ToggleButton();
    final Image        unselected  = new Image(
      "http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Pizza-icon.png"
    );
    final Image        selected    = new Image(
      "http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Piece-of-cake-icon.png"
    );
    final ImageView    toggleImage = new ImageView();
    toggle.setGraphic(toggleImage);
    toggleImage.imageProperty().bind(Bindings
      .when(toggle.selectedProperty())
        .then(selected)
        .otherwise(unselected)
    );
    
    stage.setScene(new Scene(
      StackPaneBuilder.create()
        .children(toggle)
        .style("-fx-padding:10; -fx-background-color: cornsilk;")
        .build()
    ));
    stage.show();
  }
}

基于代码的方法的优点是，如果您不熟悉 CSS，则不必使用它。

为了获得最佳性能并轻松移植到未签名的小程序和 Webstart 沙箱，请将图像与您的应用程序捆绑在一起，并通过相对路径 URL 引用它们，而不是从网上下载它们。