调整 GridPane 节点的大小

Question

下面代码有两个问题，想了半天也没解决：

1- 如下图所示，AnchorPane 不遵循我定义的高度属性，使用 SceneBuilder，它应该完全适合网格窗格的第 2 列并跨越 3 行，但是，它开始从网格窗格的顶部突出：

第二个也是最重要的问题是，虽然我在 FXML 中明确定义了列和行约束并分别启用了 VGrow 和 HGrow，但是当我最大化 window 时，GridPane 并没有完全没有规模。但是，我希望它填满屏幕。

<Pane fx:id="LocusPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="400.0" minWidth="700.0" style="-fx-border-color: black;" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="Controllers.AddLocusController">
<children>
    <GridPane fx:id="LocusGridPane" alignment="CENTER" hgap="10.0" layoutX="-14.0" minHeight="300.0" minWidth="600.0" vgap="10.0">
        <columnConstraints>
            <ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308" minWidth="10.0" prefWidth="130.0" />
            <ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308" minWidth="10.0" prefWidth="238.0" />
            <ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308" minWidth="10.0" prefWidth="277.0" />
        </columnConstraints>
        <rowConstraints>
            <RowConstraints maxHeight="1.7976931348623157E308" minHeight="10.0" prefHeight="107.0" vgrow="ALWAYS" />
            <RowConstraints maxHeight="1.7976931348623157E308" minHeight="10.0" prefHeight="125.0" vgrow="ALWAYS" />
            <RowConstraints maxHeight="1.7976931348623157E308" minHeight="10.0" prefHeight="118.0" vgrow="ALWAYS" />
        </rowConstraints>
        <children>
            <Label alignment="TOP_CENTER" text="Locus Management Panel" textAlignment="CENTER" GridPane.columnSpan="2" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.valignment="TOP" GridPane.vgrow="ALWAYS">
                <padding>
                    <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                </padding>
                <GridPane.margin>
                    <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                </GridPane.margin>
                <font>
                    <Font size="24.0" />
                </font>
            </Label>
            <Label text="Locus:" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.valignment="CENTER" GridPane.vgrow="ALWAYS">
                <font>
                    <Font size="18.0" />
                </font>
            </Label>
            <TextField fx:id="Locus" alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="37.0" prefWidth="223.0" promptText="Enter the locus name here.." GridPane.columnSpan="2" GridPane.halignment="RIGHT" GridPane.rowIndex="1">
                <padding>
                    <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                </padding>
                <GridPane.margin>
                    <Insets />
                </GridPane.margin>
            </TextField>
            <Button fx:id="Add" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#Add" prefHeight="30.0" prefWidth="100.0" text="Add" GridPane.columnIndex="1" GridPane.rowIndex="2" />
            <Button fx:id="Delete" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#Delete" prefHeight="30.0" prefWidth="100.0" text="Remove" GridPane.columnIndex="1" GridPane.halignment="RIGHT" GridPane.rowIndex="2" />
            <AnchorPane fx:id="ListViewHolder" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="200.0" prefWidth="200.0" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.rowSpan="3" GridPane.valignment="CENTER" GridPane.vgrow="ALWAYS">
                <GridPane.margin>
                    <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                </GridPane.margin>
                <cursor>
                    <Cursor fx:constant="CLOSED_HAND" />
                </cursor>
           <padding>
              <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
           </padding>
            </AnchorPane>
        </children>
        <padding>
            <Insets bottom="40.0" left="40.0" right="40.0" top="40.0" />
        </padding>
    </GridPane>
</children>

Answer 1

为了防止 AnchorPane 溢出其在 GridPane 中的区域，不要明确设置行的首选高度；让他们调整自己的大小以容纳他们的内容（默认行为）。

当 window 调整大小时 GridPane 不调整大小的原因是它被包装在 Pane 中（实际上不执行任何布局）。您可以省略包装窗格，并使 GridPane 成为 FXML 的根吗？如果不是，请使用使 GridPane 增长以适应整个内容的布局（例如，使用 BorderPane 作为包装器，并将 GridPane 放在中间：还有许多其他选项在这里）。

SSCCE：

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.String?>


<?import javafx.collections.FXCollections?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.control.Label?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.Cursor?>
<?import javafx.scene.control.ListView?>

<BorderPane fx:id="LocusPane" maxHeight="1.7976931348623157E308"
    maxWidth="1.7976931348623157E308" minHeight="400.0" minWidth="700.0"
    style="-fx-border-color: black;" xmlns="http://javafx.com/javafx/8.0.111"
    xmlns:fx="http://javafx.com/fxml/1">
    <center>
        <GridPane fx:id="LocusGridPane" gridLinesVisible="true"
            alignment="CENTER" hgap="10.0" layoutX="-14.0" minHeight="300.0"
            minWidth="600.0" vgap="10.0">
            <columnConstraints>
                <ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308"
                    minWidth="10.0" prefWidth="130.0" />
                <ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308"
                    minWidth="10.0" prefWidth="238.0" />
                <ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308"
                    minWidth="10.0" prefWidth="277.0" />
            </columnConstraints>
            <rowConstraints>
                <RowConstraints maxHeight="1.7976931348623157E308"
                    minHeight="10.0" vgrow="ALWAYS" />
                <RowConstraints maxHeight="1.7976931348623157E308"
                    minHeight="10.0" vgrow="ALWAYS" />
                <RowConstraints maxHeight="1.7976931348623157E308"
                    minHeight="10.0" vgrow="ALWAYS" />
            </rowConstraints>
            <children>
                <Label alignment="TOP_CENTER" text="Locus Management Panel"
                    textAlignment="CENTER" GridPane.columnSpan="2" GridPane.halignment="CENTER"
                    GridPane.hgrow="ALWAYS" GridPane.valignment="TOP" GridPane.vgrow="ALWAYS">
                    <padding>
                        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                    </padding>
                    <GridPane.margin>
                        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                    </GridPane.margin>
                    <font>
                        <Font size="24.0" />
                    </font>
                </Label>
                <Label text="Locus:" GridPane.halignment="CENTER"
                    GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.valignment="CENTER"
                    GridPane.vgrow="ALWAYS">
                    <font>
                        <Font size="18.0" />
                    </font>
                </Label>
                <TextField fx:id="Locus" alignment="CENTER" maxHeight="-Infinity"
                    maxWidth="-Infinity" prefHeight="37.0" prefWidth="223.0"
                    promptText="Enter the locus name here.." GridPane.columnSpan="2"
                    GridPane.halignment="RIGHT" GridPane.rowIndex="1">
                    <padding>
                        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                    </padding>
                    <GridPane.margin>
                        <Insets />
                    </GridPane.margin>
                </TextField>
                <Button fx:id="Add" minHeight="-Infinity" minWidth="-Infinity"
                    mnemonicParsing="false" prefHeight="30.0" prefWidth="100.0" text="Add"
                    GridPane.columnIndex="1" GridPane.rowIndex="2" />
                <Button fx:id="Delete" maxHeight="-Infinity" maxWidth="-Infinity"
                    minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false"
                    prefHeight="30.0" prefWidth="100.0" text="Remove"
                    GridPane.columnIndex="1" GridPane.halignment="RIGHT"
                    GridPane.rowIndex="2" />
                <AnchorPane fx:id="ListViewHolder" maxHeight="1.7976931348623157E308"
                    maxWidth="1.7976931348623157E308" prefHeight="200.0" prefWidth="200.0"
                    GridPane.columnIndex="2" GridPane.halignment="CENTER"
                    GridPane.hgrow="ALWAYS" GridPane.rowSpan="3" GridPane.valignment="CENTER"
                    GridPane.vgrow="ALWAYS">
                    <GridPane.margin>
                        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                    </GridPane.margin>
                    <cursor>
                        <Cursor fx:constant="CLOSED_HAND" />
                    </cursor>
                    <ListView>
                        <items>
                            <FXCollections fx:factory="observableArrayList">
                                <String fx:value="D8S1179" />
                                <String fx:value="D19S433" />
                            </FXCollections>
                        </items>
                    </ListView>
                    <padding>
                        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                    </padding>
                </AnchorPane>
            </children>
            <padding>
                <Insets bottom="40.0" left="40.0" right="40.0" top="40.0" />
            </padding>
        </GridPane>
    </center>
</BorderPane>

测试代码：

import java.io.IOException;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class LayoutTest extends Application {

    @Override
    public void start(Stage primaryStage) throws IOException {
        Scene scene = new Scene(FXMLLoader.load(getClass().getResource("Layout.fxml")));
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

截图：

开始后：

调整大小后：

调整 GridPane 节点的大小

Resizing GridPane's nodes

java

javafx

javafx-2

fxml

scenebuilder