调整拆分窗格的大小时，如何将 JavaFx 节点保持在其原始位置？

Question

I currently have a splitPane with 3 AnchorPanes, the center pane (Graph) of which contains some Circles contained in StackPanes that I add to the center AnchorPane in my code. When I resize the left divider, the contents of the center graph AnchorPane move with the left divider.

Is there a way I can keep the nodes in the AnchorPane (or by using some other pane) from moving with the divider? Even better would be if I could have the "Graph" text move and the circle nodes remain stationary, but that's not necessary. I'm new to JavaFx and still not sure how each pane works exactly.

Here are two screenshots showing the process of resizing that I'm describing. Thanks in advance for any help!

EDIT: Anko's solution below worked wonderfully for me. Thank you to everyone for helping out:)

Shot 1

Shot 2

Answer 1

Add a ChangeListener to the first Divider , calculate and set LayoutX of the objects in the middle pane like in this small example:

Controller Class:

package sample;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.SplitPane;
import javafx.scene.shape.Ellipse;

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

public class Controller implements Initializable {

    @FXML
    private SplitPane splitPane;

    @FXML
    private Ellipse ellipse;

    @Override
    public void initialize(URL location, ResourceBundle resources) {

        splitPane.getDividers().get(0).positionProperty().addListener(((observable, oldValue, newValue) -> {
            ellipse.setLayoutX(ellipse.getLayoutX() + (splitPane.getWidth() * oldValue.doubleValue() - splitPane.getWidth() * newValue.doubleValue()));
        }));
    }
}

FXML File:

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

<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.shape.Ellipse?>

<SplitPane fx:id="splitPane" dividerPositions="0.4, 0.9" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
  <items>
    <AnchorPane />
      <AnchorPane>
         <children>
            <Ellipse fx:id="ellipse" fill="DODGERBLUE" layoutX="150.0" layoutY="150.0" radiusX="100.0" radiusY="80.0" stroke="BLACK" strokeType="INSIDE" />
         </children>
      </AnchorPane>
      <AnchorPane />
  </items>
</SplitPane>

Preview:

Answer 2

If you want the nodes in the graph not to move when the dividers are moved, I think the most logical approach is to make them not a part of the SplitPane . Use a StackPane , with the actual graph at the lowest z-order and the SplitPane at a higher z-order; style the panes contained in the SplitPane so the center pane is transparent and the left and right panes opaque, and make the SplitPane itself have a transparent background.

This approach relies on standard layout mechanisms, and avoids the need to use listeners to modify the layout after the system updates it.

Here's a mock-up of this approach:

import java.io.IOException;
import java.util.stream.Stream;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.SplitPane;
import javafx.scene.control.TextField;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.stage.Stage;

/**
 * JavaFX App
 */
public class App extends Application {


    @Override
    public void start(Stage stage) throws IOException {

        BorderPane root = new BorderPane();

        // menu bar in top, status in bottom...

        StackPane graphStack = new StackPane();

        Pane graphPane = new Pane();
        populateGraphPane(graphPane);

        VBox controls = new VBox(5,
            new Label("Controls"),
            new Button("A Button"),
            new TextField()
        );

        AnchorPane graphOverlay = new AnchorPane();
        Label graphLabel = new Label("Graph");
        AnchorPane.setTopAnchor(graphLabel, 5.0);
        AnchorPane.setLeftAnchor(graphLabel, 5.0);
        graphOverlay.getChildren().add(graphLabel);

        VBox details = new VBox(5, new Label("Details"));

        SplitPane split = new SplitPane(controls, graphOverlay, details);
        graphStack.getChildren().addAll(graphPane, split);
        split.setDividerPositions(0.33, 0.67);

        // Styles: IRL do this in an external CSS style sheet
        // Make the background white, but make the overlay transparent so we see the graph below it:
        graphPane.setStyle("-fx-background-color: white ;");
        controls.setStyle("-fx-background-color: white ; -fx-color: red ; -fx-focus-color: #FF7F50 ; -fx-faint-focus-color: #FF7F5022 ; -fx-padding: 5 ; ");
        details.setStyle("-fx-background-color: white ; -fx-padding: 5 ;");
        graphOverlay.setStyle("-fx-background-color: transparent ;");
        split.setStyle("-fx-background-color: transparent ;");

        root.setStyle("-fx-text-background-color: red ;");

        root.setCenter(graphStack);

        Scene scene = new Scene(root, 800, 600);
        stage.setScene(scene);
        stage.show();
    }

    private void populateGraphPane(Pane graph) {
        Circle top = new Circle(400, 200, 20, Color.WHITE);
        Circle left = new Circle(300, 373, 20, Color.WHITE);
        Circle right = new Circle(500, 373, 20, Color.WHITE);
        Line leftLine = new Line(390, 217, 310, 356);
        Line rightLine = new Line(410, 217, 490, 356);
        Line bottomLine = new Line(320, 373, 480, 373);

        Stream.of(top, left, right).forEach(c -> {
            c.setStroke(Color.RED);
            c.setStrokeWidth(3);
        });

        Stream.of(leftLine, rightLine, bottomLine).forEach(l -> {
            l.setStroke(Color.RED);
            l.setStrokeWidth(3);
        });

        Group group = new Group();
        group.getChildren().addAll(top, left, right, leftLine, rightLine, bottomLine);
        graph.getChildren().add(group);
    }



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

}

and some screenshots:

If you want to avoid obscuring parts of the graph, it's relatively easy to do so by setting min/max widths on the panes in the graph (which will restrict the movement of the dividers).