JavaFX 8 : How to be able to re-size window (stage) but keep inner elements at their positions?

Question

我有一个项目，有 2 个文本区域和几个按钮。根 Pane 是 AnchorPane。当将窗口大小调整为较小的窗口时，所有元素开始重叠。有哪些方法可以解决这个问题？ (忽略我的 anchor 板的名称，我很懒)

    AnchorPane borderpane = new AnchorPane ();

    TextArea user_list = new TextArea();
    user_list.setPrefSize(150, 400);
    TextArea messages = new TextArea();
    messages.setPrefSize(350, 400);
    TextField typebox = new TextField();
    typebox.setPrefSize(425, 100);

    // put a shape over a text, over a shape
    StackPane send_container = new StackPane();

    Rectangle send_box = new Rectangle(75, 25);
    Label send_text = new Label("Send");

    send_container.getChildren().add(send_box);
    send_container.getChildren().add(send_text);

    AnchorPane.setLeftAnchor(messages, 25.0);
    AnchorPane.setTopAnchor(messages, 10.0);
    AnchorPane.setRightAnchor(user_list, 25.0);
    AnchorPane.setTopAnchor(user_list, 10.0);

    AnchorPane.setBottomAnchor(typebox, 25.0); 
    AnchorPane.setLeftAnchor(typebox, 25.0); 
    AnchorPane.setBottomAnchor(send_container, 25.0); 
    AnchorPane.setRightAnchor(send_container, 25.0); 
    borderpane.getChildren().addAll(messages, user_list, typebox,send_container );


    Scene scene = new Scene(borderpane, 600, 600);
    primaryStage.setMaxHeight(600);
    primaryStage.setMaxWidth(600);

    primaryStage.setScene(scene); 
    primaryStage.setTitle("Welcome");
    scene.getStylesheets().add(LoginWindow.class.getResource("Login.css").toExternalForm());
    primaryStage.show();

Answer 1

您正在对控件的位置和大小进行硬编码。这意味着控件无法响应其父节点大小的变化。

通常，您不应指定任何高度或宽度。所有控件都有默认的首选尺寸，并且所有布局都遵循这些尺寸。布局还决定如何调整子节点的大小以响应用户调整窗口大小。

通常，窗口的布局需要分解为子布局。在您的情况下，您希望一个部分始终调整大小以填充窗口(用户列表和消息部分)，而另一部分位于底部(打字框和发送按钮)。 BorderPane 是理想的选择，因为它的中心节点总是填充它。因此，此主 BorderPane 的中心将包含用户列表和消息区域，而此 BorderPane 的底部将包含打字框和发送按钮。

您可能希望用户能够水平调整用户列表和消息的大小，因此我将它们放入 SplitPane 中，并使该 SpiltPane 成为主 BorderPane 的中心。

您可能希望打字框和发送按钮位于单独的子 BorderPane 中，并将打字框作为中心节点，因为您希望当用户调整窗口大小时打字框水平拉伸(stretch)和收缩。

所以，总结一下:

• SplitPane 中的用户列表和消息区域
• BorderPane 中的打字框和发送按钮
• 父边框 Pane ，用户列表/消息部分位于中心，打字框/发送部分位于底部

这个代码实际上很短:

ListView user_list = new ListView();

TextArea messages = new TextArea();
messages.setPrefRowCount(12);
messages.setPrefColumnCount(30);

TextField typebox = new TextField();
typebox.setPrefColumnCount(30);

Button send_text = new Button("Send");
send_text.disableProperty().bind(
    typebox.lengthProperty().lessThan(1));

SplitPane top = new SplitPane(user_list, messages);
top.setDividerPosition(0, 1/3.0);

BorderPane bottom = new BorderPane();
bottom.setCenter(typebox);
bottom.setRight(send_text);
BorderPane.setMargin(typebox, new Insets(0, 12, 0, 0));

BorderPane main = new BorderPane();
main.setCenter(top);
main.setBottom(bottom);
BorderPane.setMargin(bottom, new Insets(12));

Scene scene = new Scene(main);

primaryStage.setScene(scene); 
primaryStage.setTitle("Welcome");
scene.getStylesheets().add(LoginWindow.class.getResource("Login.css").toExternalForm());
primaryStage.show();

请注意，没有硬编码的尺寸或坐标(Insets 对象定义的边距除外)。每个控件都有一个基于其属性的首选大小，例如 TextField 的首选列数。

各种布局的工作原理都有详细记录。我建议在 javafx.scene.layout package 中阅读有关它们的内容。 .

(我猜用户列表应该是一个ListView，而不是一个TextArea，因为典型的聊天程序允许选择一个或多个用户。我怀疑你的黑色矩形和send_text标签是为了代表一个禁用的按钮。)