JavaFX-创建响应性布局

我正在创建具有以下布局的GUI应用程序：

在一个桌面大小，我将有一个HBox的图像旁边的一些文字。在移动视图中，图像将位于文本上方（或下方）

为该布局创建响应性设计的最佳方法是什么？我发现在运行时切换FXML会在扩展和缩小窗口时造成一点延迟，但我希望在FXML中保留尽可能多的布局，因为这是更好的设计。最好同时加载HBox和VBox FXML文件，并在运行时检查大小，根据大小将HBox更改为VBox并以编程方式添加内容

更新

---

更具体地说，我希望能有一些反应灵敏、干净的东西。这里有一个很好的例子：

我认为在启动时加载备用FXML文件并在必要时在它们之间切换没有问题。只要不将图形附加到实时场景，您甚至可以在背景线程上执行此操作。图像等资源可以在两个场景图之间共享，因此您可以避免重新加载图像的时间。

我创建了一个使用HBox和VBox的示例，并根据窗口大小进行切换：

对于您描述的情况，您可以使用一个。下面是@HendrikEbbers示例的一个版本，使用

FlowPane

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Orientation;
import javafx.geometry.Pos;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class ResponsiveLayoutDemo extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        Label textLabel = new Label("Lorem ipsum dolor sit amet, "
                + "consectetur adipiscing elit, sed do eiusmod "
                + "tempor incididunt ut labore et dolore magna aliqua. "
                + "Ut enim ad minim veniam, quis nostrud exercitation "
                + "ullamco laboris nisi ut aliquip ex ea commodo consequat. "
                + "Duis aute irure dolor in reprehenderit in voluptate velit "
                + "esse cillum dolore eu fugiat nulla pariatur. "
                + "Excepteur sint occaecat cupidatat non proident, "
                + "sunt in culpa qui officia deserunt mollit anim id est laborum. "
                + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, "
                + "sed do eiusmod tempor incididunt ut labore et dolore "
                + "magna aliqua. Ut enim ad minim veniam, quis nostrud "
                + "exercitation ullamco laboris nisi ut aliquip ex ea "
                + "commodo consequat. Duis aute irure dolor in "
                + "reprehenderit in voluptate velit esse cillum dolore eu "
                + "fugiat nulla pariatur. Excepteur sint occaecat cupidatat "
                + "non proident, sunt in culpa qui officia deserunt mollit "
                + "anim id est laborum.");

        textLabel.setWrapText(true);
        textLabel.setPrefWidth(360);

        ImageView imageView = new ImageView(new Image("http://goo.gl/1tEZxQ", 240, Double.MAX_VALUE, true, true));

        FlowPane flowPane = new FlowPane(Orientation.HORIZONTAL, 8, 8, imageView, textLabel);
        flowPane.setRowValignment(VPos.TOP);
        primaryStage.setScene(new Scene(flowPane));
        primaryStage.show();
    }


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

---

内存中有一个桌面布局和一个移动布局，可能还有一个平板布局，这看起来真的很昂贵吗？一方面，这需要一些空间，但如果你想立即在布局之间切换，我看不到任何其他选项。另一方面，我怀疑如果你试图分享更多的空间消耗项目，如图像等，那么额外的空间是否真的那么大。几个不同的布局窗格不会占用那么多内存。这就是web浏览器基于css改变布局的方式吗？