Java FX如何跨行？

Question

So I'm totalty new to using Java FX though I have worked with Android Studio before so there are some similarities. I'm having some trouble making elements span serveral columns though. I've seen some threads were people hav spanned it programaticly in Javam, but I don't create any grids with java, only in the fxml file. Here is the fxml code for a simple calculator I'm doing:

 <GridPane fx:controller="sample.Controller"
          xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10"
>

    <GridPane GridPane.columnIndex="0" GridPane.rowIndex="0" >
        <TextField fx:id="display" id="displayCSS" GridPane.columnSpan="3" ></TextField>
    </GridPane>

    <GridPane GridPane.columnIndex="0" GridPane.rowIndex="1">
        <Button text="+"  GridPane.rowIndex="1" GridPane.columnIndex="0" fx:id="btnadd" onAction="#btnAdd"    />
        <Button text="-"  GridPane.rowIndex="1" GridPane.columnIndex="1" fx:id="btnSub" onAction="#btnSub" />
        <Button text="/"  GridPane.rowIndex="2" GridPane.columnIndex="0" fx:id="btnDiv" onAction="#btnDiv"  />
        <Button text="*"  GridPane.rowIndex="2" GridPane.columnIndex="1" fx:id="btnMult" onAction="#btnMulti" />
        <Button text="Del"  GridPane.rowIndex="3" GridPane.columnIndex="0" fx:id="btnDel" onAction="#btnDel" />
        <Button text="CA"  GridPane.rowIndex="3" GridPane.columnIndex="1" fx:id="btnCA" onAction="#btnCA" />
        <Button text="="  GridPane.rowIndex="4" GridPane.columnIndex="0" fx:id="btnEqual" id="equals" onAction="#btnEqual"  />
    </GridPane>

    <GridPane GridPane.columnIndex="1" GridPane.rowIndex="1">
        <Button text="9" GridPane.columnIndex="2" GridPane.rowIndex="1" onAction="#btn9" />
        <Button text="8" GridPane.columnIndex="1" GridPane.rowIndex="1" onAction="#btn8"/>
        <Button text="7" GridPane.columnIndex="0" GridPane.rowIndex="1" onAction="#btn7" />
        <Button text="6" GridPane.columnIndex="2" GridPane.rowIndex="2" onAction="#btn6" />
        <Button text="5" GridPane.columnIndex="1" GridPane.rowIndex="2" onAction="#btn5" />
        <Button text="4" GridPane.columnIndex="0" GridPane.rowIndex="2" onAction="#btn4"/>
        <Button text="3" GridPane.columnIndex="2" GridPane.rowIndex="3" onAction="#btn3"/>
        <Button text="2" GridPane.columnIndex="1" GridPane.rowIndex="3" onAction="#btn2"/>
        <Button text="1" GridPane.columnIndex="0" GridPane.rowIndex="3" onAction="#btn1"/>
        <Button text="0" GridPane.columnIndex="1" GridPane.rowIndex="4" onAction="#btn0" GridPane.columnSpan="50" />
    </GridPane>
</GridPane>

I want the = and 0 button to to span 2 and 3 columns so they also become wider.

Answer 1

You can do

    <Button text="="  GridPane.rowIndex="4" GridPane.columnIndex="0" 
          GridPane.columnSpan="2" fx:id="btnEqual" id="equals" 
          onAction="#btnEqual" GridPane.fillWidth="true" maxWidth="Infinity" />

and

    <Button text="0" GridPane.columnIndex="0" GridPane.rowIndex="4" 
        onAction="#btn0" GridPane.columnSpan="3" GridPane.fillWidth="true" 
        maxWidth="Infinity" />