JavaFX -创建响应式布局

Question

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

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

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

更新

更具体地说，我希望有反应和干净的东西。下面是一个很好的例子：4

Answer 1

对于您描述的情况，只需使用FlowPane即可。下面是@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);
    }
}

Answer 2

我认为在启动时加载备用FXML文件并在必要时在它们之间切换没有问题。您甚至应该能够在后台线程上这样做，只要您不将图形附加到现场。像图像这样的资源可以在两个场景图之间共享，因此您可以避免重新加载图像的时间。

Answer 3

我创建了一个使用HBox和VBox的示例，并根据窗口大小切换它们：http://www.guigarage.com/2015/09/how-to-create-a-responsive-layout-in-javafx/