JavaFX 2 BorderPane 使用完整空间

Question

我只是面临一个我自己无法解决的小问题。 我尝试在我的 BorderPane 中放置一个包含 TextField 和 HTML 编辑器的 vBox，但是 未使用全部空间。另一个问题是，如果我缩小窗口，html 编辑器 与我左侧的选项窗口重叠。

private void initEditor()
{
editor = new HTMLEditor();
editor.setId("editor");
editor.lookup(".top-toolbar").setDisable(true);
editor.lookup(".top-toolbar").setManaged(false);
((ToolBar) editor.lookup(".bottom-toolbar")).getItems().addAll(FXCollections.observableArrayList(((ToolBar)editor.lookup(".top-toolbar")).getItems()));

editorBox = new VBox();
TextField field = new TextField();
field.setPrefHeight(36);
field.setId("editor-title");
editorBox.setFillWidth(true);
editorBox.getChildren().addAll(field, editor);
    root.setCenter(editorBox);
}

Answer 1

好的，所以这里出现了一些问题，我将尝试解决这些问题并提供一些建议和示例解决方案。

I try to place a vBox including a TextField and a HTML-Editor in my BorderPane, but the full space is not used.

您需要使用 VBox.setVgrow(editor, Priority.ALWAYS)方法让 HTMLEditor 占用 VBox 中的任何额外空间。此外，请确保 HTMLeditor 具有无限的最大高度，以便它可以增长以适应可用区域，例如 editor.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE)。调用 editorBox.setFillWidth(true) 是多余的，因为 fillWidth 属性的默认值为 true。

但即使你做了所有这些，(从 2.2b13 开始)WebPane 大小调整中存在一个错误，这会给你带来问题。 WebPane 在内部实现为包含工具栏和可编辑 WebView 的 GridPane。默认情况下，WebView 的首选大小为 800x600。 HtmlEditor 控件不会为 WebView 设置 GridPane 约束以允许其大小超过其首选大小。

要解决此问题，您可以在将 WebView 添加到 Activity 场景后通过 css 查找来查找 WebView 并手动调整 GridPane 约束。这是执行此操作的一些代码:

stage.show();
...
WebView webview = (WebView) editor.lookup("WebView");
GridPane.setHgrow(webview, Priority.ALWAYS);
GridPane.setVgrow(webview, Priority.ALWAYS);

I shrink the window, the html-editor overlaps with my left option window.

在 BorderPane 中明确设置中央 Pane 的最小宽度设置，这样它就不会溢出外边缘 Pane 。

editorBox.setMinSize(0, 0);

您需要这样做，因为 BorderPane documentation状态:

BorderPane does not clip its content by default, so it is possible that childrens' bounds may extend outside its own bounds if a child's min size prevents it from being fit within it space.

---

顺便说一句，您代码中的查找调用很可疑。通常，您不能通过 css ID 查找节点，直到节点已添加到显示舞台上的 Activity 场景并且 JavaFX 系统有机会在节点上运行 CSS 布局传递 - 否则查找将只返回 null。

---

为了调试 JavaFX 布局问题，ScenicView应用程序是无价的。

---

这是一个完整的示例，用于生成类似于您问题中链接的图像的布局，但没有您提到的问题。

import com.javafx.experiments.scenicview.ScenicView;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.URL;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.web.*;
import javafx.stage.*;

public class HtmlEditorInBorderPane extends Application {
  public static void main(String[] args) { launch(args); }
  @Override public void start(final Stage stage) throws IOException {
    // option pane.
    VBox optionPane = new VBox(10);
    MenuBar menuBar = new MenuBar();
    menuBar.getMenus().addAll(new Menu("School"), new Menu("Social"), new Menu("Network"));
    TreeItem<String> root = new TreeItem<>("Private Notes");
    root.setExpanded(false);
    root.getChildren().addAll(new TreeItem<>("Layout"), new TreeItem<>("is not"), new TreeItem<>("easy"));
    TreeView<String> notes = new TreeView<>(root);
    optionPane.getChildren().addAll(menuBar, new Label("Kaiser Notes"), notes);
    optionPane.setStyle("-fx-background-color: cornsilk; -fx-padding: 10;");

    // editor pane.
    HTMLEditor editor = new HTMLEditor();
    VBox editorBox = new VBox(10);
    TextField textField = new TextField();
    editorBox.getChildren().addAll(textField, editor);
    editorBox.setStyle("-fx-background-color: mistyrose; -fx-padding: 10;");
    editor.setHtmlText(getSampleText());

    // option layout constraints
    VBox.setVgrow(notes, Priority.ALWAYS);

    // editor layout constraints
    textField.setMinHeight(Control.USE_PREF_SIZE); // stop the textfield from getting squashed when the scene is sized small.
    VBox.setVgrow(editor, Priority.ALWAYS);        // tells the editor to fill available vertical space.
    editorBox.setMinSize(0, 0);                    // stops the editor from overflowing it's bounds in a BorderPane.

    // layout the scene.
    BorderPane layout = new BorderPane();
    layout.setLeft(optionPane);
    layout.setCenter(editorBox);
    stage.setScene(new Scene(layout));
    stage.show();

    // addition of static layout grow constraints for the htmleditor embedded webview.
    WebView webview = (WebView) editor.lookup("WebView");
    GridPane.setHgrow(webview, Priority.ALWAYS);  // allow the webview to grow beyond it's preferred width of 800.
    GridPane.setVgrow(webview, Priority.ALWAYS);  // allow the webview to grow beyond it's preferred height of 600.
  }

  // get some dummy lorem ipsum sample text.
  private String getSampleText() throws IOException {
    StringBuilder builder = new StringBuilder();
    try (BufferedReader in = new BufferedReader(new InputStreamReader(new URL("http://www.lorem-ipsum-text.com/").openStream()))) {
      String string;
      while ((string = in.readLine()) != null) {
        builder.append(string);
      }
    }
    return builder.toString();
  }
}