Javafx-如何根据我的需要正确配置多个切换按钮（在一组中）操作

Question

事情是这样的。 But i need to return colors when i press other toggle buttons

我需要做的是点击另一个按钮后颜色需要变回蓝色（同时切换另一个按钮需要取消切换按钮）

问题出在我切换第一个按钮时（工作正常 - 改变盒子上的颜色）。但是当我在选择第一个按钮的同时按下第二个按钮时，第一个按钮的颜色框颜色没有返回到蓝色。

public class FXMLDocumentController implements Initializable {
    
    @FXML
    private ToggleButton TB1;

    @FXML
    private ToggleGroup G1;

    @FXML
    private ToggleButton TB2;

    @FXML
    private ToggleButton TB3;

    @FXML
    private ToggleButton TB4;

    @FXML
    private Rectangle C1;

    @FXML
    private Rectangle C2;

    @FXML
    private Rectangle C3;

    @FXML
    private Rectangle C4;

    @FXML
    void TB1Action(ActionEvent event) {
        if (TB1.isSelected()){
            FillTransition ft = new FillTransition(Duration.millis(250), C1, Color.DODGERBLUE, Color.RED);
            ft.play();
        }
        else{
            FillTransition ft = new FillTransition(Duration.millis(250), C1, Color.RED, Color.DODGERBLUE);
            ft.play();
        }
    }

    @FXML
    void TB2Action(ActionEvent event) {
        if (TB2.isSelected()){
            FillTransition ft = new FillTransition(Duration.millis(250), C2, Color.DODGERBLUE, Color.GREENYELLOW);
            ft.play();
        }
        else{
            FillTransition ft = new FillTransition(Duration.millis(250), C2, Color.GREENYELLOW, Color.DODGERBLUE);
            ft.play();
        }
    }

    @FXML
    void TB3Action(ActionEvent event) {
        if (TB3.isSelected()){
            FillTransition ft = new FillTransition(Duration.millis(250), C3, Color.DODGERBLUE, Color.GREENYELLOW);
            ft.play();
        }
        else{
            FillTransition ft = new FillTransition(Duration.millis(250), C3, Color.GREENYELLOW, Color.DODGERBLUE);
            ft.play();
        }
    }

    @FXML
    void TB4Action(ActionEvent event) {
        if (TB4.isSelected()){
            FillTransition ft = new FillTransition(Duration.millis(250), C4, Color.DODGERBLUE, Color.GREENYELLOW);
            ft.play();
        }
        else{
            FillTransition ft = new FillTransition(Duration.millis(250), C4, Color.GREENYELLOW, Color.DODGERBLUE);
            ft.play();
        }
    }
    
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }    
}

Answer 1

您不需要为 ToggleButton 设置 onAction 属性。只需在 ToggleGroup 的 selectedToggle 属性中添加一个 ChangeListener。在那个 ChangeListener 你需要做两件事：

更改与新选择的 ToggleButton 关联的 Rectangle 的颜色。
还原之前选择的颜色 ToggleButton。

我根据你问题中的代码反向工程了一个 FXML 文件。下面的代码是一个 SSCCE，对您的代码进行了最少的更改，只是为了展示如何使用 ChangeListener.

文件：fxmldocu.fxml

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.ToggleButton?>
<?import javafx.scene.control.ToggleGroup?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.paint.Color?>
<?import javafx.scene.shape.Rectangle?>

<VBox fx:id="root"
      xmlns:fx="https://javafx.com/fxml/1"
      xmlns="http://javafx.com/javafx/15.0.1"
      fx:controller="FXMLDocumentController"
      spacing="10">
    <fx:define>
        <ToggleGroup fx:id="G1"/>
    </fx:define>
   <children>
      <HBox spacing="10">
         <children>
            <ToggleButton fx:id="TB1" text="ToggleButton" toggleGroup="$G1" selected="false">
            </ToggleButton>
            <Rectangle fx:id="C1" width="100" height="29">
               <fill><Color fx:constant="DODGERBLUE"/></fill>
            </Rectangle>
         </children>
      </HBox>
      <HBox spacing="10">
         <children>
            <ToggleButton fx:id="TB2" text="ToggleButton" toggleGroup="$G1" selected="false">
            </ToggleButton>
            <Rectangle fx:id="C2" width="100" height="29">
               <fill><Color fx:constant="DODGERBLUE"/></fill>
            </Rectangle>
         </children>
      </HBox>
      <HBox spacing="10">
         <children>
            <ToggleButton fx:id="TB3" text="ToggleButton" toggleGroup="$G1" selected="false">
            </ToggleButton>
            <Rectangle fx:id="C3" width="100" height="29">
               <fill><Color fx:constant="DODGERBLUE"/></fill>
            </Rectangle>
         </children>
      </HBox>
      <HBox spacing="10">
         <children>
            <ToggleButton fx:id="TB4" text="ToggleButton" toggleGroup="$G1" selected="false">
            </ToggleButton>
            <Rectangle fx:id="C4" width="100" height="29">
               <fill><Color fx:constant="DODGERBLUE"/></fill>
            </Rectangle>
         </children>
      </HBox>
   </children>
</VBox>

您的 FXMLDocumentController 添加了 ChangeListener

import javafx.animation.FillTransition;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Toggle;
import javafx.scene.control.ToggleButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.util.Duration;

public class FXMLDocumentController {
    @FXML
    private ToggleButton TB1;

    @FXML
    private ToggleGroup G1;

    @FXML
    private ToggleButton TB2;

    @FXML
    private ToggleButton TB3;

    @FXML
    private ToggleButton TB4;

    @FXML
    private Rectangle C1;

    @FXML
    private Rectangle C2;

    @FXML
    private Rectangle C3;

    @FXML
    private Rectangle C4;

    @FXML
    void TB1Action(ActionEvent event) {
        if (TB1.isSelected()){
            FillTransition ft = new FillTransition(Duration.millis(250), C1, Color.DODGERBLUE, Color.RED);
            ft.play();
        }
        else{
            FillTransition ft = new FillTransition(Duration.millis(250), C1, Color.RED, Color.DODGERBLUE);
            ft.play();
        }
    }

    @FXML
    void TB2Action(ActionEvent event) {
        if (TB2.isSelected()){
            FillTransition ft = new FillTransition(Duration.millis(250), C2, Color.DODGERBLUE, Color.GREENYELLOW);
            ft.play();
        }
        else{
            FillTransition ft = new FillTransition(Duration.millis(250), C2, Color.GREENYELLOW, Color.DODGERBLUE);
            ft.play();
        }
    }

    @FXML
    void TB3Action(ActionEvent event) {
        if (TB3.isSelected()){
            FillTransition ft = new FillTransition(Duration.millis(250), C3, Color.DODGERBLUE, Color.GREENYELLOW);
            ft.play();
        }
        else{
            FillTransition ft = new FillTransition(Duration.millis(250), C3, Color.GREENYELLOW, Color.DODGERBLUE);
            ft.play();
        }
    }

    @FXML
    void TB4Action(ActionEvent event) {
        if (TB4.isSelected()){
            FillTransition ft = new FillTransition(Duration.millis(250), C4, Color.DODGERBLUE, Color.GREENYELLOW);
            ft.play();
        }
        else{
            FillTransition ft = new FillTransition(Duration.millis(250), C4, Color.GREENYELLOW, Color.DODGERBLUE);
            ft.play();
        }
    }

    @FXML
    private void initialize() {
        G1.selectedToggleProperty().addListener(new ChangeListener<Toggle>() {

            @Override
            public void changed(ObservableValue<? extends Toggle> observable, Toggle oldValue, Toggle newValue) {
                if (oldValue == TB1) {
                    TB1Action(null);    
                }
                else if (oldValue == TB2) {
                    TB2Action(null);
                }
                else if (oldValue == TB3) {
                    TB3Action(null);
                }
                else if (oldValue == TB4) {
                    TB4Action(null);
                }
                if (newValue == TB1) {
                    TB1Action(null);    
                }
                else if (newValue == TB2) {
                    TB2Action(null);
                }
                else if (newValue == TB3) {
                    TB3Action(null);
                }
                else if (newValue == TB4) {
                    TB4Action(null);
                }
            }
        });
    }
}

注意“控制器”class不需要实现Initializable接口。它可以简单地声明一个 initialize 方法，就像我在上面的代码中所做的那样。

最后，运行申请 Application class。

import java.net.URL;

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

public class Togglers extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        Class<?> theClass = getClass();
        URL url = theClass.getResource("fxmldocu.fxml");
        VBox root = (VBox) FXMLLoader.load(url);
        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

另请注意，另一种可能的替代方案——我没有探索——可能是 bind ToggleGroup 的 selectedToggle 属性和 selected 属性每个 ToggleButton.

最后，（在 kleopatra 添加评论之前 :-) 考虑使用 Java naming conventions.

Javafx-如何根据我的需要正确配置多个切换按钮（在一组中）操作

Javafx- how this multiple toggle buttons (in one group) actions are correctly configure for my need

java

javafx

fxml

scenebuilder