JavaFX CSS
JavaFX - CSS

JavaFX - 樹檢視

TreeView 是一種圖形使用者介面元件，用於顯示專案的層次結構。它由一個根節點和任意數量的子節點組成。主要地，樹檢視用於組織具有層次結構的資料。它提供了對資料及其與其他元件關係的更好理解。在下圖中，我們可以看到元件的樹檢視。

JavaFX 中的 TreeView

在 JavaFX 中，樹檢視由名為 TreeView 的類表示。此類屬於 javafx.scene.control 包。透過例項化此類，我們可以在 JavaFX 中建立一個樹檢視。TreeView 類的建構函式如下所示：

TreeView() - 這是預設建構函式，用於構造一個空的樹檢視。
TreeView(TreeItem rootNode) - 它建立一個新的樹檢視，並使用指定的根節點。

如何在 JavaFX 中建立 TreeView？

按照以下步驟在 JavaFX 中建立樹檢視。

步驟 1：建立 TreeView 的根節點

首先，為所有專案的列表建立容器。在這種情況下，根節點是容器，因為它包含所有子節點。要建立根節點，我們使用 TreeItem 類，它是 javafx.scene.control 包的一部分。將根節點的名稱作為引數值傳遞給此類的建構函式。

// Creating the root node
TreeItem<String> root = new TreeItem<>("Smartphones");

步驟 2：建立 TreeView 的子節點

再次使用 TreeItem 類建立子節點。建立子節點後，使用 getChildren() 方法以及 addAll() 將所需專案新增到其中。

TreeItem<String> ios = new TreeItem<>("iOS");
ios.getChildren().addAll(
   new TreeItem<>("iPhone 15 Plus"),
   new TreeItem<>("iPhone 14")
);

步驟 3：將子節點新增到根節點

要將子節點新增到根節點，請將子節點的名稱作為引數值傳遞給 addAll() 方法，如下面的程式碼塊所示：

// Add the child nodes to the root node
root.getChildren().addAll(android, ios);

步驟 4：例項化 TreeView 類

要建立樹檢視，請例項化 TreeView 類並將根節點作為引數值傳遞給其建構函式，如下面的程式碼所示：

// Create the TreeView and add the root node
TreeView<String> treesV = new TreeView<>(root);

步驟 5：啟動應用程式

建立樹檢視後，請按照以下步驟正確啟動應用程式：

首先，透過將 TreeView 物件作為引數值傳遞給其建構函式來例項化名為 Scene 的類。我們還可以將應用程式螢幕的尺寸作為可選引數傳遞給此建構函式。
然後，使用 Stage 類的 setTitle() 方法設定舞臺的標題。
現在，使用名為 Stage 的類的 setScene() 方法將 Scene 物件新增到舞臺。
使用名為 show() 的方法顯示場景的內容。
最後，藉助 launch() 方法啟動應用程式。

示例

以下是使用 JavaFX 建立 TreeView 的程式。將此程式碼儲存在名為 JavafxTreeview.java 的檔案中。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeView;
import javafx.stage.Stage;
public class JavafxTreeview extends Application {
   @Override
   public void start(Stage stage) throws Exception {
      // Creating the root node
      TreeItem<String> root = new TreeItem<>("Smartphones");
      root.setExpanded(true);
      // Creating its child nodes
      TreeItem<String> android = new TreeItem<>("Android");
      android.getChildren().addAll(
         new TreeItem<>("Samsung Galaxy S23 Ultra"),
         new TreeItem<>("Xiaomi Redmi Note 13 Pro"),
         new TreeItem<>("OnePlus 11R")
      );
      TreeItem<String> ios = new TreeItem<>("iOS");
      ios.getChildren().addAll(
         new TreeItem<>("iPhone 15 Plus"),
         new TreeItem<>("iPhone 14")
      );
      // Add the child nodes to the root node
      root.getChildren().addAll(android, ios);
      // Create the TreeView and add the root node
      TreeView<String> treesV = new TreeView<>(root);
      // Create a scene and add the TreeView
      Scene scene = new Scene(treesV, 400, 300);
      stage.setTitle("TreeView in JavaFX");
      stage.setScene(scene);
      stage.show();
   }
   public static void main(String[] args) {
      launch(args);
   }
}

使用以下命令從命令提示符編譯並執行儲存的 Java 檔案：

javac --module-path %PATH_TO_FX% --add-modules javafx.controls JavafxTreeview.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls JavafxTreeview

輸出

執行上述程式後，會生成一個 JavaFX 視窗，其中顯示了一個 TreeView，其中包含如下所示的智慧手機列表。

設定 TreeView 的滑鼠事件

如果我們想顯示使用者點選了哪些專案，那麼我們可以使用 setOnMouseClicked() 方法，並傳遞一個 lambda 表示式，如下面的 JavaFX 程式碼所示。將此程式碼儲存在名為 JavafxTreeview.java 的檔案中。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeView;
import javafx.stage.Stage;
public class JavafxTreeview extends Application {
   @Override
   public void start(Stage stage) throws Exception {
      // Creating the root node
      TreeItem<String> root = new TreeItem<>("Smartphones");
      root.setExpanded(true);
      // Creating its child nodes
      TreeItem<String> android = new TreeItem<>("Android");
      android.getChildren().addAll(
         new TreeItem<>("Samsung Galaxy S23 Ultra"),
         new TreeItem<>("Xiaomi Redmi Note 13 Pro"),
         new TreeItem<>("OnePlus 11R")
      );
      TreeItem<String> ios = new TreeItem<>("iOS");
      ios.getChildren().addAll(
         new TreeItem<>("iPhone 15 Plus"),
         new TreeItem<>("iPhone 14")
      );
      // Add the child nodes to the root node
      root.getChildren().addAll(android, ios);
      // Create the TreeView and add the root node
      TreeView<String> treesV = new TreeView<>(root);
      // Handle mouse clicks on the nodes
      treesV.setOnMouseClicked(event -> {
         // Get the selected item
         TreeItem<String> item = treesV.getSelectionModel().getSelectedItem();
         if (item != null) {
            // Display the item text
            System.out.println(item.getValue());
         }
      });
      // Create a scene and add the TreeView
      Scene scene = new Scene(treesV, 400, 300);
      stage.setTitle("TreeView in JavaFX");
      stage.setScene(scene);
      stage.show();
   }
   public static void main(String[] args) {
      launch(args);
   }
}

要從命令提示符編譯並執行儲存的 Java 檔案，請使用以下命令：

javac --module-path %PATH_TO_FX% --add-modules javafx.controls JavafxTreeview.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls JavafxTreeview

輸出

執行上述程式碼後，將生成以下輸出。當我們點選專案時，其名稱將顯示在控制檯上。

列印頁面