Javafx 网格布局留下大空间

Question

我正在制作一款带有 GUI 的基于文本的游戏。我正在使用 Javafx 我正在尝试使用网格窗格排列元素。我正在尝试做这样的事情： example.

这是我的代码以及目前的样子

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();
    }

它是这样显示的 example2 我正在尝试将 mana 上移到健康标签下并使列表框变小。网格是正确的方法还是有更好的方法？

谢谢

Answer 1

I am trying to move the mana up under the health label

让 descArea 跨越两行。这意味着两个标签各占一行（第 0 行和第 1 行）并且描述区域跨越两行：

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

and make the list box smaller

您设置列表框的首选大小

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());

Answer 2

GridPane 似乎是一个很好的方法，是的。首先，我会将标签及其显示放在 HBox 控件中，而不是将它们放在 Grid 中的不同单元格中。然后，为了将 mana 标签向上移动到 health 标签下，我只需将两个控件放在 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);

要确保 ListView 不会填满整个单元格，您可以设置 ListView:

的最大宽度

listView.setPrefWidth(260); listView.setMaxWidth(260);

Javafx 网格布局留下大空间

Javafx grid layout leaving big spaces

javafx

gridpane