Die Anleitung zu JavaFX StackPane Layout

StackPane Layout
Das Beispiel mit StackPane
StackPane durch Scene Builder entwerfen (design)

1. StackPane Layout

StackPane ist ein Enthälter (container). Er kann die unterschiedlichen Interface-Elemente. Die Sub-Elemente werden zusammengesteckt. Bei einer Zeitpunkt können Sie nur das Subelement, das oberst vom Stack liegt .

Die neuest eingefügte Sub-Elemente liegt am oberst von Stack

// Add component to Stack.

stackPane.getChildren().add(newChild);

Sie können ein Sub-Element in die Vorderseite von Stack durch die Methode toFront() setzen, oder das Sub-Element am Ende von Stack durch die Methode toBack() ziehen.

// All Child components of StackPane
ObservableList<Node> childs = stackPane.getChildren();

if (childs.size() > 1) {
   // Top Component
   Node topNode = childs.get(childs.size()-1);
   topNode.toBack();
}

2. Das Beispiel mit StackPane

StackPaneDemo.java

package org.o7planning.javafx.stackpane;

import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class StackPaneDemo extends Application {

    private StackPane stackPane;

    @Override
    public void start(Stage primaryStage) throws Exception {

        VBox root = new VBox();

        // StackPane
        stackPane = new StackPane();
       
        // Add Label to StackPane
        Label label = new Label("I'm a Label");
        label.setStyle("-fx-background-color:yellow");
        label.setPadding(new Insets(5,5,5,5));   
        stackPane.getChildren().add(label);
       
        // Add Button to StackPane   
        Button button = new Button("I'm a Button");       
        button.setStyle("-fx-background-color: cyan");
        button.setPadding(new Insets(5,5,5,5));
        stackPane.getChildren().add(button);
       
        // Add CheckBox to StackPane
        CheckBox checkBox = new CheckBox("I'm a CheckBox");
        checkBox.setOpacity(1);
        checkBox.setStyle("-fx-background-color:olive");
        checkBox.setPadding(new Insets(5,5,5,5));
       
        stackPane.getChildren().add(checkBox);
       
       
        //
        stackPane.setPrefSize(300, 150);
        stackPane.setStyle("-fx-background-color: Gainsboro;-fx-border-color: blue;");

        //
        root.getChildren().add(stackPane);

        Button controlButton = new Button("Change Top");

        root.getChildren().add(controlButton);
        root.setAlignment(Pos.CENTER);
        VBox.setMargin(stackPane, new Insets(10, 10, 10, 10));
        VBox.setMargin(controlButton, new Insets(10, 10, 10, 10));
        //

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

        primaryStage.setTitle("StackPane Layout Demo");
        primaryStage.setScene(scene);

        controlButton.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent event) {
                changeTop();
            }

        });

        primaryStage.show();
    }

    private void changeTop() {
        ObservableList<Node> childs = this.stackPane.getChildren();

        if (childs.size() > 1) {
            //
            Node topNode = childs.get(childs.size()-1);
            topNode.toBack();
        }
    }

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

}

Das Beispiel durchführen

Normalerweise zeigen Sie nur das oberste Sub-Element vom StackPane an, und verstecken die anderen Sub-Elemente. Benutzen Sie die Methode Node.setVisible(visible). Sehen Sie das Beispiel

StackPaneDemo2.java

package org.o7planning.javafx.stackpane;

import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class StackPaneDemo2 extends Application {

   private StackPane stackPane;

   @Override
   public void start(Stage primaryStage) throws Exception {

       VBox root = new VBox();

       // StackPane
       stackPane = new StackPane();
     
       // Add Label to StackPane
       Label label = new Label("I'm a Label");
       label.setStyle("-fx-background-color:yellow");
       label.setPadding(new Insets(5,5,5,5));
       // Hide this label.
       label.setVisible(false);
     
       stackPane.getChildren().add(label);
     
     
       // Add Button to StackPane  
       Button button = new Button("I'm a Button");      
       button.setStyle("-fx-background-color: cyan");
       button.setPadding(new Insets(5,5,5,5));
       // Hide this button.
       button.setVisible(false);
     
       stackPane.getChildren().add(button);
     
     
       // Add CheckBox to StackPane
       CheckBox checkBox = new CheckBox("I'm a CheckBox");
       checkBox.setOpacity(1);
       checkBox.setStyle("-fx-background-color:olive");
       checkBox.setPadding(new Insets(5,5,5,5));
       // Show this checkBox (default).
       checkBox.setVisible(true);
     
       stackPane.getChildren().add(checkBox);
     
     
       //
       stackPane.setPrefSize(300, 150);
       stackPane.setStyle("-fx-background-color: Gainsboro;-fx-border-color: blue;");

       //
       root.getChildren().add(stackPane);

       Button controlButton = new Button("Change Top");

       root.getChildren().add(controlButton);
       root.setAlignment(Pos.CENTER);
       VBox.setMargin(stackPane, new Insets(10, 10, 10, 10));
       VBox.setMargin(controlButton, new Insets(10, 10, 10, 10));
       //

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

       primaryStage.setTitle("StackPane Layout Demo 2");
       primaryStage.setScene(scene);

       controlButton.setOnAction(new EventHandler<ActionEvent>() {

           @Override
           public void handle(ActionEvent event) {
               changeTop();
           }

       });

       primaryStage.show();
   }

   private void changeTop() {
       ObservableList<Node> childs = this.stackPane.getChildren();

       if (childs.size() > 1) {
           //
           Node topNode = childs.get(childs.size()-1);
         
           // This node will be brought to the front
           Node newTopNode = childs.get(childs.size()-2);
                 
           topNode.setVisible(false);
           topNode.toBack();
         
           newTopNode.setVisible(true);
       }
   }

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

}

Das Beispiel durchführen

3. StackPane durch Scene Builder entwerfen (design)

File/New/Other..

Die Anleitung zu JavaFX StackPane Layout

1. StackPane Layout

2. Das Beispiel mit StackPane

3. StackPane durch Scene Builder entwerfen (design)

Die Anleitungen JavaFX

Die Anleitungen JavaFX

Neueste Artikel