使用 JavaFX 将 ScrollPane 的内容与 fitToWidth=false 居中
centering content of ScrollPane with fitToWidth=false using JavaFX
你好我有以下情况:
<ScrollPane xmlns:fx="http://javafx.com/fxml" fx:controller="MenuController" fx:id="menuPane" stylesheets="/fxml/styles/menu_style.css" fitToWidth="true" fitToHeight="true" hbarPolicy="ALWAYS" vbarPolicy="ALWAYS">
<VBox alignment="CENTER">
<HBox alignment="CENTER">
<VBox fx:id="menuView">
<elements></elements>
</VBox>
</HBox>
</VBox>
</ScrollPane>
看起来像这样:
全屏对齐
但是,当您缩小滚动窗格的宽度时,它不起作用。
对齐调整大小
当我将 fitToWidth 的值从 true 更改为 false 时,我得到:
滚动全屏
所以没有水平居中对齐。但是滚动有效:
滚动调整大小
是否可以同时进行对齐和滚动?
奇怪的是高度滚动和垂直对齐工作正常。
不能添加超过 2 张图片,很抱歉。
当视口宽度小于内容宽度时,那么内容的位置当然是由水平滚动条的位置决定的,这大概就是你想要的。
当视口宽度大于内容宽度时,内容子节点的位置由内容的布局以及您在其上设置的任何对齐方式决定。内容本身在视口中的位置是视口布局的函数,您对此的控制有限(据我所知)。
因此,一种选择是将内容的最小宽度绑定到视口的实际宽度,强制内容至少与视口一样大。您可以在 FXML 中执行此操作:
<ScrollPane xmlns:fx="http://javafx.com/fxml" fx:controller="MenuController" fx:id="menuPane" stylesheets="/fxml/styles/menu_style.css" fitToWidth="true" fitToHeight="true" hbarPolicy="ALWAYS" vbarPolicy="ALWAYS">
<VBox alignment="CENTER" minWidth="${menuPane.viewportBounds.width}">
<HBox alignment="CENTER">
<VBox fx:id="menuView">
<elements></elements>
</VBox>
</HBox>
</VBox>
</ScrollPane>
你好我有以下情况:
<ScrollPane xmlns:fx="http://javafx.com/fxml" fx:controller="MenuController" fx:id="menuPane" stylesheets="/fxml/styles/menu_style.css" fitToWidth="true" fitToHeight="true" hbarPolicy="ALWAYS" vbarPolicy="ALWAYS">
<VBox alignment="CENTER">
<HBox alignment="CENTER">
<VBox fx:id="menuView">
<elements></elements>
</VBox>
</HBox>
</VBox>
</ScrollPane>
看起来像这样:
全屏对齐
但是,当您缩小滚动窗格的宽度时,它不起作用。
对齐调整大小
当我将 fitToWidth 的值从 true 更改为 false 时,我得到:
滚动全屏
所以没有水平居中对齐。但是滚动有效:
滚动调整大小
是否可以同时进行对齐和滚动?
奇怪的是高度滚动和垂直对齐工作正常。
不能添加超过 2 张图片,很抱歉。
当视口宽度小于内容宽度时,那么内容的位置当然是由水平滚动条的位置决定的,这大概就是你想要的。
当视口宽度大于内容宽度时,内容子节点的位置由内容的布局以及您在其上设置的任何对齐方式决定。内容本身在视口中的位置是视口布局的函数,您对此的控制有限(据我所知)。
因此,一种选择是将内容的最小宽度绑定到视口的实际宽度,强制内容至少与视口一样大。您可以在 FXML 中执行此操作:
<ScrollPane xmlns:fx="http://javafx.com/fxml" fx:controller="MenuController" fx:id="menuPane" stylesheets="/fxml/styles/menu_style.css" fitToWidth="true" fitToHeight="true" hbarPolicy="ALWAYS" vbarPolicy="ALWAYS">
<VBox alignment="CENTER" minWidth="${menuPane.viewportBounds.width}">
<HBox alignment="CENTER">
<VBox fx:id="menuView">
<elements></elements>
</VBox>
</HBox>
</VBox>
</ScrollPane>