openplanning

Hướng dẫn và ví dụ JavaFX StackPane Layout

Xem thêm các chuyên mục:

  1. StackPane Layout
  2. Ví dụ với StackPane
  3. Thiết kết StackPane với Scene Builder
Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- StackPane Layout

StackPane là một bộ chứa, nó có thể chứa các thành phần giao diện khác, các thành phần con được sếp chồng nên nhau, tại một thời điểm bạn chỉ có thể nhìn thấy thành phần con nằm ở trên cùng của stack.
Các thành phần con được thêm vào mới nhất sẽ nằm ở phía trên cùng của Stack. 

// Thêm một thành phần con vào Stack.

stackPane.getChildren().add(newChild);
Bạn có thể đưa một thành phần con bất kỳ nên phía trước (front) của Stack thông qua phương thức toFront(), hoặc đưa thành phần con xuống phía cuối của stack thông qua phương thức toBack(). 

// Tất cả các thành phần con của StackPane
ObservableList<Node> childs = stackPane.getChildren();

if (childs.size() > 1) {
   // Thành phần trên cùng.
   Node topNode = childs.get(childs.size()-1);
   topNode.toBack();
}

2- Ví dụ với 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();
     
 
       // Thêm Label vào 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);
     
 
       // Thêm Button vào 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);
     
 
       // Thêm CheckBox vào 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);
   }

}
Chạy ví dụ:
Thông thường bạn chỉ hiển thị thành phần con phía trên cùng của StackPane, và ẩn các thành phần con khác. Sử dụng phương thức Node.setVisible(visible). Xem ví dụ minh họa:
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();

      // Thêm Label vào StackPane
      Label label = new Label("I'm a Label");
      label.setStyle("-fx-background-color:yellow");
      label.setPadding(new Insets(5,5,5,5));

      // Ẩn label này.
      label.setVisible(false);
   
      stackPane.getChildren().add(label);
   

      // Thêm Button vào StackPane      
      Button button = new Button("I'm a Button");      
      button.setStyle("-fx-background-color: cyan");
      button.setPadding(new Insets(5,5,5,5));
 
      // Ẩn button này.
      button.setVisible(false);
   
      stackPane.getChildren().add(button);
   

      // Thêm CheckBox vào 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));

      // Hiển thị checkBox (mặc định).
      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);

          // Node này sẽ được đưa lên phía trước.
          Node newTopNode = childs.get(childs.size()-2);
               
          topNode.setVisible(false);
          topNode.toBack();
       
          newTopNode.setVisible(true);
      }
  }

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

}
Chạy ví dụ:

3- Thiết kết StackPane với Scene Builder

  • File/New/Other..

Xem thêm các chuyên mục:

Có thể bạn quan tâm

Đây là các khóa học trực tuyến bên ngoài website o7planning mà chúng tôi giới thiệu, nó có thể bao gồm các khóa học miễn phí hoặc giảm giá.