Java FX 按钮突出显示

Question

我想做的是，请看附上的屏幕截图。一旦我在按钮 1-4 之间单击，它应该以红色突出显示并且保持突出显示，直到我 select 按钮 1 和按钮 4 之间的任何其他按钮然后突出显示 selected 按钮应该是突出显示。我可以专注于属性来做到这一点。但是我的场景中还有其他按钮，例如按钮 5、6 和 7。一旦我单击任何其他按钮或单击另一个控件焦点和红色消失。但我希望点击的按钮保持突出显示状态，或者显示哪个按钮（在按钮 1 和按钮 4 之间）被 selected。

Answer 1

我建议为此使用 ToggleGroup 和 ToggleButton。 ToggleGroup 允许您的用户一次只能 select 一个按钮。当按钮被 select 编辑后，您就可以设置您想要的样式了。

在下面的示例程序中，组中有 6 个 ToggleButton，并且在任何给定时间只能 selected 一个。 selected 按钮将具有红色背景（突出显示）。您创建的任何不具有此样式的按钮都不会受到影响。

下面的代码也有注释：

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Toggle;
import javafx.scene.control.ToggleButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class ButtonHighlights extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {

        // Simple interface
        VBox root = new VBox(5);
        root.setPadding(new Insets(10));
        root.setAlignment(Pos.CENTER);

        // Create a ToggleGroup to hold the list of ToggleButtons. This will allow us to allow the selection of only one
        // ToggleButton at a time
        ToggleGroup toggleGroup = new ToggleGroup();

        // Create our 6 ToggleButtons. For this sample, I will use a for loop to add them to the ToggleGroup. This is
        // not necessary for the main functionality to work, but is used here to save time and space
        for (int i = 0; i < 6; i++) {
            ToggleButton button = new ToggleButton("Button #" + i);

            // If you want different styling for the button when it's selected other than the default, you can either
            // use an external CSS stylesheet, or apply the style in a listener like this:
            button.selectedProperty().addListener((observable, oldValue, newValue) -> {

                // If selected, color the background red
                if (newValue) {
                    button.setStyle(
                            "-fx-background-color: red;" + 
                            "-fx-text-fill: white");
                } else {
                    button.setStyle(null);
                }
            });

            // Add the button to our ToggleGroup
            toggleGroup.getToggles().add(button);
        }

        // Add all our buttons to the scene
        for (Toggle button :
                toggleGroup.getToggles()) {
            root.getChildren().add((ToggleButton) button);
        }

        // Show the Stage
        primaryStage.setWidth(300);
        primaryStage.setHeight(300);
        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }
}

The Result:

Java FX 按钮突出显示

Java FX button highlight

java

javafx

javafx-2

javafx-8