随父级缩放的 JavaFX 布局

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19174983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-12 14:45:06  来源:igfitidea点击:

JavaFX layout that scales with parent

javalayoutuser-interfacejavafx

提问by Warkst

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.htmand others) is that JavaFXlayout managers focus on scaling the size of the parent based on the size of the content, whereas Swingfocusses on scaling the content according to the parent, at least based on the Layoutbeing used.

由于增强的多媒体、网络查看器和使用视觉效果的可能性,我在项目中使用 JavaFX 而不是 Swing。但是,我从网上发现的内容(http://docs.oracle.com/javafx/2/layout/jfxpub-layout.htm和其他人)中了解到,JavaFX布局管理器专注于缩放父级基于内容的大小,而Swing专注于根据父级缩放内容,至少基于Layout正在使用的内容。

Right now I'm using an Accordionwith some TitledPanechildren. One of them contains a GridPanefor 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 Stageor Scene), equivalent to what a GridLayout(2,1)inside a BorderLayout.CENTERwould accomplish. For this, I've added a GridPanewith 2 RowConstraints using setPercentHeight(50)and 1 ColumnConstraintwith 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 setMaxWidthto 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?

现在我正在Accordion和一些TitledPane孩子一起使用。其中一个包含 a GridPane,原因很简单,它是我所知道的模拟 a 的最佳方式GridLayout(正如我从上一个问题中了解到的:JavaFX 布局等效于 GridLayout)。我想将TitledPane的内容分成 2 行和 1 列,每行的高度占可用空间的 50% TitledPane(用Stage或缩放Scene),相当于 aGridLayout(2,1)内部BorderLayout.CENTER可以实现的效果。为此,我添加了一个GridPanewith 2 RowConstraints usingsetPercentHeight(50)和 1 ColumnConstraintwith setPercentWidth(100)。但是,我注意到内容与网格正确缩放,但网格没有占用所有可用空间TitledPane(因为显然它不像 aBorderPane的中心)。我也试过用setMaxWidth父级来缩放内容,但它似乎也不起作用(如此处所述:JavaFX:如何使我的自定义组件使用父级布局中的所有可用空间?)。即使是这样,我是否需要在我的 UI 元素树中将最大宽度设置为每个后代才能让它们全部缩放?

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

无论哪种方式,有没有人知道如何TitledPane在彼此下方制作2 个相等的空间,并与 titledpane 的大小成比例?

column width does not take up all available space

列宽不占用所有可用空间

采纳答案by Rasha

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);

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

如果您执行此代码,gridpane 将填充其所有父级(检查红色跨越 titledpane 内容)。

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:

但是,gridpane 的内容不会填满所有的列。如果您尝试调整窗口大小,您将看到文本区域的宽度没有随着网格窗格而变化。要解决这个问题,您需要告诉网格窗格的第一列随着网格窗格本身的增长而增长。这样做的方法是添加以下约束:

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