如何居中JavaFX 8滚动窗格的内容 [英] How to center the content of a javafx 8 scrollpane

问题描述

我有一个ScrollPane，其中包含一个GridPane，其中包含一个ImageView，其中包含一个ImageView.我想要的是将图像放置在GridPane中.

I have a ScrollPane, which contains a GridPane, which contains an ImageView, which contains an Image. What I want is for the Image to be centered in the GridPane.

没有ScrollPane，我可以使用setAlignment(Pos.TOP_CENTER)完成此操作，但是，一旦将GridPane添加到ScrollPane，图像就会显示在左上角.

Without the ScrollPane I was able to accomplish this with setAlignment(Pos.TOP_CENTER), however once I added the GridPane to the ScrollPane the Image was displayed in the upper-left corner.

如何获取ScrollPane以使用setAlignment()值或手动居中图像?

How do I either get the ScrollPane to use the setAlignment() value or manually center the Image?

---示例编辑---

---example edit---

不带滚动窗格的代码:

public class ImageDB extends Application
{
  @Override
  public void start(Stage root)
  {
    Image image = new Image("0.jpg");
    ImageView view = new ImageView();
    view.setImage(image);

    GridPane grid = new GridPane();
    grid.getChildren().add(view);

    grid.setAlignment(Pos.TOP_CENTER);

    BorderPane border = new BorderPane();
    border.setCenter(grid);

    root.setScene(new Scene(border));
    root.setMaximized(true);
    root.show();
  }
}

结果: https://i.imgur.com/eWvBQy6.png

带有滚动窗格的代码:

public class ImageDB extends Application
{
  @Override
  public void start(Stage root)
  {
    Image image = new Image("0.jpg");
    ImageView view = new ImageView();
    view.setImage(image);

    ScrollPane scroll = new ScrollPane();
    scroll.setContent(view);

    GridPane grid = new GridPane();
    grid.getChildren().add(scroll);

    grid.setAlignment(Pos.TOP_CENTER);

    BorderPane border = new BorderPane();
    border.setCenter(scroll);

    root.setScene(new Scene(border));
    root.setMaximized(true);
    root.show();
  }
}

结果: https://i.imgur.com/1aJDX4m.png

推荐答案

正在发生的事情是，当网格窗格位于滚动窗格的中心时，图像视图位于滚动窗格的左上方.

What's happening is that while the grid pane is centering the scroll pane, the image view is sitting at the top left of the scroll pane.

一种解决方法是将图像视图包装在堆栈窗格中(默认情况下居中)，并确保堆栈窗格至少与滚动窗格的视口一样宽:

One fix is to wrap the image view in a stack pane (which centers by default), and make sure the stack pane is at least as wide as the scroll pane's viewport:

SSCCE:

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.geometry.HPos;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class ImageDB extends Application
{
  @Override
  public void start(Stage root)
  {
//    Image image = new Image("0.jpg");
    Image image = createImage();
    ImageView view = new ImageView();
    view.setImage(image);
    StackPane imageHolder = new StackPane(view);

    ScrollPane scroll = new ScrollPane();
    scroll.setContent(imageHolder);

    GridPane grid = new GridPane();

    imageHolder.minWidthProperty().bind(Bindings.createDoubleBinding(() -> 
        scroll.getViewportBounds().getWidth(), scroll.viewportBoundsProperty()));
    grid.getChildren().add(imageHolder);

//    grid.setAlignment(Pos.TOP_CENTER);

    BorderPane border = new BorderPane();
    border.setCenter(scroll);

    root.setScene(new Scene(border));
    root.setMaximized(true);
    root.show();
  }

  private Image createImage() {
      return new Rectangle(400, 200, Color.CORNFLOWERBLUE).snapshot(null, null);
  }

  public static void main(String[] args) {
      launch(args);
  }
}

这篇关于如何居中JavaFX 8滚动窗格的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！