logo标签列表

JavaFX 2 BorderPane 如何充分利用空间

javauser-interfacejavafxhtml-editor
7

我遇到了一个小问题，自己无法解决。

我试图在我的BorderPane中放置一个包含TextField和HTML-Editor的vBox，但是没有使用完整的空间。另一个问题是，如果我缩小窗口，html-editor会与我的左侧选项窗口重叠。

enter image description here

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);
}
4个回答
31

这里有一些问题，我会尝试解决它们并提供一些建议和示例解决方案。

我尝试将一个包含TextField和HTML-Editor的vBox放置在BorderPane中，但不是所有空间都被使用。

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

但即使您这样做了，（截至2.2b13），WebPane大小仍然存在一个bug，会导致问题。内部实现WebPane作为包含工具栏和可编辑WebView的GridPane。默认情况下，WebView的首选大小为800x600。HtmlEditor控件没有设置GridPane约束条件，以允许它的大小超过其首选大小。

要解决此问题，您可以通过css查找在WebView添加到活动Scene后手动调整GridPane约束条件。以下是一些代码示例：

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

当我缩小窗口时，html编辑器会与我左侧选项窗口重叠。

在BorderPane的中心面板中显式设置最小宽度设置，以使其不会溢出外部边缘面板。

editorBox.setMinSize(0, 0);

你需要这样做，因为BorderPane文档指出：

默认情况下，BorderPane不裁剪其内容，因此如果子元素的最小大小防止其适合其空间，则可能会使子元素的边界超出自己的边界。

另外，你代码中的查找调用有些可疑。通常情况下，在节点添加到已显示的舞台上并且JavaFX系统对该节点运行CSS布局之前，无法通过css ID查找节点，否则查找将返回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();
  }
}
感谢您的长篇回答。我在这个问题上真的很困惑，非常感谢您在回答中投入了那么多的精力。由于您的帮助，我的JavaFX理解得到了提高 :) - Googles
4
谢谢你提供有关使用ScenicView的提示，这个工具似乎确实非常有用。+1 - Axel
0

我也遇到了同样的问题。我的AnchorPane在BorderPane内部没有填满。为prefSize设置一个较大的数字对我有用。因此，当BorderPane增长时，它会尽可能地为其子元素提供更多的空间。

anchorPane.setMinSize(25, 25);
anchorPane.setPrefSize(25000, 25000);
0
    GridPane gridPane = (GridPane) editor.getChildrenUnmodifiable().get(0);
    RowConstraints row1 = new RowConstraints();
    row1.setVgrow(Priority.NEVER);
    RowConstraints row2 = new RowConstraints();
    row2.setVgrow(Priority.NEVER);
    RowConstraints row3 = new RowConstraints();
    row3.setVgrow(Priority.ALWAYS);
    gridPane.getRowConstraints().addAll(row1, row2, row3);
0

如何使用FXML设置和调整ScrollPane的大小：

package anchorscroll;

import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;
import java.util.logging.Level;
import java.util.logging.Logger;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Node;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;

public class FXMLDocumentController implements Initializable {

    private Label label;
    @FXML
    private VBox vp;
    @FXML
    private ScrollPane sp;
    @FXML

    private Pane panel;
    @FXML
    private double Width;
    @FXML
    private double Height;

    private void handleButtonAction(ActionEvent event) {
        System.out.println("You clicked me!");
        label.setText("Hello World!");
    }

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
        Width = panel.getWidth();
        Height = panel.getHeight();
        sp.setPrefWidth(Width - 60);
        sp.setPrefHeight(Height - 60);

        panel.widthProperty().addListener(p -> {
            Width = panel.getWidth();
            Height = panel.getHeight();
            System.out.println("Width " + Width + " Height " + Height);
            sp.setPrefWidth(Width - 60);
            sp.setPrefHeight(Height - 60);
        });

        panel.heightProperty().addListener(p -> {
            Width = panel.getWidth();
            Height = panel.getHeight();
            System.out.println("Width " + Width + " Height " + Height);
            sp.setPrefWidth(Width - 60);
            sp.setPrefHeight(Height - 60);
        });

        VBox v = new VBox();
        for (int i = 0; i < 100; i++) {
            v.getChildren().add(new Button("Hello " + i));
        }
        sp.setContent(v);

        VBox p = new VBox();
        try {
            p = FXMLLoader.load(getClass().getResource("NewMessage.fxml")); // "/fxml/Register.fxml"
            sp.setContent(p);
        } catch (IOException ex) {
            Logger.getLogger(FXMLDocumentController.class.getName()).log(Level.SEVERE, null, ex);
        }

    }

}

!!! NewMessage.fxml 需要以 VBox 面板开始 !!!

如果您不需要加载 FXML，请注释或删除这两行：

p = FXMLLoader.load(getClass().getResource("NewMessage.fxml"));
sp.setContent(p);

而且布局：

<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<Pane fx:id="panel" prefHeight="400.0" prefWidth="600.0" stylesheets="@Styles.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="anchorscroll.FXMLDocumentController">
    <children>
        <HBox prefHeight="60.0" prefWidth="600.0">
            <children>
                <Label text="Label" />
            </children>
        </HBox>
        <VBox fx:id="vp" layoutY="60.0" prefHeight="540.0" prefWidth="60.0">
            <children>
                <Button mnemonicParsing="false" prefWidth="50.0" text="Button" />
            </children>
        </VBox>
        <ScrollPane fx:id="sp" fitToHeight="true" fitToWidth="true" layoutX="60.0" layoutY="60.0" prefHeight="340.0" prefWidth="540.0" vbarPolicy="ALWAYS" />
    </children>
</Pane>

布局图像（顶部栏，左侧栏，滚动内容窗格）

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接