如何让JavaFX的AnchorPane及内部TableView支持滚动解决内容裁剪问题

你遇到的显示裁剪问题可以通过嵌套ScrollPane滚动容器实现，具体修改方式如下：

1. FXML结构修改（推荐） #

直接调整FXML的节点结构，给整体界面和TableView分别加滚动支持，修改后的完整FXML代码如下：

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

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<!-- 根节点换成ScrollPane，整个界面内容超出时自动出滚动条 -->
<ScrollPane fitToWidth="true" fitToHeight="true" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="c195.View_Controller.CustomerScreenController">
    <content>
        <AnchorPane fx:id="CustomerAddLabel" minHeight="683.0" minWidth="824.0" style="-fx-background-color: aliceblue; -fx-border-color: black; -fx-border-radius: 5;">
            <children>
                <Label alignment="TOP_CENTER" layoutX="300.0" layoutY="14.0" prefHeight="38.0" prefWidth="226.0" style="-fx-border-color: gray; -fx-border-radius: 5;" text="Customer" textAlignment="CENTER">
                    <font>
                        <Font name="System Bold Italic" size="25.0" />
                    </font>
                </Label>
                <!-- 包TableView的AnchorPane换成ScrollPane，让TableView超出时可以水平滚动 -->
                <ScrollPane layoutX="16.0" layoutY="102.0" prefHeight="404.0" prefWidth="363.0" style="-fx-background-color: white;">
                    <content>
                        <TableView fx:id="CustomerTable" minWidth="853.0" style="-fx-border-color: black; -fx-border-radius: 5;">
                            <columns>
                                <TableColumn fx:id="CustomerIDColumn" prefWidth="63.0" text="ID" />
                                <TableColumn fx:id="CustomerNameColumn" prefWidth="175.0" text="Customer Name" />
                                <TableColumn fx:id="CustomerPhoneColumn" prefWidth="123.0" text="Phone" />
                                <TableColumn fx:id="CustomerAddressColumn" prefWidth="123.0" text="Address" />
                                <TableColumn fx:id="CustomerPostalCodeColumn" prefWidth="123.0" text="Postal Code" />
                                <TableColumn fx:id="CustomerDivisionColumn" prefWidth="123.0" text="Division" />
                                <TableColumn fx:id="CustomerCountryColumn" prefWidth="123.0" text="Country" />
                            </columns>
                        </TableView>
                    </content>
                </ScrollPane>
                <ButtonBar layoutX="587.0" layoutY="564.0" prefHeight="40.0" prefWidth="200.0">
                </ButtonBar>
                <ButtonBar layoutX="500.0" layoutY="613.0" prefHeight="40.0" prefWidth="200.0">
                    <buttons>
                        <Button fx:id="CustomerBackButton" mnemonicParsing="false" onAction="#CustomerBackButtonHandler" text="Back" />
                        <Button fx:id="CustomerDeleteButton" mnemonicParsing="false" onAction="#CustomerDeleteButtonHandler" text="Delete" />
                    </buttons>
                </ButtonBar>
                <Label fx:id="CustomerLabel" layoutX="542.0" layoutY="52.0" prefHeight="40.0" prefWidth="90.0" textFill="#1924e8">
                    <font>
                        <Font name="System Bold Italic" size="20.0" />
                    </font>
                </Label>
            </children>
        </AnchorPane>
    </content>
</ScrollPane>

修改点说明： #

• 根节点替换为ScrollPane后，设置了fitToWidth和fitToHeight属性，窗口放大时内容自动适配，窗口缩小到小于内容最小宽高时自动出现全局滚动条，无需最大化就能滑动查看所有控件。
• 原来包裹TableView的AnchorPane替换为ScrollPane，同时给TableView设置minWidth为所有列宽的总和，避免列被强制压缩，超出容器宽度时自动出现水平滚动条，Country列可完整显示。

2. 代码动态实现（无需修改FXML） #

如果不想改动FXML结构，也可以在控制器initialize方法中新增如下代码实现：

@Override
public void initialize(URL url, ResourceBundle rb) {
    // 原有逻辑全部保留，下方新增滚动逻辑
    // 设置TableView最小宽度为所有列宽总和，避免列被压缩
    CustomerTable.setMinWidth(63+175+123*5);
    // 给TableView所在容器套滚动层
    AnchorPane tableParent = (AnchorPane) CustomerTable.getParent();
    ScrollPane tableScroll = new ScrollPane(tableParent);
    tableScroll.setLayoutX(16);
    tableScroll.setLayoutY(102);
    tableScroll.setPrefSize(363,404);
    AnchorPane root = (AnchorPane) tableParent.getParent();
    root.getChildren().remove(tableParent);
    root.getChildren().add(tableScroll);
    // 给整个根界面套滚动层
    ScrollPane rootScroll = new ScrollPane(root);
    rootScroll.setFitToWidth(true);
    rootScroll.setFitToHeight(true);
}

内容的提问来源于stack exchange，提问作者rohit