JavaFX:实现页面切换

时间:2022-11-30 12:01:00

页面切换



JavaFX多个页面(Stage)之间的切换的实现的基本思路:
构建一个主Stage和多个副Stage页面(构建方式基本上市一样的);
在主Stage中设置某些控件的动作,这些动作通过触发副Stage页面的stage.show和stage.hide来实现副Stage的打开和关闭(或者将关闭动作绑定在副Stage的控件上);
主Stage和副Stage之间的数据交换,可以通过在主Stage或副Stage上储存相应的数据类,通过其进行数据交换(交换动作一般发生在副Stage打开或关闭的时间);

这种思路也可以用于实现自定义的弹窗;

带有数据交换的弹出窗口:
以下是一个示例:
JavaFX:实现页面切换   JavaFX:实现页面切换
 
  主页面
    
    
    
  1. 【Primary - Controller】
  2. public class Controller {
  3. @FXML Button newPage; //弹窗页面触发按钮
  4. public void initialize(){
  5. //弹出新页面
  6. newPage.setOnAction((ActionEvent e)->{
  7. Popup.Data data = Popup.showDialog(); //弹出窗口,并获取交换数据
  8. //控制台打印交换数据
  9. System.out.println(data.getId()+"\n"+data.getName()+"\n"+data.getCity());
  10. });
  11. }
  12. }

Popup页面
     
     
     
  1. Popup - Main
  2. public class Popup extends AnchorPane {
  3. private static Popup popup; //本类实例内部封装在静态数据域,
  4. private Data data ; //对外交换输出使用的自定义数据结构
  5. private Controller controller;
  6. priavte Stage primaryStage;
  7. //本类实例内部封装在静态数据域,构造方法私有
  8. private Popup(){
  9. try{
  10. FXMLLoader fxmlloader = new FXMLloader(getClass().getResource("myDialog.fxml"))
  11. Parent root = FXMLLoader.load();
  12. primaryStage = new Stage();
  13. primaryStage.setResizable(false); //固定窗口大小
  14. primaryStage.setTitle("Input your message");
  15. primaryStage.setScene(new Scene(root,300,275));
  16. Controller controller = fxmlloader.getControler();
  17. controller.start(popup); //传递Popup实例对象,同时启动Controller的按钮动作绑定
  18. }catch(IOException ex){
  19. ex.printStackTrace();
  20. }
  21. }
  22. //外部调用方法:显示弹窗,返回数据交换用的数据结构
  23. public static Data showPopup(){
  24. popup = new Popup();
  25. if(primaryStage != null)
  26. primaryStage.showAndWait();
  27. //显示弹窗,并中将原线程挂起;如果没有获取数据的需求,可以直接 primaryStage.show();
  28. return popup.getData();
  29. }
  30. //实例方法:关闭弹窗
  31. public void hide(){
  32. if(primaryStage != null)
  33. primaryStage.hide();
  34. }
  35. //实例方法:获取交换数据
  36. public Data getData(){
  37. return data;
  38. }
  39. //对外交换输出使用的自定义数据结构
  40. public static class Data{
  41. private String id;
  42. private String name;
  43. private String city;
  44. public Data(){
  45. }
  46. public Data(String id,String name,String city){
  47. this.id = id;
  48. this.name = name;
  49. this.city = city;
  50. }
  51. //省略数据域的get、set方法
  52. }


       
       
       
  1. Popup - Controller
  2. public class Controller {
  3. @FXML Button ok;
  4. @FXML Button cancel;
  5. @FXML TextField tfId;
  6. @FXML TextField tfName;
  7. @FXML TextField tfCity;
  8. public void initialize(){
  9. }
  10. public void startPopup popup){ //获取Main传递归来的Popup实例
  11. //提交按钮
  12. ok.setOnAction((ActionEvent e)->{
  13. popup.getData() = new Popup.Date(tfId.getText(),tfName.getText(),tfCity.getText());  
  14. //储存交换数据
  15. popup.hide();
  16. });
  17. //取消按钮
  18. cancel.setOnAction((ActionEvent e)->{
  19. popup.hide();
  20. });
  21. }



不带数据交换的弹出窗口
 主页面
    
    
    
  1. Primary - Controller
  2. public class Controller {
  3. @FXML Button newPage; //弹窗页面触发按钮
  4. public void initialize(){
  5. //弹出新页面
  6. newPage.setOnAction((ActionEvent e)->{
  7. Popup.showPopup(); //弹出窗口
  8. Popup.showPopup("hello world"); //传递参数,并弹出窗口
  9. });
  10. }
  11. }

Popup页面
     
     
     
  1. Popup - Main
  2. public class Popup extends AnchorPane {
  3. private static Popup popup;
  4. private String param;
  5. priavte Stage stage;
  6. //构造方法:私有
  7. private Popup(param){
  8. this.param = param;
  9. try{
  10. Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
  11. Stage stage = new Stage();
  12. stage.setTitle(engine.getTitle());
  13. stage.setScene(new Scene(root,800,600));
  14. }catch(IOException ex){
  15. ......
  16. }
  17. }
  18. priavte Popup(){
  19. this("no param");
  20. }
  21. public Stage getStage(){
  22. return this.stage;
  23. }
  24. //外部调用方法
  25. public static void showPopup(String param){
  26. popup = new Popup(param); //构造实例
  27. popup.getStage().show(); //显示页面
  28. }
  29. public static void showPopup(){
  30. popup = new Popup(param); //构造实例
  31. popup.getStage().show(); //显示页面
  32. }
  33. }


最简便方法

     
     
     
  1. 调用:
  2. button.setOnAction(event->{
  3. new Popup();
  4. });

     
     
     
  1. 【Popup-Main】
  2. public class Popup{
  3. public Popup(){
  4. Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
  5. Stage stage = new Stage();
  6. stage.setTitle(engine.getTitle());
  7. stage.setScene(new Scene(root,800,600));
  8. stage.show();
  9. }
  10. }