JavaFX 在 SplitPane 中切换场景？

Question

在底部，我有一个 AnchorPane，然后是一个 SplitPane。在左侧 Pane 中，我有一个 listView，根据所选的列表元素，右侧 Pane 会显示相应的内容。我这样做的方法是重叠 AnchorPanes 并将它们最初设置为 .setVisible(false) ，当它们被选择时，我将它们设置为 .setVisible(true) ，如下所示:

public void listSelection() {       
    String selection = listView.getSelectionModel().getSelectedItem();
    switch(selection) {
    case "Speed of sound":
        disableOld(); // disables old AnchorePane
        response.setText("Speed of sound conversion");
        AnchorPane1.setVisible(true);   
        break;
    case "Temperature conversion":
        disableOld(); 
        response.setText("Temperature conversion");
        AnchorPane2.setVisible(true);       
        break;
    }
}

我想知道如何在不同的场景下产生相同的视觉效果，因为我希望每个新的 AnchorPane 都有自己的 FXML 和 ControllerClass。

Answer 1

You can implement something like this :

您的主要类(class):

public void start(Stage primaryStage) throws IOException {
            primaryStage.setTitle("Title");
            primaryStage.setScene(createScene(loadMainPane("path_of_your_fxml")));
            primaryStage.show();

    }

    private Pane loadMainPane(String path) throws IOException {
        FXMLLoader loader = new FXMLLoader();

        Pane mainPane = (Pane) loader.load(
                getClass().getResourceAsStream(path));

        return mainPane;
    }


    private Scene createScene(Pane mainPane) {
        Scene scene = new Scene(mainPane);
      return scene;
    }
    public static void main(String[] args) {launch(args); }

然后您可以创建一个单独的类调用 Navigator 来存储所有 fxml 路径:

public class Navigator {

private final String P1;
private final String P2;
//then you can implement getters...
public String getP1() {
    return P1;
}

public String getP2() {
    return p2;
}

private static FxmlController Controller;

    public static void loadPane(String fxml) {
    try {
        FxmlController.setPane(
                (Node) FXMLLoader.load(Navigator.class.getResource(fxml)));
    } catch (IOException e) {
        e.printStackTrace();
    }
}

public Navigator() throws IOException {
    this.P1 = "p1.fxml";
    this.P2 = "p2.fxml";}

在您的主FxmlController(这是应用程序永久层的 Controller )中，堆栈 Pane 的其余部分-{p1和p2}将加载到您的永久层上)

这是在主 FxmlController 上加载图层的方式:

@FXML
private StackPane stackPaneHolder;
... 

public void setPane(Node node) {
    if (stackPaneHolder.getChildren().isEmpty()) {
        //if stackPaneHolder is empty
        stackPaneHolder.getChildren().add(node);

    } else {
        if (stackPaneHolder.getClip() != node) {
          //if stackPaneHolder is not empty then remove existing layer and add new layer
            stackPaneHolder.getChildren().remove(0);
            stackPaneHolder.getChildren().add(0, node);
        }
    }
}

然后您可以通过按如下按钮加载 Pane :

@FXML
private void btnAction(ActionEvent event) throws IOException {
Navigator.load(new Navigator().getP1());
..

这就是它的工作原理: