Javafx Stackpane显示类似的CardLayout Java Swing

Question

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

例子

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

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

btn2->面板0，面板1和面板2

我只是想要它显示一个特定面板的特定按钮在java swing cardLayout我应该做什么?

btn0-> pane 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);
    }
    
}