Структура сетки Javafx, оставляющая большие пробелы

Question

Я делаю текстовую игру с графическим интерфейсом. Я использую 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 Я пытаюсь переместить ману под этикеткой здоровья и сделать окно списка меньше , Является ли сетка правильным способом для этого или есть лучший способ?

Благодаря

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

Answer 2

GridPane кажется, как хороший способ сделать это, да. Во-первых, я бы поставил метки и их дисплеи в элементы управления HBox вместо того, чтобы помещать их в ячейки differents в 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 не не заполняет всю свою ячейку, вы можете установить MaxWidth из ListView:

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