JavaFX如何实现AnchorPane子元素随父容器同步折叠效果

• AnchorPane默认不开启超出边界裁剪，父容器宽度收缩到小于子元素Label的布局位置+内容宽度时，超出父容器范围的Label内容仍然会被渲染，不会被隐藏
• 当前仅修改了父容器的prefWidth和minWidth，没有对父容器的裁剪属性做配置，也没有对子元素的可见性/位置做同步控制

方案1：开启父容器裁剪（改动最小） #

直接在FXML的section_to_hide节点添加clipToBounds="true"属性，强制AnchorPane裁剪所有超出自身边界的内容：

<AnchorPane fx:id="section_to_hide" prefHeight="200.0" prefWidth="200.0" 
    style="-fx-background-color: red;" BorderPane.alignment="CENTER"
    clipToBounds="true">
    <!-- 内部Label代码保持不变 -->
</AnchorPane>

该方案不需要修改Controller代码，即可实现子元素随父容器折叠时自动被裁剪的效果。

方案2：添加子元素同步动画（效果更丝滑） #

如果希望子元素不是被生硬裁剪，而是跟随折叠动画同步隐藏/位移，可以先将内部Label注入Controller，再调整动画逻辑：

public class Controller {
    @FXML
    private Label hide_btn;
    @FXML
    private Label hide_btn1; // 新增注入内部Label
    @FXML
    private AnchorPane section_to_hide;

    @FXML
    private void hide() {
        Animation animation = new Timeline(
                new KeyFrame(Duration.millis(300),
                        // 父容器宽度收缩逻辑不变
                        new KeyValue(section_to_hide.prefWidthProperty(), 0),
                        new KeyValue(section_to_hide.minWidthProperty(), 0),
                        // 新增：Label同步向左位移
                        new KeyValue(hide_btn1.translateXProperty(), -200),
                        // 可选：Label同步降低透明度直到完全消失
                        new KeyValue(hide_btn1.opacityProperty(), 0)
                )
        );
        animation.play();
    }

    @FXML
    public void initialize() { }
}

如果后续需要实现展开动画，反向修改对应的属性值即可。

BorderPane的left节点折叠后，center节点会自动扩展填充剩余空间，不需要额外做配置。

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