为什么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>

它是这样出现的:电流输出

这是我需要它的显示方式:输出需要

Answer 1

静态设置行大小不利于响应，我建议您在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" />