JavaFX ListView 被 TextArea 使用 GridPane 覆盖

Question

我正在开发一个带有 GUI 的小游戏，我遇到了布局问题。

当我运行它时，我得到这个:

ListView 被 TextArea 覆盖，我试图将其放在它旁边。就像这个例子一样:

这是我到目前为止的代码:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
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();
    TextArea actionDescArea = new TextArea();
    Label healthLabel = new Label("Health:");
    Label manaLabel = new Label("Mana:");
    Label healthDisplay = new Label("100/100");
    Label manaDisplay = new Label("100/100");
    Button actionBtn = new Button("Action");

    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(550);
        descArea.setWrapText(true);
        descArea.setEditable(false);
        GridPane.setConstraints(descArea, 0, 0, 1, 2);

        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.setMaxWidth(260);
        listView.setPrefHeight(150);
        GridPane.setConstraints(listView, 0, 2, 1, 1);

        actionDescArea.setPrefWidth(100);
        actionDescArea.setPrefHeight(150);
        actionDescArea.setMaxWidth(100);
        actionDescArea.setWrapText(true);
        actionDescArea.setEditable(false);
        GridPane.setConstraints(actionDescArea, 0, 2, 2, 1);

        actionBtn.setPrefWidth(260);
        actionBtn.setPrefHeight(60);
        GridPane.setConstraints(actionBtn, 0, 3);

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

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

如果有人能指出我正确的方向，那就太好了!

谢谢:)

Answer 1

需要注意的几点:

GridPane.setConstraints(descArea, 0, 0, 1, 2);

此处，TextArea descArea 的 colspan 为 1，columnIndex 为 0。

GridPane.setConstraints(listView, 0, 2, 1, 1);

这里，ListView listView 的 colspan 为 1，columnIndex 为 0。

GridPane.setConstraints(actionDescArea, 0, 2, 2, 1);

此处，TextArea actionDescArea 的 colspan 为 2，columnIndex 为 0。

如果我们想将 actionDescArea 放置在 listView 旁边，它的 columnIndex 应该大于后者。此外，如果我们希望它增长并覆盖 descArea 下面的整个宽度，我们需要将 Hgrow 设置为 Priority.Always 并删除 maxWidth

GridPane.setConstraints(actionDescArea, 1, 2, 1, 1);
GridPane.setHgrow(actionDescArea, Priority.ALWAYS);

此外，由于 listView 和 actionDescArea 都应位于 descArea 下，因此其 colspan 应为 2。

GridPane.setConstraints(descArea, 0, 0, 2, 2);

解决方案:

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

public class Test extends Application {

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

    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(550);
        descArea.setWrapText(true);
        descArea.setEditable(false);
        GridPane.setConstraints(descArea, 0, 0, 2, 2);

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

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

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

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

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

        actionDescArea.setPrefWidth(100);
        actionDescArea.setPrefHeight(150);
        actionDescArea.setWrapText(true);
        actionDescArea.setEditable(false);
        GridPane.setConstraints(actionDescArea, 1, 2, 1, 1);
        GridPane.setHgrow(actionDescArea, Priority.ALWAYS);

        actionBtn.setPrefWidth(260);
        actionBtn.setPrefHeight(60);
        GridPane.setConstraints(actionBtn, 0, 3);

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

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

输出: