JavaFX實現介面跳轉

2022-06-16 14:00:55

介面跳轉，很常見的一個功能，在桌面程式中，可以多視窗跳轉，也可以在一個視窗中跳轉。不同方式對應不同場景。下面簡單介紹一下，JavaFX中單視窗介面跳轉方式。

BorderPane 跳轉

利用BorderPane的setCenter重新設定中心節點進行介面跳轉。

好處是其他區域的節點不會更新，只會更新center中的節點，並且可以控制是每個頁面是否可以重新載入，方便。

scene節點如下，在BorderPane的top中設定按鈕事件，更新center。

fxml

<BorderPane prefHeight="200.0" prefWidth="200.0" fx:id="container">
         <top>
            <HBox alignment="CENTER" spacing="20.0" BorderPane.alignment="CENTER">
               <children>
                  <Button mnemonicParsing="false" text="首頁" onAction="#toHome" />
                  <Button mnemonicParsing="false" text="檔案" onAction="#toFile"/>
                  <Button mnemonicParsing="false" text="設定" onAction="#toSetting"/>
               </children>
               <padding>
                  <Insets bottom="10.0" top="10.0" />
               </padding>
            </HBox>
         </top>
         <center>
  </center>
</BorderPane>

controller

public class JumpController {

    public BorderPane container;

    public void initialize() {
        URL resource = getClass().getResource("/fxml/jump/home.fxml");
        try {
            setCenter(resource);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    private void setCenter(URL url) throws IOException {
        FXMLLoader loader = new FXMLLoader(url);
        loader.load();
        Parent root = loader.getRoot();
        container.setCenter(root);
    }

    public void toHome(ActionEvent event) {
        URL resource = getClass().getResource("/fxml/jump/home.fxml");
        try {
            setCenter(resource);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public void toFile(ActionEvent event) {
        URL resource = getClass().getResource("/fxml/jump/file.fxml");
        try {
            setCenter(resource);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public void toSetting(ActionEvent event) {
        URL resource = getClass().getResource("/fxml/jump/setting.fxml");
        try {
            setCenter(resource);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

StackPane跳轉

StackPane也是JavaFX中的一個面板容器，特點是裡面的元素是堆疊在一起的，每次只顯示最上層元素。利用這個特點，可以把多個介面載入之後作為StackPane的位元組的，然後調整StackPane的頂層元素即可。

這種方法比較適合每個頁面跳轉時不需要重新載入的情況，效率比較高，只是改變位元組點的順序。

fxml

<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="529.0" prefWidth="785.0"
      xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="xyz.yuelai.controller.Jump1Controller">
   <HBox alignment="CENTER" spacing="20.0">
      <children>
         <Button mnemonicParsing="false" onAction="#toHome" text="首頁" />
         <Button mnemonicParsing="false" onAction="#toFile" text="檔案" />
         <Button mnemonicParsing="false" onAction="#toSetting" text="設定" />
      </children>
      <padding>
         <Insets bottom="10.0" top="10.0" />
      </padding>
   </HBox>
   <StackPane prefHeight="150.0" prefWidth="200.0" VBox.vgrow="ALWAYS" fx:id="container" />

</VBox>

controller

public class Jump1Controller {

    public StackPane container;
    private Parent home;
    private Parent file;
    private Parent setting;

    public void initialize() {
        try {
            URL homeUrl = getClass().getResource("/fxml/jump/home.fxml");
            home = getParent(homeUrl);
            URL fileUrl = getClass().getResource("/fxml/jump/file.fxml");
            file = getParent(fileUrl);
            URL settingUrl = getClass().getResource("/fxml/jump/setting.fxml");
            setting = getParent(settingUrl);

            container.getChildren().addAll(setting, file, home);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    private Parent getParent(URL url) throws IOException {
        FXMLLoader loader = new FXMLLoader(url);
        return loader.load();
    }

    public void toHome(ActionEvent event) {
        home.toFront();
    }

    public void toFile(ActionEvent event) {
        file.toFront();
    }

    public void toSetting(ActionEvent event) {
        setting.toFront();
    }
}

三個介面的fxml如下：

首頁

<AnchorPane prefHeight="460.0" prefWidth="781.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Label alignment="CENTER" layoutX="297.0" layoutY="131.0" prefHeight="110.0" prefWidth="129.0" style="-fx-background-color: #a00;" text="首頁" textFill="WHITE" AnchorPane.leftAnchor="200.0" AnchorPane.rightAnchor="200.0" AnchorPane.topAnchor="100.0">
         <font>
            <Font name="System Bold" size="20.0" />
         </font>
      </Label>
   </children>
</AnchorPane>

檔案

<AnchorPane prefHeight="460.0" prefWidth="781.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <Label alignment="CENTER" layoutX="297.0" layoutY="131.0" prefHeight="110.0" prefWidth="129.0" style="-fx-background-color: #0a0;" text="檔案" textFill="WHITE" AnchorPane.leftAnchor="200.0" AnchorPane.rightAnchor="200.0" AnchorPane.topAnchor="100.0">
            <font>
                <Font name="System Bold" size="20.0" />
            </font>
        </Label>
    </children>
</AnchorPane>

設定

<AnchorPane prefHeight="460.0" prefWidth="781.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <Label alignment="CENTER" layoutX="297.0" layoutY="131.0" prefHeight="110.0" prefWidth="129.0" style="-fx-background-color: #00a;" text="設定" textFill="WHITE" AnchorPane.leftAnchor="200.0" AnchorPane.rightAnchor="200.0" AnchorPane.topAnchor="100.0">
            <font>
                <Font name="System Bold" size="20.0" />
            </font>
        </Label>
    </children>
</AnchorPane>

其他跳轉方式，比如重新設定scene，這就相當於重新載入當前視窗，如非必要還是不推薦。上面兩種方式都是操作的容器裡面的節點。實現了視覺上的介面跳轉。所以不侷限於BorderPane和StackPane，只是這兩個容器用起來比較方便。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

JavaFX實現介面跳轉

BorderPane 跳轉

StackPane跳轉

熱門文章