快捷導(dǎo)航

JavaFX實(shí)現(xiàn)界面跳轉(zhuǎn)

更新時(shí)間：2022年06月16日 16:36:58 作者：西子~

這篇文章主要為大家詳細(xì)介紹了JavaFX實(shí)現(xiàn)界面跳轉(zhuǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

界面跳轉(zhuǎn)，很常見(jiàn)的一個(gè)功能，在桌面程序中，可以多窗口跳轉(zhuǎn)，也可以在一個(gè)窗口中跳轉(zhuǎn)。不同方式對(duì)應(yīng)不同場(chǎng)景。下面簡(jiǎn)單介紹一下，JavaFX中單窗口界面跳轉(zhuǎn)方式。

BorderPane 跳轉(zhuǎn)

利用BorderPane的setCenter重新設(shè)置中心節(jié)點(diǎn)進(jìn)行界面跳轉(zhuǎn)。

好處是其他區(qū)域的節(jié)點(diǎn)不會(huì)更新，只會(huì)更新center中的節(jié)點(diǎn)，并且可以控制是每個(gè)頁(yè)面是否可以重新加載，方便。

scene節(jié)點(diǎn)如下，在BorderPane的top中設(shè)置按鈕事件，更新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="首頁(yè)" onAction="#toHome" />
? ? ? ? ? ? ? ? ? <Button mnemonicParsing="false" text="文件" onAction="#toFile"/>
? ? ? ? ? ? ? ? ? <Button mnemonicParsing="false" text="設(shè)置" 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跳轉(zhuǎn)

StackPane也是JavaFX中的一個(gè)面板容器，特點(diǎn)是里面的元素是堆疊在一起的，每次只顯示最上層元素。利用這個(gè)特點(diǎn)，可以把多個(gè)界面加載之后作為StackPane的字節(jié)的，然后調(diào)整StackPane的頂層元素即可。

這種方法比較適合每個(gè)頁(yè)面跳轉(zhuǎn)時(shí)不需要重新加載的情況，效率比較高，只是改變字節(jié)點(diǎn)的順序。

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="首頁(yè)" />
? ? ? ? ?<Button mnemonicParsing="false" onAction="#toFile" text="文件" />
? ? ? ? ?<Button mnemonicParsing="false" onAction="#toSetting" text="設(shè)置" />
? ? ? </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();
? ? }
}

三個(gè)界面的fxml如下：

首頁(yè)

<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="首頁(yè)" 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>

設(shè)置

<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="設(shè)置" 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>

其他跳轉(zhuǎn)方式，比如重新設(shè)置scene，這就相當(dāng)于重新加載當(dāng)前窗口，如非必要還是不推薦。上面兩種方式都是操作的容器里面的節(jié)點(diǎn)。實(shí)現(xiàn)了視覺(jué)上的界面跳轉(zhuǎn)。所以不局限于BorderPane和StackPane，只是這兩個(gè)容器用起來(lái)比較方便。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: