JavaFX BorderPane多FXML空间排列及过渡效果

Question

我想设计一个 GUI，其中包含 BorderPane，在容器顶部有一个菜单栏，在容器左侧有一个 Accordion ，带有不同的按钮，可以更改不同 FXML 文件的容器中心的内容，比如 Spotify 的桌面应用程序

我有一个工作原型(prototype)，它看起来像这样

FXML 发生了变化，按钮响应非常好，我遇到的问题是填充 BoderPane 中心部分的 FXML 不会自动调整，并且 FXML 的大部分不会显示，并且如果 FXML 较小，则中心部分留下的空间保持相同的小尺寸，并且留下大量空间，什么也没有

这是我调用新 FXML 的代码

public void lanzaUno(){
        try {
            // load first FXML
            FXMLLoader loader = new FXMLLoader();

            loader.setLocation(Coordinador.class.getResource(
                    "VistaControlador/Usuario/Uno.fxml"));

            /*i put the AnchorPane inside of a 
            ScrollPane  for the desire funcionality of alot 
            of vertical space for many nodes in a single FXML file  
            */
            ScrollPane unoAnchorPane = (ScrollPane) loader.load();

            UnoController controller = loader.getController();
            //example method for passing variables to the FXML controler 
            controller.pasoPrincipal(this, primaryStage, "Rhutt");
            //puts the FXML in the center of the BorderPane
            rootLayout.setCenter(unoAnchorPane);
            //this if for trying to accommodate the content en the BorderPane 
            BorderPane.setAlignment(unoAnchorPane, Pos.TOP_LEFT);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

我的第一个提示是，我在调用 FXML 时缺少什么，因为该内容占用了 BorderPane 中的可用空间？

我的第二个提示是关于 FXML 的更改，当我从一个 Pane 传递到另一个 Pane 时，BorderPane 中的更改是瞬间发生的，看起来非常糟糕，是否有一种方法可以使转换像 FXML 的内容那样调用将FXML的内容推送到中心？，不必非常详细，只需让过渡更好一点即可

编辑

我有一个协调器类，我在其中发送和接收所有 FXML 的参数，并在其中声明调用新 FXML 的方法，因此我有一个协调器类、一个带有其 Controller 的 FXML 根以及两个带有不同属性的 FXML 及其 Controller 。每一件事中，这两个FXML都是在根的BorderPane中心发生变化的

这是协调器类

//Variables
        private Stage primaryStage;
        private BorderPane rootLayout;

    /**
     * launh 
     * @param primaryStage
     *  
     */
    @Override
    public void start(Stage primaryStage) throws Exception{
        // Inicializa la escena
        this.primaryStage = primaryStage;
        this.primaryStage.setTitle("Login");
        this.primaryStage.centerOnScreen();
        //star method 
        iniLogin();
    }

     /**
     *load the root scene
     */
    public void iniLogin(){
        try {
            // Carga el loader.
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(com.aohys.rehabSys.MVC.Coordinador.class.getResource(
                    "VistaControlador/Pricipal/Principal.fxml"));
            rootLayout = (BorderPane) loader.load();
            //the root scene
            Scene scene = new Scene(rootLayout);
            primaryStage.setScene(scene);
            // Da acceso al programa principal.
            PrincipalController controller = loader.getController();
            controller.pasoPrincipal(this, primaryStage);
            primaryStage.centerOnScreen();
            // Muesta la escena,
            primaryStage.show();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

在此方法之后，有两个相同的方法，就像一开始的方法一样，我将 2 个更改 FXML 调用 LanzaUno、LanzaDos

这是我的 Rood FXML Controller

public class PrincipalController implements Initializable {
    //variable of the coordinator class
    private Coordinador cordi;
    private Stage stage;

    /**
     * method for passing parameters to the FXML
     * @param cordi
     * @param stage 
     */
    public void pasoPrincipal(Coordinador cordi, Stage stage) {
        this.cordi = cordi;
        this.stage = stage;
    }

    //FXML in root 
    @FXML private Button btt1;
    @FXML private Button btt2;
    @FXML public static StackPane stackPane;

    /**
     * Initializes the controller class.
     */
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        //Call the firts FXML
        btt1.setOnAction((evento)->{
            cordi.lanzaUno();
        });

        //Call the second FXML
        btt2.setOnAction((evento)->{
            cordi.lanzaDos();
        });
    }  

目前两个 FXML 上的 Controller 不执行任何操作

Answer 1

您应该阅读 Adam Bien's AfterburnerFX用于管理应用程序中的依赖注入(inject)和 Controller 的库。它改变了我的生活。 :)

对于转换，我使用此代码。从一个屏幕到下一个屏幕的淡出/淡入效果非常好。在本例中，stackPane 是位于 FXML 中定义的 BorderPane 中心的 StackPane。

这是一个带有上述 stackPane 的简单 FXML:

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

<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>

<BorderPane fx:id="borderPane" minHeight="-Infinity" minWidth="-Infinity" prefHeight="768.0" prefWidth="1280.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.tada.gui.tada.TadaPresenter">
   <center>
      <StackPane fx:id="stackPane" minHeight="-Infinity" minWidth="-Infinity" prefHeight="240.0" prefWidth="320.0" BorderPane.alignment="CENTER" />
   </center>
</BorderPane>

以及改变传入的新的setScreen方法:

/**
 * Set Screen 
 * 
 * @param view
 * @return boolean
 */
public boolean setScreen(Parent view) {       
    final DoubleProperty opacity = stackPane.opacityProperty();

    if (!stackPane.getChildren().isEmpty()) {    //if there is more than one screen
        Timeline fade = new Timeline(
                new KeyFrame(Duration.ZERO, new KeyValue(opacity, 1.0)),
                new KeyFrame(new Duration(TRANSITION_TIMER), new EventHandler<ActionEvent>() {
                    @Override
                    public void handle(ActionEvent t) {
                        stackPane.getChildren().remove(0);        //remove the displayed screen
                        stackPane.getChildren().add(0, view);     //add the screen
                        Timeline fadeIn = new Timeline(
                                new KeyFrame(Duration.ZERO, new KeyValue(opacity, 0.0)),
                                new KeyFrame(new Duration(TRANSITION_TIMER), new KeyValue(opacity, 1.0)));
                        fadeIn.play();
                    }
                }, new KeyValue(opacity, 0.0)));
        fade.play();

    } else {
        stackPane.setOpacity(0.0);
        stackPane.getChildren().add(view);       //no one else been displayed, then just show
        Timeline fadeIn = new Timeline(
                new KeyFrame(Duration.ZERO, new KeyValue(opacity, 0.0)),
                new KeyFrame(new Duration(TRANSITION_TIMER), new KeyValue(opacity, 1.0)));
        fadeIn.play();
    }
    return true;
}

您的 Controller 中还需要这个...

private static final double TRANSITION_TIMER = 200;

编辑:

我试图组合一个非常基本的“应用程序”。它很初级，但我认为它很好地说明了 AfterburnerFX 的使用和屏幕淡入淡出过渡。 AfterburnerFX 还有更多功能。我只是使用了 View 切换，而没有依赖注入(inject)，当您开始想要处理应用程序中的对象时，这非常重要。此外，属性绑定(bind)对于良好的用户体验非常重要。无论如何，这是一个链接到 my example在 GitHub 上。