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

這裏，文本區域descArea有合併單元格爲1 columnIndex爲0

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

在這裏， ListView listView的colspan爲1，columnIndex爲0.

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

這裏，文本區域actionDescArea有合併單元格爲2 columnIndex爲0

如果我們要放置旁邊listViewactionDescArea，它應該有一個columnIndex比後者更大。此外，如果我們希望它成長並覆蓋descArea下的整個寬度，我們需要設置Hgrow爲Priority.Always和刪除maxWidth

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

此外，由於雙方listView和actionDescArea應該descArea下，它的列跨度應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(); 
    } 
} 

輸出：