Die Anleitung zu JavaFX AnchorPane Layout

1- AnchorPane Layout

AnchorPane ist ein Enthalter (container), der ziemlich gleich wie  BorderPane ist. BorderPane teilt in 5 speziellen Region um in diese Region die Sub-Elemente zu stellen. Inzwischen teilt AnchorPane in 5 Region um die Sub-Elemente zu verankern. Beachten Sie, 5 Region vom AnchorPane sind nur 5 Logic-Region, kein echten Region 
Eine Sub-Element, die im AnchorPane liegt, kann in ein oder viele Logic-Region vom AnchorPane verankern 
Das folgende Image illustriert ein Sub-Element in AnchorPane. Es wird links und rechts von AnchorPane verankert . Und wenn  AnchorPane die Breite (width) geändert wird, wird die Breite des Sub-Element auch geändert
Das Sub-Element wird in 4 Rande vom AnchorPane veränkert

2- Das Beispiel mit AnchorPane

BorderPaneDemo.java
package org.o7planning.javafx.anchorpane;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

public class AnchorPaneDemo extends Application {

   @Override
   public void start(Stage primaryStage) throws Exception {
       AnchorPane root = new AnchorPane();
       Button button1 = new Button("(B1) Top + Left + Right");

       Button button2 = new Button("(B2) Top + Left + Right");
       Button button3 = new Button("(B3) Top + Left + Right");

       Button button4 = new Button("(B4) Top + Left + Right + Bottom");

       // (B1) Anchor to the Top + Left + Right
       AnchorPane.setTopAnchor(button1, 40.0);
       AnchorPane.setLeftAnchor(button1, 50.0);
       AnchorPane.setRightAnchor(button1, 70.0);

       // (B2) Anchor to the Top + Left + Right
       AnchorPane.setTopAnchor(button2, 90.0);
       AnchorPane.setLeftAnchor(button2, 10.0);
       AnchorPane.setRightAnchor(button2, 320.0);

       // (B3) Anchor to the Top + Left + Right
       AnchorPane.setTopAnchor(button3, 100.0);
       AnchorPane.setLeftAnchor(button3, 250.0);
       AnchorPane.setRightAnchor(button3, 20.0);

       // (B4) Anchor to the four sides of AnchorPane
       AnchorPane.setTopAnchor(button4, 150.0);
       AnchorPane.setLeftAnchor(button4, 40.0);
       AnchorPane.setRightAnchor(button4, 50.0);
       AnchorPane.setBottomAnchor(button4, 45.0);

       // Add buttons to AnchorPane
       root.getChildren().addAll(button1, button3, button2, button4);

       Scene scene = new Scene(root, 550, 250);

       primaryStage.setTitle("AnchorPane Layout Demo (o7planning.org)");
       primaryStage.setScene(scene);
       primaryStage.show();
   }

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

}
Das Beispiel durchführen

3-  AnchorPanel mit Scene Builder entwerfen

  • File/New/Other...
Die Sub-Elemete in die   AnchorPane einfügen:

Anchor:

Die Sub-Elemente in der Rände vom AnchorPane verankern

View more categories: