JavaFX - 创建响应式布局

Question

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

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

为此布局创建响应式设计的最佳方法是什么？我发现在运行时切换 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);
    }
}