为什么 GridPane 列间隔这么大

Question

我正在尝试使用 java 和 FXML 创建一个简单的界面。我使用的是 GridPane，一切都正确显示，但列间距过大。这是代码：

<Label styleClass="label-h2" GridPane.columnIndex="0" GridPane.rowIndex="0" text= "Personal Details"/> 
<Label styleClass="label-opac" GridPane.columnIndex="0" GridPane.rowIndex="1" text= "Name:"/> 
<TextField fx:id="nameTf"  GridPane.columnIndex="1" GridPane.rowIndex="1"/>
<Label styleClass="label-opac" GridPane.columnIndex="0" GridPane.rowIndex="2" text= "Email:"/> 
<TextField fx:id="emailTf" GridPane.columnIndex="1" GridPane.rowIndex="2"/>
<Label styleClass="label-opac" GridPane.columnIndex="0" GridPane.rowIndex="3" text= "Phone:"/> 
<TextField fx:id="phoneTf" GridPane.columnIndex="1" GridPane.rowIndex="3"/>
<Label styleClass="label-opac" GridPane.columnIndex="0" GridPane.rowIndex="4" text= "Phone:"/> 
<TextField fx:id="addressTf" GridPane.columnIndex="1" GridPane.rowIndex="4"/>
<Line startX="0.0" startY="200.0" endX="610.0" endY="200.0" stroke="#F0F8FF" GridPane.rowIndex="5"/>
<Label styleClass="label-h2" GridPane.columnIndex="0" GridPane.rowIndex="6" text= "Personal Details"/> 
<Label styleClass="label-opac" GridPane.columnIndex="0" GridPane.rowIndex="7" text= "TFN:"/> 
<TextField fx:id="tfnTf" GridPane.columnIndex="1" GridPane.rowIndex="7"/>   
<Label styleClass="label-opac" GridPane.columnIndex="0" GridPane.rowIndex="8" text= "Paid Hours:"/> 
<TextField fx:id="paidTf" GridPane.columnIndex="1" GridPane.rowIndex="8"/>   
<Label styleClass="label-opac" GridPane.columnIndex="0" GridPane.rowIndex="9" text= "Hourly Rate:"/> 
<TextField fx:id="hrlyTf" GridPane.columnIndex="1" GridPane.rowIndex="9"/>   
<Label styleClass="label-opac" GridPane.columnIndex="0" GridPane.rowIndex="10" text= "Job Type:"/> 
<TextField fx:id="typeTf" GridPane.columnIndex="1" GridPane.rowIndex="10"/>   

<HBox spacing="10" GridPane.columnIndex="1" GridPane.rowIndex="11" alignment="BOTTOM_CENTER" style="-fx-padding: 5 30 15 30;">
    <Button fx:id="addBtn" text="Add" onAction="#handleAdd"/>
    <Button fx:id="updateBtn" text="Update" onAction="#handleUpdate"/>
    <Button fx:id="closeBtn" text="Close" onAction="#empClose"/>   
</HBox>  

<stylesheets>
    <URL value="@stpfx.css" />
</stylesheets>

它是这样显示的： Current output

这是我需要它出现的方式： Output needed

Answer 1

静态设置行的大小不利于响应，我建议您将 Separator 与 columnSpan 一起使用：

<Label styleClass="label-h2" text="Personal Details" GridPane.columnIndex="0" GridPane.rowIndex="0" />
<Label styleClass="label-opac" text="Name:" GridPane.columnIndex="0" GridPane.rowIndex="1" />
<TextField fx:id="nameTf" GridPane.columnIndex="1" GridPane.rowIndex="1" />
<Label styleClass="label-opac" text="Email:" GridPane.columnIndex="0" GridPane.rowIndex="2" />
<TextField fx:id="emailTf" GridPane.columnIndex="1" GridPane.rowIndex="2" />
<Label styleClass="label-opac" text="Phone:" GridPane.columnIndex="0" GridPane.rowIndex="3" />
<TextField fx:id="phoneTf" GridPane.columnIndex="1" GridPane.rowIndex="3" />
<Label styleClass="label-opac" text="Phone:" GridPane.columnIndex="0" GridPane.rowIndex="4" />
<TextField fx:id="addressTf" GridPane.columnIndex="1" GridPane.rowIndex="4" />
<Separator prefWidth="200.0" GridPane.columnSpan="2" GridPane.rowIndex="5" />
<Label styleClass="label-h2" text="Personal Details" GridPane.columnIndex="0" GridPane.rowIndex="6" />
<Label styleClass="label-opac" text="TFN:" GridPane.columnIndex="0" GridPane.rowIndex="7" />
<TextField fx:id="tfnTf" GridPane.columnIndex="1" GridPane.rowIndex="7" />
<Label styleClass="label-opac" text="Paid Hours:" GridPane.columnIndex="0" GridPane.rowIndex="8" />
<TextField fx:id="paidTf" GridPane.columnIndex="1" GridPane.rowIndex="8" />
<Label styleClass="label-opac" text="Hourly Rate:" GridPane.columnIndex="0" GridPane.rowIndex="9" />
<TextField fx:id="hrlyTf" GridPane.columnIndex="1" GridPane.rowIndex="9" />
<Label styleClass="label-opac" text="Job Type:" GridPane.columnIndex="0" GridPane.rowIndex="10" />
<TextField fx:id="typeTf" GridPane.columnIndex="1" GridPane.rowIndex="10" />

为什么 GridPane 列间隔这么大

Why are the GridPane columns spaced out so much

java

user-interface

javafx

fxml