JavaFX - 创建响应式布局

Question

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

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

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

更新

更具体地说，我希望得到一些响应性且干净的东西。这是一个很好的例子：https://www.youtube.com/watch?v=5T-h2czZ4_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/

Answer 4

创建一个具有吸引人的布局的 JavaFX 应用程序，允许用户输入书籍所需的信息 - 书籍是一个具有以下成员变量的类： 书籍：作者、标题、格式{数字、音频、精装、平装}、价格、出版年份

当输入一本书时，它会被添加到书籍数组中。您的布局应该有一个按钮告诉您有多少本书，一个允许您输入数字来打印该书的元素（从 1 开始 - 所以要聪明一点）以及一个允许您打印该书的相应按钮，以及一个按钮，可让您打印所有输入书籍的信息。项目策划师

评估的学习成果： JavaFX 布局 JavaFX 操作 使用 JavaFX 小部件 将类合并到 JavaFX 应用程序中