在javafx中对齐两个滚动网格

whitzsjs  于 2021-06-27  发布在  Java
关注(0)|答案(1)|浏览(390)

我有两个滚动窗格，其中包含我正在尝试对齐的网格。它们的单元格宽度都应该是40，所以我不知道它们为什么会不对齐。尽管它们一开始看起来是一致的，但它们逐渐变得不一致。
在这里，它们是对齐的。
但正如你所见，它逐渐变得不一致。
顶部网格（带有数字）和下部网格都包含在单独的滚动窗格中。如果不这样做，而是将两个网格放在一个vbox中，并将其放在一个滚动窗格中，所有内容都会对齐。但是，我需要它们在单独的滚动窗格中，这样我可以向下滚动较低的网格，同时保持数字在适当的位置，并且仍然让数字与网格水平滚动（我将两个滚动窗格的hscroll值双向绑定）。

private void layerDisplay() {
    BeatNumbers bn = new BeatNumbers(this.finalBeat, this.overlay, this::togglePlay,
    this.features::setBeat);

    VBox layerGrid = new VBox();

    for (String layerName : this.layers.keySet()) {
      LayerGrid lg = new LayerGrid(this.layers.get(layerName), layerName, this.finalBeat,
          this.features::addUnit, this.features::deleteUnit, this.features::playUnit,
          this.features::stopAllUnits, this.features::refresh);

      layerGrid.getChildren().add(lg);
    }

    StackPane pane = new StackPane();
    pane.getChildren().add(layerGrid);
    pane.getChildren().add(this.overlay);

    this.gridScrollPane.setContent(pane);
    this.numberPane.setContent(bn);

    VBox box = new VBox();
    box.getChildren().addAll(this.numberPane, this.gridScrollPane);

    this.setCenter(box);
}

你知道我怎样才能把beatnumber和layergrid保持一致吗？当我向下滚动时，beatnumbers必须固定在屏幕顶部，但当我水平滚动时，beatnumbers必须随网格水平移动。
谢谢您！
编辑：下面是一个最小的可复制示例：
这是运行该示例的代码

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class MinimumReproducibleExample extends Application {

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

  @Override
  public void start(Stage stage) {
    VBox notAlignedButScrolls = new NotAlignedButScrolls();
    Scene scene = new Scene(notAlignedButScrolls, 400, 300);

    stage.setTitle("Not Aligned But Scrolls");
    stage.setScene(scene);
    stage.show();

    VBox alignedButDoesNotScroll = new AlignedButDoesNotScroll();
    Scene scene2 = new Scene(alignedButDoesNotScroll, 400, 300);
    Stage stage2 = new Stage();
    stage2.setTitle("Aligned But Does Not Scroll");
    stage2.setScene(scene2);
    stage2.show();
  }
}

下面是notalignedbutscrolls类，它创建了一个示例，其中两个网格按我所希望的方式滚动，但数字逐渐与网格失去对齐。

import javafx.scene.control.ScrollPane;
import javafx.scene.control.ScrollPane.ScrollBarPolicy;
import javafx.scene.input.ScrollEvent;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;

public class NotAlignedButScrolls extends VBox {

  public NotAlignedButScrolls() {
    super();

    // Setting up the scroll panes

    // This is the top scroll pane
    ScrollPane numberPane = new ScrollPane();
    numberPane.addEventFilter(ScrollEvent.SCROLL, event -> {
      if (event.getDeltaY() != 0) {
        event.consume();
      }
    });
    numberPane.setHbarPolicy(ScrollBarPolicy.NEVER);
    numberPane.setVbarPolicy(ScrollBarPolicy.NEVER);
    numberPane.setMaxHeight(15);
    numberPane.setMinHeight(15);

    // This is the lower scroll pane
    ScrollPane gridScrollPane = new ScrollPane();
    gridScrollPane.setHbarPolicy(ScrollBarPolicy.AS_NEEDED);
    gridScrollPane.setVbarPolicy(ScrollBarPolicy.AS_NEEDED);

    // Bind their horizontal scroll values together
    gridScrollPane.hvalueProperty().bindBidirectional(numberPane.hvalueProperty());

    // Set up the content for each scroll pane
    HBox beatNumbers = this.beatNumbers();

    VBox layerGrid = new VBox();
    for (int i = 0; i < 28; i++) {
      layerGrid.getChildren().add(this.gridPane());
    }

    gridScrollPane.setContent(layerGrid);
    numberPane.setContent(beatNumbers);

    gridScrollPane.prefHeightProperty().bind(this.heightProperty());

    // Put everything together

    VBox box = new VBox();
    box.getChildren().addAll(numberPane, gridScrollPane);

    this.getChildren().add(box);
  }

  private HBox beatNumbers() {
    HBox beatNumbers = new HBox();

    HBox.setHgrow(beatNumbers, Priority.ALWAYS);

    for (int i = 0; i < 150; i++) {
      VBox unit = new VBox();
      unit.setMinWidth(40);
      unit.setStyle("-fx-border-width: 0 1 0 0;-fx-border-color: green;");

      Label measureNumber = new Label(String.valueOf(i + 1));
      measureNumber.setStyle("-fx-text-fill: black");

      unit.getChildren().add(measureNumber);
      beatNumbers.getChildren().add(unit);
    }

    return beatNumbers;
  }

  private HBox gridPane() {
    HBox gridPane = new HBox();
    gridPane.setMinHeight(40);
    HBox.setHgrow(gridPane, Priority.ALWAYS);
    gridPane.setStyle("-fx-background-color: gray;-fx-border-style: solid;"
        + "-fx-border-color: black;-fx-border-width: 0 0 1 0");

    for (int i = 0; i < 150; i++) {
      VBox cell = new VBox();
      cell.setMinWidth(40);
      setCellStyle(cell);

      gridPane.getChildren().add(cell);
    }
    return gridPane;
  }

  private void setCellStyle(VBox cell) {
    String style = "-fx-border-style: solid;-fx-border-color: black;-fx-border-width: 0 1 0 0;";

    cell.setStyle("-fx-background-color: null;" + style);
    cell.setOnMouseEntered(e -> cell.setStyle("-fx-background-color: lightgray;" + style));
    cell.setOnMouseExited(e -> cell.setStyle("-fx-background-color: null;" + style));
  }
}

最后，这里是alignedbutdoesnotscroll类，它创建了一个示例，其中两个网格正确对齐，但向下滚动时，顶部网格不会固定在屏幕顶部。

import javafx.scene.control.ScrollPane;
import javafx.scene.control.ScrollPane.ScrollBarPolicy;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;

public class AlignedButDoesNotScroll extends VBox {

  public AlignedButDoesNotScroll() {
    super();

    // Setting up the only scroll pane

    ScrollPane gridScrollPane = new ScrollPane();
    gridScrollPane.setHbarPolicy(ScrollBarPolicy.AS_NEEDED);
    gridScrollPane.setVbarPolicy(ScrollBarPolicy.AS_NEEDED);

    // Set up the content for the scroll pane
    HBox beatNumbers = this.beatNumbers();

    VBox layerGrid = new VBox();
    for (int i = 0; i < 28; i++) {
      layerGrid.getChildren().add(this.gridPane());
    }

    // Put everything together

    VBox box = new VBox();
    box.getChildren().addAll(beatNumbers, layerGrid);

    gridScrollPane.setContent(box);
    gridScrollPane.prefHeightProperty().bind(this.heightProperty());

    this.getChildren().add(gridScrollPane);
  }

  private HBox beatNumbers() {
    HBox beatNumbers = new HBox();

    HBox.setHgrow(beatNumbers, Priority.ALWAYS);

    for (int i = 0; i < 150; i++) {
      VBox unit = new VBox();
      unit.setMinWidth(40);
      unit.setStyle("-fx-border-width: 0 1 0 0;-fx-border-color: green;");

      Label measureNumber = new Label(String.valueOf(i + 1));
      measureNumber.setStyle("-fx-text-fill: black");

      unit.getChildren().add(measureNumber);
      beatNumbers.getChildren().add(unit);
    }

    return beatNumbers;
  }

  private HBox gridPane() {
    HBox gridPane = new HBox();
    gridPane.setMinHeight(40);
    HBox.setHgrow(gridPane, Priority.ALWAYS);
    gridPane.setStyle("-fx-background-color: gray;-fx-border-style: solid;"
        + "-fx-border-color: black;-fx-border-width: 0 0 1 0");

    for (int i = 0; i < 150; i++) {
      VBox cell = new VBox();
      cell.setMinWidth(40);
      setCellStyle(cell);

      gridPane.getChildren().add(cell);
    }
    return gridPane;
  }

  private void setCellStyle(VBox cell) {
    String style = "-fx-border-style: solid;-fx-border-color: black;-fx-border-width: 0 1 0 0;";

    cell.setStyle("-fx-background-color: null;" + style);
    cell.setOnMouseEntered(e -> cell.setStyle("-fx-background-color: lightgray;" + style));
    cell.setOnMouseExited(e -> cell.setStyle("-fx-background-color: null;" + style));
  }
}

不对齐但滚动
对齐但不滚动
我希望这有助于解释这个问题。再次感谢！

Javajavafxuser-interfaceAlignmentscrollpane

1条答案

按热度按时间
e4yzc0pl

e4yzc0pl1#

问题是两个滚动窗格的视口大小不同。下一个较小，以适应滚动条。
像这样的东西可以帮助。。。

gridScrollPane.viewportBoundsProperty().addListener((obs,oldVal, newVal) -> {
    double w = newVal.getWidth() + 2; // this 2 accounts for 1 pixel borders
    numberPane.setPrefWidth(w);
    numberPane.setMaxWidth(w);
});

另一种选择是强制两个滚动窗格的vbar策略始终保持不变。但这看起来不太好。

赞(0）分享  回复(0）举报  2021-06-27
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com