javafx - JavaFX 中的多个场景

Question

我正在 Javafx 中编写一个非常简单的应用程序，其中舞台上有一个带有文本框的按钮作为一个场景。现在，我想要的行为是，当我单击按钮时，我可以使用另一个按钮加载另一个场景和舞台上的一个文本框，然后删除我单击的按钮以及之前的文本框。因此，单击按钮即可在舞台上加载一个新场景。关于如何执行此操作有任何提示吗？

遵循埃里克的建议:我有这段代码，它按照我想要的方式工作。

var showScene1 = true;
var showScene2 = false;
var showScene3 = false;

def stage = Stage
{
  title: "Hello World"

    var scene1 =Scene
    {
          content:
          [

                                  Text {
                          font : Font {
                                  size: 24
                          }
                          x: 10, y: 30
                          content: "HelloWorld from Scene1"
                  },
                  Button
                      {
                          text: "Click Me to change to Scene2 "
                          onMouseClicked: function( e: MouseEvent ):Void
                          {

                                  showScene2 = true;

                                  println("In scene 2");

                          }

                        }


          ]
     }



     var scene2 =Scene
        {
              content:
              [

                                      Text {
                              font : Font {
                                      size: 24
                              }
                              x: 10, y: 30
                              content: "HelloWorld from Scene2"
                      },
                      Button
                          {
                              text: "Click Me to change to Scene3 "
                              onMouseClicked: function( e: MouseEvent ):Void
                              {
                                      showScene1 = false;
                                      showScene2 = false;
                                      showScene3 = true;
                                      println("In scene 3");

                              }

                            }


              ]
         }

     var scene3 =Scene
        {
              content:
              [

                                      Text {
                              font : Font {
                                      size: 24
                              }
                              x: 10, y: 30
                              content: "HelloWorld from Scene3"
                      }


              ]
         }


scene: bind if (showScene2) then scene2
    else if (showScene1) then scene1
    else scene3

}

Answer 1

如果您确定只有 2 个不同的场景，则可以像这样绑定(bind)舞台的场景属性:

var showSecondScene = false;
var myButton = Button {
    onMouseClicked: function(e) { showSecondScene = true; }
}
def stage = Stage {
    scene: bind if (showSecondScene) then secondScene else firstScene
}

更新:如果您有任意数量的场景，这实际上是有效的:

scene: bind if (showScene1) then scene1
    else if (showScene2) then scene2
    else scene3

您可能会考虑为什么会有超过 2 个场景，而是选择在重叠的组节点上设置“visible: false”。