为啥 GridPane 列的间距如此之大

Posted 2023-03-25

【中文标题】为啥 GridPane 列的间距如此之大

【英文标题】：Why are the GridPane columns spaced out so much为什么 GridPane 列的间距如此之大

【发布时间】：2021-12-10 01:16:49

【问题描述】：

我正在尝试使用 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

【问题讨论】：

可能是因为这条线，它是 610 ？像素宽

请参阅this answer 了解如何跨两列跨行

我如何让这条线从头到尾？

spanning 修复了最初的问题，但我无法让线条穿过屏幕。

【参考方案1】：

静态设置行的大小不利于响应，我建议你在 columnSpan 旁边使用 Separator ：

<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" />