更改树视图的字体和大小

Question

我正在尝试使用树视图创建某种菜单，但遇到以下问题：树视图很小，我想增加它的大小，但我使用的 css 似乎不起作用。树被添加到锚窗格上，我试图调整它的大小，但似乎没有 change.Not 只有项目但是当我调整容器窗格大小时树视图没有改变（它覆盖了场景的一半但是我想要它作为覆盖场景左侧的侧边栏）

public class ManagerPanel {

    AnchorPane anchor = new AnchorPane();

    public ManagerPanel(){

        TreeItem sideBar = new TreeItem();

        TreeItem createTest = new TreeItem("create test");

        TreeItem addStudents = new TreeItem("add students");
        TreeItem addQuestions = new TreeItem("add questions");

        createTest.getChildren().addAll(addStudents,addQuestions);

        TreeItem chats = new TreeItem("chats");

        sideBar.getChildren().addAll(createTest,chats);

        TreeView treeView = new TreeView();
        treeView.setRoot(sideBar);
        treeView.setShowRoot(false);

        AnchorPane container = new AnchorPane(treeView);
        treeView.getStyleClass().add("Tree.css");
        anchor.getChildren().add(container);

        Scene scene = new Scene(anchor);
        Stage stage = new Stage();
        stage.setWidth(1300);
        stage.setHeight(800);
        stage.setScene(scene);
        stage.show();
    }

}

我也需要更改字体，但没有任何反应。这是我在 css 文件中使用的代码：

.Tree .tree-cell{
    -fx-font: 20px "Calibri Light";
    -fx-stroke: #eeeeee;
    -fx-background-color: brown;
    -fx-text-fill: navajowhite;
    -fx-font-size: 20;
}

提前谢谢你:)

ps。我放弃了让它右对齐，因为我没有太多时间，也没有太多关于它的数据。

Answer 1

添加样式表

您没有正确地将样式表添加到场景图中。你有：

treeView.getStyleClass().add("Tree.css");

顾名思义，就是添加样式class。这就是允许您在样式表中使用 .Tree { ... } 的原因。但是，您正在添加 "Tree.css" ，这表明您正在尝试使用该方法来添加样式表本身。您应该将以上内容更改为：

// Ideally you'd use "tree" to follow CSS conventions, but "Tree" 
// will work. If you do use "tree" then you'll have to change .Tree
// to .tree in the stylesheet. Also, note that TreeView already has
// a style class of "tree-view" that you can use instead.
treeView.getStyleClass().add("Tree");

并添加：

treeView.getStylesheets().add("<path-to-stylesheet>"); // or add to an ancestor of 'treeView'
// or
scene.getStylesheets().add("<path-to-stylesheet>");

参见 Scene#getStylesheets(), Parent#getStylesheets(), and the JavaFX CSS Reference Guide。为了帮助确定样式表的路径应该检查什么：

布局

您的 TreeView 很小，因为您使用 AnchorPane 的方式。 AnchorPane 布局由 setting constraints 作用于它的子元素。这些约束决定了子元素相对于布局边的放置位置。所以如果你想让 TreeView 占据 AnchorPane 的整个左侧，你应该使用类似的东西：

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

public class App extends Application {

  @Override
  public void start(Stage stage) {
    TreeItem<String> rootItem = new TreeItem<>();

    TreeItem<String> createItem = new TreeItem<>("Create");
    createItem.getChildren().add(new TreeItem<>("New Student"));
    createItem.getChildren().add(new TreeItem<>("New Question"));
    rootItem.getChildren().add(createItem);

    rootItem.getChildren().add(new TreeItem<>("Chats"));

    TreeView<String> treeView = new TreeView<>(rootItem);
    treeView.setShowRoot(false);

    AnchorPane sceneRoot = new AnchorPane(treeView);
    AnchorPane.setTopAnchor(treeView, 0.0);
    AnchorPane.setLeftAnchor(treeView, 0.0);
    AnchorPane.setBottomAnchor(treeView, 0.0);

    stage.setScene(new Scene(sceneRoot, 600, 400));
    stage.show();
  }
}

请注意，我没有为右侧设置锚点，因此 TreeView 使用其首选宽度。然后您可以配置此首选宽度（和 min/max 宽度）来自定义它。

但是，使用 AnchorPane 通常会导致 UI 无响应（在调整大小的意义上）。该布局鼓励使用硬编码值，以防止节点随着 UI 更改大小而调整大小。您应该考虑使用其他布局，这些布局会自动重新定位和调整其子项的大小以填充其分配的 space。例如，您可以使用 BorderPane 并将 TreeView 设置为左节点：

BorderPane pane = new BorderPane();
pane.setLeft(treeView);

有关详细信息，请查看 Working with Layouts in JavaFX and the javafx.scene.layout 包。

从左到右的方向

关于从右到左方向的目标，您应该考虑使用 Scene#nodeOrientation and/or Node#nodeOrientation 属性。

原始类型

另请查看 What is a raw type and why shouldn't we use it?。 TreeView 和 TreeItem 都是泛型 class，但您没有指定任何类型参数。您似乎正在使用 String 作为值类型，因此您应该使用，例如：

TreeItem<String> chats = new TreeItem<>("chats");
// and
TreeView<String> treeView = new TreeView<>();
// etc...

更改树视图的字体和大小

changing treeview's font and size

css

java

treeview

javafx

添加样式表

布局

从左到右的方向

原始类型