多个按钮点击效果处理

Question

我想询问有关使用 JavaFX 处理两个（或更多）按钮的问题。在我的项目中，我有两个切换按钮。我想在按下时为其中一个分配样式（绿色圆形边框）。当我点击另一个按钮时，我想删除第一个按钮的样式并将其移至第二个按钮。目前，我有两个按钮同时显示为“按下”的情况（附图）。请问如何避免这种情况。下面是我的控制器文件中的代码：

public void oneButton()
{
ToggleButton btn1=new ToggleButton();

    btn1.getStyleClass().add(".toggle-button:selected");
    


}
public void twoButton()
{
ToggleButton btn2=new ToggleButton();

    btn2.getStyleClass().add(".toggle-button:selected");
        
}
}

Answer 1

怎么样：

ToggleGroup toggleGroup = new ToggleGroup();
ToggleButton toggleButton1 = new ToggleButton("Left");
ToggleButton toggleButton2 = new ToggleButton("Right");

toggleButton1.setToggleGroup(toggleGroup);
toggleButton2.setToggleGroup(toggleGroup);

应该允许您将多个按钮添加到切换组，并且应该在选择另一个按钮时清除未选择按钮的样式。

Answer 2

您可以使用 ToggleGroup:

A class which contains a reference to all Toggles whose selected variables should be managed such that only a single Toggle within the ToggleGroup may be selected at any one time [...] (docs).

ToggleGroupExampleApp.java:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ToggleButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;


public class ToggleGroupExampleApp extends Application {

    @Override
    public void start(Stage stage) {

        // Create the toggle buttons:
        ToggleButton firstToggleButton = new ToggleButton("First Toggle Button"),
                secondToggleButton = new ToggleButton("Second Toggle Button");

        // Create a toggle group so only one toggle button can be selected at a time:
        ToggleGroup toggleGroup = new ToggleGroup();

        // Add the buttons to the toggle group:
        firstToggleButton.setToggleGroup(toggleGroup);
        secondToggleButton.setToggleGroup(toggleGroup);

        // Create a container:
        VBox vBox = new VBox(firstToggleButton, secondToggleButton);

        // Load a css file:
        vBox.getStylesheets().add(ToggleGroupExampleApp.class.getResource("styling.css").toExternalForm());

        // Prepare and show stage:
        stage.setScene(new Scene(vBox, 200, 100));
        stage.show();
    }

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

出于样式目的，您可以使用已经可用的选定伪class。

styling.css:

.toggle-button {
    -fx-border-radius: 10;
    -fx-background-radius: 10;
    -fx-border-width: 2;
    -fx-pref-width: 180;
    -fx-pref-height: 35;
}
.toggle-button:selected {
    -fx-border-color: green;
}
VBox {
    -fx-spacing: 10;
    -fx-padding: 10;
}

编辑（添加了 FXML 文件和控制器 class 的变体）：

Controller.class:

package org.example;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.ToggleButton;
import javafx.scene.control.ToggleGroup;

import java.net.URL;
import java.util.ResourceBundle;

public class Controller implements Initializable {

    @FXML
    private ToggleButton
            firstToggleButton,
            secondToggleButton;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        // Create a toggle group so only one toggle button can be selected at once:
        ToggleGroup toggleGroup = new ToggleGroup();

        // Add the buttons to the toggle group:
        firstToggleButton.setToggleGroup(toggleGroup);
        secondToggleButton.setToggleGroup(toggleGroup);
    }
}

main.fxml:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.ToggleButton?>
<?import javafx.scene.layout.VBox?>

<VBox spacing="10.0" stylesheets="@styling.css" xmlns="http://javafx.com/javafx/11.0.1"
      xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.Controller">
    <padding>
        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0"/>
    </padding>
    <ToggleButton fx:id="firstToggleButton" mnemonicParsing="false" prefHeight="35.0" 
                  prefWidth="150.0" text="First Toggle Button">
    </ToggleButton>
    <ToggleButton fx:id="secondToggleButton" mnemonicParsing="false" prefHeight="35.0" 
                  prefWidth="150.0" text="Second Toggle Button">
    </ToggleButton>
</VBox>

styling.css:

.toggle-button {
    -fx-border-radius: 10;
    -fx-background-radius: 10;
    -fx-border-width: 2;
}
.toggle-button:selected {
    -fx-border-color: green;
}

ToggleGroupExampleApp.java:

package org.example;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.IOException;


public class ToggleGroupExampleApp extends Application {

    @Override
    public void start(Stage stage) throws IOException {
        FXMLLoader loader = new FXMLLoader(ToggleGroupExampleApp.class.getResource("main.fxml"));
        stage.setScene(new Scene(loader.load()));
        stage.show();
    }

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

多个按钮点击效果处理

Multiple buttons click effect handling

java

javafx