Javafx网格布局留下大空间答案

【问题标题】：Javafx grid layout leaving big spacesJavafx网格布局留下大空间
【发布时间】：2016-08-08 13:25:49
【问题描述】：

我正在使用 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 我试图在健康标签下移动法力并使列表框更小。网格是正确的方法还是有更好的方法？

谢谢

【问题讨论】：

标签： javafx gridpane

【解决方案1】：

我正在尝试在健康标签下向上移动法力

让descArea 跨越两行。这意味着两个标签各占一行（第 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());

【讨论】：

一个小提示是 ListView 当前显示为超过 260 像素，因为它将填满整个单元格。这可以通过设置ListView的最大宽度来解决。
对 descArea 使用 James_D 答案，对 ListView 使用 Jonatan Stenbacka 都有效，谢谢！
为列表框更新了几个不同的解决方案。感谢@JonatanStenbacka 澄清这一点。

【解决方案2】：

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

为确保ListView 不会填满整个单元格，您可以设置ListView 的maxWidth：

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

【讨论】：