与父级扩展的JavaFX布局 [英] JavaFX layout that scales with parent

问题描述

我在项目中使用JavaFX而不是Swing，因为增强的多媒体，webviewer和使用视觉效果的可能性。但是，我从网上找到的内容中学到了什么（ http ：//docs.oracle.com/javafx/2/layout/jfxpub-layout.htm 和其他人） JavaFX 布局经理专注于缩放父级的大小根据内容的大小，而 Swing 专注于根据父级扩展内容，至少基于布局正在使用。

I'm using JavaFX in a project instead of Swing because of the enhanced multimedia, webviewer and possibility to use visual effects. However, what I've learned from what I found on the web (http://docs.oracle.com/javafx/2/layout/jfxpub-layout.htm and others) is that JavaFX layout managers focus on scaling the size of the parent based on the size of the content, whereas Swing focusses on scaling the content according to the parent, at least based on the Layout being used.

现在我正在使用一个 Accordion 和一些 TitledPane 儿童。其中一个包含 GridPane ，原因很简单，这是我知道模拟 GridLayout 的最佳方式（因为我从我之前的问题中了解到：相当于GridLayout的JavaFX布局）。我希望将 TitledPane 的内容拆分为2行1列，每行在 TitledPane中的可用空间高度为50％ （使用 Stage 或场景缩放），相当于 BorderLayout.CENTER 内的GridLayout（2,1）将完成。为此，我使用 setPercentHeight（50）添加了 GridPane ，其中包含2 RowConstraint s 和1 ColumnConstraint ， setPercentWidth（100）。但是，我注意到内容正在适当地缩放网格，但网格没有占用 TitledPane 中的所有可用空间（因为显然它不像一个 BorderPane 的中心）。我也尝试使用 setMaxWidth 来使内容与父级一起扩展，但它似乎也不起作用（如下所述：JavaFX：如何使我的自定义组件全部可用父布局的空间？）。即使它会，我是否需要在我的UI元素树中将最大宽度设置为EACH后代以使它们全部缩放？

Right now I'm using an Accordion with some TitledPane children. One of them contains a GridPane for the simple reason it is the best way I know to emulate a GridLayout (as I learned from my previous question here: JavaFX layout equivalent to GridLayout). I want to have the TitledPane's content split in 2 rows and 1 column, each row with a 50% height of the available space in the TitledPane (scaling with the Stage or Scene), equivalent to what a GridLayout(2,1) inside a BorderLayout.CENTER would accomplish. For this, I've added a GridPane with 2 RowConstraints using setPercentHeight(50) and 1 ColumnConstraint with setPercentWidth(100). However, I've noticed the contents are scaling with the grid properly, but the grid is not taking up all available space in the TitledPane (because apparently it doesn't act like a BorderPane's center). I've also tried with setMaxWidth to make the content scale with the parent, but it doesn't seem to work either (as said here: JavaFX: How to make my custom component use all available space from parent layout?). And even if it would, do I need to set the max width to EACH descendent in my UI elements tree to have all of them scale?

无论哪种方式，有没有人知道如何制作一个 TitledPane ，在其下方有两个相等的空格，与标题窗格的大小一起缩放？

Either way, does anyone know how to make a TitledPane with 2 equal spaces in it underneath eachother that scale with the titledpane's size?

推荐答案

事实上，你的gridpane正在增长以填补其所有父级。
考虑下面的代码，为了调试目的，我在gridpane中添加了一个背景颜色（红色）。

In fact, your gridpane is growing to fill all its parent. Consider the below code, I have added a background color (red) to the gridpane for debugging purposes.

Accordion accordion = new Accordion();
TitledPane titledPane = new TitledPane();
titledPane.setText("Title");
GridPane gridPane = new GridPane();
gridPane.setStyle("-fx-background-color:red");

gridPane.add(new TextArea("Hello"), 0, 0);
gridPane.add(new TextArea("World"), 0, 1);

titledPane.setContent(gridPane);
accordion.getPanes().add(titledPane);

如果执行此代码，gridpane将填充其所有父代（检查全部的红色颜色）标题内容）。

If you execute this code, the gridpane will fill all its parent (check the red color spans all over the titledpane content).

但是，gridpane的内容不会填满所有列。如果您尝试调整窗口大小，您将看到textareas的宽度与gridpane一起没有变化。
要解决此问题，您需要告诉gridpane的第一列与gridpane本身一起增长。
这样做的方法是添加以下约束：

However, the content of the gridpane will not fill all the column. If you try to resize the window, you will see that the textareas are not changing in width along with the gridpane. To fix that, you need to tell the first column of the gridpane to grow with the gridpane itself. The way to do that is to add the following constraint:

ColumnConstraints columnConstraints = new ColumnConstraints();
columnConstraints.setFillWidth(true);
columnConstraints.setHgrow(Priority.ALWAYS);
gridPane.getColumnConstraints().add(columnConstraints);

这篇关于与父级扩展的JavaFX布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！