JavaFX - 分页：如何隐藏底部（控制）面板并用页面占据其区域？

Posted 2023-02-26

【中文标题】JavaFX - 分页：如何隐藏底部（控制）面板并用页面占据其区域？

【英文标题】：JavaFX - pagination: how to hide bottom (control) panel and occupy its area with a page?

【发布时间】：2021-10-21 13:30:06

【问题描述】：

在某些情况下我需要完全隐藏分页控件中的换页按钮，但是隐藏区域可能已经被一个页面占据了，也就是向下扩展。

在这个带有分页的窗口示例中，我想隐藏灰色区域并将天空色区域放大到隐藏区域。

我该怎么做？

我试过了：

package javafxpagination;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.Pagination;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class TestPagination extends Application 
  public static void main(String[] args) 
    launch(args);
  

  @Override
  public void start(Stage primaryStage) 
    primaryStage.setTitle("Test pagination");

    Pagination pagination = new Pagination();
    pagination.setPageCount(4);
    pagination.setMaxPageIndicatorCount(4);
    pagination.setCurrentPageIndex(0);

    pagination.setPageFactory((pageIndex) -> 

      Pane pagePane = new Pane();
      pagePane.setPrefWidth(600);
      pagePane.setPrefHeight(400);
      pagePane.setStyle("-fx-background-color: #DDF1F8;"); //sky color
      Button button = new Button("Hide/show page buttons");
      button.setOnAction(new EventHandler<ActionEvent>()
      
        @Override
        public void handle(ActionEvent event)
        
          HBox paginationHBox = (HBox)pagination.lookup(".control-box");
          Node paginationControl = pagination.lookup(".pagination-control");
          paginationControl.setStyle("-fx-background-color: gray;");
          paginationControl.setVisible(!paginationControl.isVisible()); //switch visibility
          paginationControl.setManaged(paginationControl.isVisible());
          paginationControl.minHeight(0.0);
          paginationControl.prefHeight(0.0);
          paginationControl.maxHeight(0.0);
        
      );
      pagePane.getChildren().add(button);
      return pagePane;
    );

    VBox vBox = new VBox(pagination);
    Scene scene = new Scene(vBox, 800, 600);
    primaryStage.setScene(scene);
    primaryStage.show();
  

但它没有隐藏灰色区域，也没有拉伸天空色的页面区域。

【问题讨论】：

为什么？你增加了空白空间，你的用户就会失去对显示哪个页面的控制..

@kleopatra 我需要隐藏按钮，因为根据某些条件，我只显示一页（其他页面不可用）。当然，我可以在这个地方插入一个面板，而不是使用一页分页，但我必须考虑哪种解决方案会更好。 ;-)

【参考方案1】：

使用 VBox 布局管理器的解决方案

通过将此行添加到您的应用程序，分页控件将扩展以填充可用空间：

VBox.setVgrow(pagination, Priority.ALWAYS);

这回答了您问题的“如何占据”部分：“JavaFX - 分页：如何隐藏底部（控制）面板并用页面占据其区域？”

对于隐藏，您已经完成了，这是基于以下信息：

JavaFX - setVisible hides the element but doesn't rearrange adjacent nodes

加上查找，

Node paginationControl = pagination.lookup(".pagination-control")

你已经在做的，加上这些行：

paginationControl.setVisible(!paginationControl.isVisible());
paginationControl.setManaged(paginationControl.isVisible());

不需要将分页控件的 minHeight、prefHeight、maxHeight 设置为 0 的行，我不建议保留它们。

布局管理器背景

布局由布局管理器管理。这些布局管理器有一些默认行为，但有时您需要配置它们或给它们提示以实现您想要的布局行为。

您的Pagination 控件位于VBox 中。如果您查看VBox documentation，它会说：

如果将 vbox 的大小调整为大于其首选高度，默认情况下它会将子项保持在其首选高度，而多余的空间未使用。如果应用程序希望为一个或多个孩子分配额外的空间，它可以选择对孩子设置 vgrow 约束。

因此，您正在使用的默认行为不是扩展托管内容以填充额外的可用空间（这就是您所看到的）。

替代解决方案 - 替换分页控件

另一种实现是，在隐藏时，将分页控件替换为要显示的面板，而不是隐藏分页控件。

例如，从父布局容器（vbox）中删除分页控件，并在其位置添加要直接显示的面板到父布局容器中。

要再次显示分页，你可以做相反的事情。

这可能是我对这类工作更喜欢的解决方案。

对于这样的解决方案，您需要注意节点在任何时候都只能是单个父节点的子节点，并在您的实施中考虑到这一点。此外，之前关于布局管理器和在节点上设置 Vgrow 约束的信息仍然适用于此解决方案。

【讨论】：

使用“VBox.setVgrow(pagination, Priority.ALWAYS);”足以实现我所需要的。非常感谢我的朋友！