JavaFX ScrollPane 滚动条被禁用

Question

我在 SceneBuilder 中构建了一个布局，它有一个 ScrollPane（在 StackPane 内部），其中包含一个 StackPane，其中包含一个包含 ImageView 的 Group（与左中对齐）。出于某种原因，无论我使用 Ctrl+P 在 SceneBuilder 中预览还是在我的程序中运行，水平滚动条都被禁用。滚动条确实显示右侧还有更多内容可以滚动到，但我无法滚动到它。它看起来像这样：

这是 FXML：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.Group?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.effect.DropShadow?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>


<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: white;" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1">
   <center>
      <StackPane prefHeight="150.0" prefWidth="200.0" style="-fx-background-color: white;" BorderPane.alignment="CENTER">
         <children>
            <ScrollPane id="scoreScrollPane" fitToHeight="true" hbarPolicy="ALWAYS" prefHeight="0.0" prefWidth="0.0" vbarPolicy="NEVER">
               <content>
                  <StackPane alignment="CENTER_LEFT">
                     <children>
                        <Group id="scoreGroup" StackPane.alignment="CENTER_LEFT">
                           <children>
                              <ImageView id="scoreImage" fitHeight="150.0" fitWidth="3000.0" pickOnBounds="true" preserveRatio="true">
                                 <image>
                                    <Image url="@Untitled.png" />
                                 </image>
                              </ImageView>
                           </children>
                        </Group>
                     </children>
                  </StackPane>
               </content>
            </ScrollPane>
            <HBox id="toolbar" alignment="TOP_CENTER" prefHeight="100.0" prefWidth="200.0" spacing="8.0">
               <children>
                  <Button id="recordButton" mnemonicParsing="false" text="Record" />
                  <Button id="stopButton" mnemonicParsing="false" text="Stop" />
               </children>
               <effect>
                  <DropShadow />
               </effect>
            </HBox>
         </children>
      </StackPane>
   </center>
</BorderPane>

我尝试了 AS_NEEDED 和 ALWAYS 的水平滚动策略。

Answer 1

您有很多问题（最重要的是带有控件的 HBox 覆盖了您的 ScrollPane，拦截了否则会进入 ScrollPane）：

1. 为您的 ImageView 设置 preserveRatio="false" 而不是 preserveRatio="true"，否则图像可能不会增长到您提供的 fitWidth（因为它可能会先达到 fitHeight 限制而不再增长宽度）。
2. 在您的 HBox 上设置 maxHeight="-Infinity"，（这将确保 HBox 的最大高度不会超过 HBox 的首选高度，否则 HBox 将拦截您的 ScrollPane 的鼠标点击）。要么这样，要么为 HBox 设置pickOnBounds="false"，这样即使 HBox 覆盖了 ScrollPane，HBox 也不会拦截 ScrollPane 的鼠标点击。

注意：为了调试布局大小，有时临时为区域添加背景或边框以查看其真实大小很有用，例如style="-fx-background-color: red;"。

除了将控件和图像放置在覆盖内容的 StackPane 中之外，也许您可​​能想要使用 VBox 代替，它可以垂直而不是相互叠加。