Javafx网格布局留下大空间

Question

我正在用GUI制作一个基于文本的游戏。我正在使用Javafx，我正在尝试使用网格窗格排列元素。我正在尝试这样做：举例。

这是我的代码和目前的样子

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.geometry.Insets;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.control.TextArea;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class test extends Application {

    Stage window;
    ListView<String> listView;
    TextArea descArea = new TextArea();
    Label healthLabel = new Label("Health:");
    Label manaLabel = new Label("Mana:");
    Label healthDisplay = new Label("100/100");
    Label manaDisplay = new Label("100/100");

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

    @Override
    public void start(Stage primaryStage) throws Exception {
        window = primaryStage;
        window.setTitle("Game");


        GridPane grid = new GridPane();
        grid.setPadding(new Insets(10, 10, 10, 10));
        grid.setVgap(10);
        grid.setHgap(10);

        descArea.setPrefWidth(750);
        descArea.setPrefHeight(450);
        descArea.setWrapText(true);
        GridPane.setConstraints(descArea, 0, 0);

        GridPane.setConstraints(healthLabel, 1, 0);
        GridPane.setValignment(healthLabel, VPos.TOP);

        GridPane.setConstraints(healthDisplay, 2, 0);
        GridPane.setValignment(healthDisplay, VPos.TOP);

        GridPane.setConstraints(manaLabel, 1, 1);
        GridPane.setValignment(manaLabel, VPos.TOP);

        GridPane.setConstraints(manaDisplay, 2, 1);
        GridPane.setValignment(manaDisplay, VPos.TOP);


        listView = new ListView<>();
        listView.getItems().addAll("Action 1", "Action 2", "Action 3", "Action 4");
        listView.setPrefWidth(260);
        listView.setPrefHeight(150);
        GridPane.setValignment(listView, VPos.BASELINE);
        GridPane.setConstraints(listView, 0, 2);


        grid.getChildren().addAll(descArea, healthLabel, healthDisplay, manaLabel, manaDisplay, listView);

        Scene scene = new Scene(grid, 950, 750);
        window.setScene(scene);
        window.show();
    }

就像这个例子2所示，我试图将魔法力移到健康标签下，并缩小列表框。网格是正确的方法还是有更好的方法？

谢啦

Answer 1

GridPane似乎是一个很好的方法，是的。首先，我将标签及其显示放在HBox控件中，而不是将它们放在Grid中的不同单元格中。然后，要将法力标签上移到健康标签下，我只需将两个控件都放在VBox中，然后将VBox放在单元格中。

HBox healthBox = new HBox(10);
healthBox.getChildren().addAll(healthLabel, healthDisplay);

HBox manaBox = new HBox(10);
manaBox.getChildren().addAll(manaLabel, manaDisplay); 

VBox box = new VBox(10);
box.getChildren().addAll(healthBox, manaBox);

GridPane.setConstraints(box, 1, 0);

要确保列表视图没有填满整个单元格，可以设置列表视图的最大宽度：

<代码>列表视图。setPrefWidth（260）；listView。setMaxWidth（260）

Answer 2

我想把健康标签下的法力值调高

让描述区域横跨两行。这意味着两个标签分别位于一行（第0行和第1行），描述区域横跨两行：

// GridPane.setConstraints(descArea, 0, 0);
// (node, columnIndex, rowIndex, columnSpan, rowSpan):
GridPane.setConstraints(descArea, 0, 0, 1, 2);

并使列表框变小

您可以使用设置列表框的首选大小

listView.setPrefWidth(260);
listView.setPrefHeight(150);

默认情况下，GridPane将调整每个控件的大小以填充包含它的单元格的宽度。由于列表框与文本区域位于同一列，其首选宽度为750，因此这将强制列表框也具有750的宽度。您可以通过两种方式解决此问题：

设置列表框的最大宽度：

listView.setMaxWidth(260);

或者，如果您喜欢“GridPane”解决方案，请使用一些列约束来覆盖默认行为：

ColumnConstraints leftCol = new ColumnConstraints();
leftCol.setFillWidth(false);
grid.getColumnConstraints().addAll(leftCol, new ColumnConstraints());