将舞台分成 2 个网格窗格 JavaFX

Question

所以我试图在左边有文本，在右边有按钮，文本应该有恒定的大小，按钮应该调整大小以填充窗口的其余部分。

这是我到目前为止的结果：

我不希望我的文本超过按钮，我希望它们共享整个窗口。

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;


public class Main extends Application {

    GridPane buttons = new GridPane();
    GridPane textGrid = new GridPane();
    @Override
    public void start(Stage primaryStage) {

       StackPane root = new StackPane();
       Button button1 = new Button();
       Button button2 = new Button();
       Button button3 = new Button();
       Button button4 = new Button();
       Button button5 = new Button();

       button1.setText("Button1");
       button2.setText("Button4");
       button3.setText("Button3");
       button4.setText("Button4");
       button5.setText("Button5");


       TextArea text1 = new TextArea();
       text1.setText("Test");
       text1.setPrefSize(100, 100);

       button1.prefWidthProperty().bind(buttons.widthProperty());
       button2.prefWidthProperty().bind(buttons.widthProperty());
       button3.prefWidthProperty().bind(buttons.widthProperty());
       button4.prefWidthProperty().bind(buttons.widthProperty());
       button5.prefWidthProperty().bind(buttons.widthProperty());

       button1.prefHeightProperty().bind(buttons.heightProperty());
       button2.prefHeightProperty().bind(buttons.heightProperty());
       button3.prefHeightProperty().bind(buttons.heightProperty());
       button4.prefHeightProperty().bind(buttons.heightProperty());
       button5.prefHeightProperty().bind(buttons.heightProperty());


       buttons.addColumn(0, button1, button2, button3, button4, button5);

       textGrid.addColumn(0, text1);


        Scene scene = new Scene(root, 280, 180);

        root.getChildren().addAll(buttons, textGrid);

        buttons.setAlignment(Pos.TOP_RIGHT);
        textGrid.setAlignment(Pos.TOP_LEFT); 

        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

}

Answer 1

通常最好让布局窗格处理布局管理，而不是尝试通过绑定来管理布局。

这是一个示例：

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;

import java.util.stream.IntStream;

public class Main extends Application {

    private static final int N_BUTTONS = 5;

    @Override
    public void start(Stage stage) {
        VBox buttonLayout = new VBox(
                10,
                IntStream.range(0, N_BUTTONS)
                        .mapToObj(this::createButton)
                        .toArray(Button[]::new)
        );
        HBox.setHgrow(buttonLayout, Priority.ALWAYS);

        TextArea textArea = new TextArea("Test");
        textArea.setPrefWidth(100);
        textArea.setMaxWidth(TextArea.USE_PREF_SIZE);
        textArea.setMinWidth(TextArea.USE_PREF_SIZE);

        HBox layout = new HBox(10, textArea, buttonLayout);
        layout.setPadding(new Insets(10));

        Scene scene = new Scene(layout);

        stage.setScene(scene);
        stage.show();
    }

    private Button createButton(int i) {
        Button button = new Button("Button " + i);
//        button.setMaxWidth(Double.MAX_VALUE);
        button.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        VBox.setVgrow(button, Priority.ALWAYS);

        return button;
    }

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

根据示例，我要指出以下几点：

1. 由于按钮非常相似，因此请在循环中而不是在代码中单独创建按钮。我使用IntStream带有 map 和 a的范围toArray，但您可以使用标准 for 循环（这可能更容易理解）来做同样的事情。
2. 使用标准布局窗格的组合来实现您的布局。例如按钮是垂直间隔的，所以把它们放在一个 VBox 中，文本和按钮彼此水平，所以使用 HBox。
3. 使用布局上的约束来推动它们执行您喜欢的布局，例如，HBox.setHgrow(buttonLayout, Priority.ALWAYS);告诉 Box 始终将 Box 中的任何额外空间分配给 buttonLayout，以便按钮将填充任何剩余区域。

4. 在各个节点上设置约束以按照您的意愿调整它们的大小，例如，以下代码为 textArea 建立固定宽度，该宽度不会变化（如果您愿意，可以使用类似的代码来建立固定高度）：

   textArea.setPrefWidth(100);
   textArea.setMaxWidth(TextArea.USE_PREF_SIZE);
   textArea.setMinWidth(TextArea.USE_PREF_SIZE);
   

5. 某些控件会自动将自身扩展到超出其最大大小，按钮默认情况下不会，要启用此行为，请使用以下代码（如果您只想扩展宽度而不是高度，则只需设置 maxWidth 而不是 maxSize） ：

   button.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
   

6. 不是像本例那样在代码中定义布局，而是使用诸如SceneBuilder 之类的工具来可视化地创建场景并将布局保存为FXML 文件，以便将布局与您的代码分开（类似地将任何样式放置在外部 CSS 中）文件）。