Javafx 如何在拆分窗格中对齐VBox

我在Gui中的边框窗格的中心有一个拆分窗格（垂直）。在我的拆分窗格中，我添加了一个HBox作为顶部，一个FlowPane作为底部。每次我将一组卡片添加到VBox并将VBox添加到我的流程窗格时，它都会一个接一个地添加VBox，而不是垂直添加它们。有人知道为什么吗

@FXML
private FlowPane setsArea;

 //sets
public void addSet(CardSet set) {
    VBox setView = new VBox(20);
    for (Card card : set.getCards()) {
        ImageView imageView = new ImageView(card.getImgUrl());
        setView.getChildren().add(imageView);
    }
    setsArea.getChildren().add(setView);
    setViews.put(set, setView);
}

My GameView.fxml，在其中添加拆分窗格作为边框窗格的中心

   <center>
  <SplitPane dividerPositions="0.5" orientation="VERTICAL" prefHeight="200.0" prefWidth="160.0" style="-fx-background-image: url('game.jpg');" BorderPane.alignment="CENTER">
    <items>
      <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
           <children>
              <HBox fx:id="playAreaTop" />
           </children></AnchorPane>
      <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
           <children>
              <FlowPane fx:id="setsArea" />
           </children></AnchorPane>
    </items>
  </SplitPane>
</center>

如何添加卡片集：

 Card card = new Basic(Suit.CLUBS, 4, 1);

        Card card2 = new Basic(Suit.HEARTS, 5, 2);

        Card card3 = new Joker(Suit.JOKER, 15, 3);

        Card card4 = new Ace(Suit.HEARTS, 14, 4);

        ArrayList<Card> cards = new ArrayList<>();
        cards.add(card);
        cards.add(card2);
        cards.add(card4);

        CardSet cardSet = new CardSet(cards);

        gameView.addSet(cardSet);
        gameView.addSet(cardSet);
        gameView.addSet(cardSet);
        gameView.addSet(cardSet);
        gameView.addSet(cardSet);
        gameView.addSet(cardSet);

Card-Card=new-Basic（Suit.CLUBS，4,1）；
卡片卡2=新的基本卡（Suit.HEARTS，5,2）；
卡片卡片3=新小丑（西服小丑，15,3）；
卡片卡片4=新的Ace（西装心形，14,4）；
ArrayList cards=新的ArrayList（）；
卡片。添加（卡片）；
卡片。添加（卡片2）；
卡片。添加（卡片4）；
CardSet CardSet=新卡组（卡）；
gameView.addSet（cardSet）；
gameView.addSet（cardSet）；
gameView.addSet（cardSet）；
gameView.addSet（cardSet）；
gameView.addSet（cardSet）；
gameView.addSet（cardSet）；

---

谢谢。

将图像添加到VBox中并将其全部放在流程窗格中不要使它们垂直堆叠您应该将流程窗格替换到VBox中，并将图像视图添加到VBox中，以便垂直堆叠项目，如下所示：

<SplitPane dividerPositions="0.5" orientation="VERTICAL" prefHeight="200.0" prefWidth="160.0" style="-fx-background-image: url('game.jpg');" BorderPane.alignment="CENTER">
<items>
  <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
       <children>
          <HBox fx:id="playAreaTop" />
       </children></AnchorPane>
  <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
       <children>
          <VBox fx:id="setsArea" />
       </children></AnchorPane>
</items>

---

不要使用

FlowPane

。使用其他可以按照您想要的方式布局

vbox

。你查过

FlowPane

和它的行为吗？我使用FlowPane的唯一原因是它包装了它的内容，使spaceTry成为

GridPane

，或者可能是

TilePane

。要垂直对齐FlowPane中的元素，你需要将其设置为垂直。请提供一个在上下文中演示该问题的示例。不要忘记阅读和理解所有可用布局的api文档-这始终是匹配布局要求和。。。好。。布局：）

@FXML
private VBox setsArea;

public void addSet(CardSet set){
    for (Card card : set.getCards()) {
        ImageView imageView = new ImageView(card.getImgUrl());
        setsArea.getChildren().add(imageView);
    }
    setViews.put(set, setView);
}