JavaFX，将anchorpane元素与另一个文件中的FXML交换

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 4 年前。

Improve this question

我想在 JavaFX 中创建一个类似于下图的动态 UI，左侧的菜单将包含在其自己的 anchor Pane 中，而当前选定的项目将确定右侧 anchor Pane 中填充的内容。

使用此布局，我希望能够将整个右 anchor 板与我将在单独文件中声明的 anchor 板交换，以尝试保持其全部模块化。与将其全部声明在同一个文件中并在不使用时简单地隐藏它相比，这是首选方法吗？如果这是正确的方法，您将如何去做？

这个问题有点宽泛，但我找不到任何引用资料来说明如何执行上述操作，所以请耐心等待。

Answer 1

您可以加载新的 FXML 文档并将其设置为右侧 AnchorPane 的子文档。

下面是一个非常粗略的示例应用程序，展示了该概念的实际应用。基本上，工作是在 loadPage() 方法中完成的，您需要适应您的使用情况，因为此示例仅用于展示概念。

Main.java

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.IOException;

public class Main extends Application {

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

    @Override
    public void start(Stage primaryStage) {

        try {
            FXMLLoader loader = new FXMLLoader(getClass().getResource("MainLayout.fxml"));
            loader.setController(new MainController());

            primaryStage.setScene(new Scene(loader.load()));

            primaryStage.show();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }
}

<小时/>

MainLayout.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.*?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0"
            prefWidth="600.0" xmlns="http://javafx.com/javafx/9.0.1" xmlns:fx="http://javafx.com/fxml/1">
    <center>
        <AnchorPane fx:id="paneMainContent" prefHeight="200.0" prefWidth="200.0"
                    style="-fx-border-color: black; -fx-border-width: 2px;" BorderPane.alignment="CENTER"/>
    </center>
    <left>
        <GridPane BorderPane.alignment="CENTER">
            <columnConstraints>
                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0"/>
            </columnConstraints>
            <rowConstraints>
                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES"/>
                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES"/>
                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES"/>
            </rowConstraints>
            <VBox fx:id="vboxShowCats" alignment="CENTER" prefHeight="200.0" prefWidth="100.0"
                  style="-fx-border-color: black; -fx-border-width: 2px;">
                <Button fx:id="btnShowCats" mnemonicParsing="false" text="Show Cats"/>
            </VBox>
            <VBox fx:id="vboxShowDogs" alignment="CENTER" prefHeight="200.0" prefWidth="100.0"
                  style="-fx-border-color: black; -fx-border-width: 2px;" GridPane.rowIndex="1">
                <Button fx:id="btnShowDogs" mnemonicParsing="false" text="Show Dogs"/>
            </VBox>
            <VBox fx:id="vboxShowBirds" alignment="CENTER" prefHeight="200.0" prefWidth="100.0"
                  style="-fx-border-color: black; -fx-border-width: 2px;" GridPane.rowIndex="2">
                <Button fx:id="btnShowBirds" mnemonicParsing="false" text="Show Birds"/>
            </VBox>
        </GridPane>
    </left>
</BorderPane>

<小时/>

MainController.java

import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.VBox;
import java.io.IOException;

public class MainController {

    @FXML
    private AnchorPane paneMainContent;
    @FXML
    private VBox vboxShowCats;
    @FXML
    private Button btnShowCats;
    @FXML
    private VBox vboxShowDogs;
    @FXML
    private Button btnShowDogs;
    @FXML
    private VBox vboxShowBirds;
    @FXML
    private Button btnShowBirds;

    @FXML
    private void initialize() {

        btnShowCats.setOnAction(event -> loadPage("Cats"));
        btnShowDogs.setOnAction(event -> loadPage("Dogs"));
        btnShowBirds.setOnAction(event -> loadPage("Birds"));

    }

    private void loadPage(String name) {

        try {
            FXMLLoader loader = new FXMLLoader(getClass().getResource(name + "View.fxml"));

            AnchorPane newPane = loader.load();

            // Set the loaded FXML file as the content of our main right-side pane
            paneMainContent.getChildren().setAll(newPane);

            // Reset the anchors
            AnchorPane.setBottomAnchor(newPane, 0.0);
            AnchorPane.setLeftAnchor(newPane, 0.0);
            AnchorPane.setRightAnchor(newPane, 0.0);
            AnchorPane.setTopAnchor(newPane, 0.0);

        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

<小时/>

CatsView.fxml、DogsView.fxml、BirdsView.fxml 除了 Label 之外，所有内容均相同:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.*?>
<AnchorPane prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/9.0.1"
            xmlns:fx="http://javafx.com/fxml/1">
    <VBox alignment="CENTER" prefHeight="400.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0"
          AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
        <Label style="-fx-font-size: 200%;" text="These are CATS!"/>
    </VBox>
</AnchorPane>

<小时/>

The Result:

我确信有更先进(和更好)的方法来实现这一点，但它确实有效，而且我就是这样做的(尽管我仍在学习)。

另外，我显然没有费心去设计示例的样式:)