Javafx Stackpane 显示类似 CardLayout Java Swing

Question

我使用三个按钮在stackpane中显示每个子面板，但是当我单击按钮时，每次单击会显示不同的面板

例子

btn0-> 窗格 0、窗格 1 和窗格 2

btn1-> 窗格 0、窗格 1 和窗格 2

btn2-> 窗格 0、窗格 1 和窗格 2

我只是希望它为 java swing cardLayout 中的特定按钮显示特定面板我应该怎么做？

btn0-> 窗格 0

btn1-> 窗格 1

btn2-> 窗格 2

请帮帮我！

@FXML
void btn0(ActionEvent event) {
    stackConsole.getChildren().get(0).toFront();
}

@FXML
void btn1(ActionEvent event) {
    stackConsole.getChildren().get(1).toFront();
}

@FXML
void btn2(ActionEvent event) {
    stackConsole.getChildren().get(2).toFront();
}

Answer 1

根据您的需要，您可能对TabPane 课程感兴趣。

当然在控制器类中实现类似的功能。但是，为孩子调用 toFront() 不会产生预期的效果，因为

1. 所有孩子都留在stackConsole
2. toFront 只是将调用它的 Node 移动到父级的最后一个子级位置。

但是，您想要实现的目标似乎是替换 stackConsole 的孩子。这可以通过将不同的子类注入控制器类并使用ObservableList.setAll 替换内容来完成。 <fx:define> 标签可用于场景中最初未显示的儿童。

示例

FXML

<BorderPane xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="fxml.ReplaceController">
    <center>
        <StackPane fx:id="stackConsole">
            <children>
                <!-- use multiply blend mode to demonstrate other children are not present
                     (result would be black otherwise) -->
                <Region fx:id="r0" blendMode="MULTIPLY" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: red;" />
                <fx:define>
                    <Region fx:id="r1" blendMode="MULTIPLY" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: blue;" />
                    <Region fx:id="r2" blendMode="MULTIPLY" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: green;" />
                </fx:define>
            </children>
        </StackPane>
    </center>
    <left>
        <VBox prefHeight="200.0" spacing="10.0" BorderPane.alignment="CENTER">
            <children>
                <Button mnemonicParsing="false" text="1" onAction="#btn0"  />
                <Button mnemonicParsing="false" text="2" onAction="#btn1" />
                <Button mnemonicParsing="false" text="3" onAction="#btn2" />
            </children>
            <padding>
                <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
            </padding>
        </VBox>
    </left>
</BorderPane>

控制器

public class ReplaceController {
    @FXML
    private Region r1;
    @FXML
    private Region r2;
    @FXML
    private Region r0;
    @FXML
    private Pane stackConsole;

    @FXML
    private void btn0(ActionEvent event) {
        stackConsole.getChildren().setAll(r0);
    }

    @FXML
    private void btn1(ActionEvent event) {
        stackConsole.getChildren().setAll(r1);
    }

    @FXML
    private void btn2(ActionEvent event) {
        stackConsole.getChildren().setAll(r2);
    }
    
}