如何使组件适合它们添加到的 GridPane 的宽度？

Question

我正在尝试使用 FXML 和 GridPane 实现此布局。

我的成就是这样的：

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

<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>
<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>


<GridPane fx:controller="com.mycompany.mavenproject1.PrimaryController" xmlns:fx="http://javafx.com/fxml"  alignment="center">
    <Label fx:id="label" GridPane.columnIndex="0" GridPane.rowIndex="0" GridPane.hgrow="always" GridPane.vgrow="always" />
    <TextField fx:id="a"  GridPane.columnIndex="0" GridPane.rowIndex="1"/>
    <TextField  fx:id="b"  GridPane.columnIndex="1" GridPane.rowIndex="1"/>
    <TextField  fx:id="c"  GridPane.columnIndex="2" GridPane.rowIndex="1"/>
    <Button fx:id="solveButton" text="Solve" onAction="#solve" GridPane.columnIndex="0" GridPane.rowIndex="2"  />
    <Button fx:id="clearButton" text="Clear" onAction="#clear" GridPane.columnIndex="0" GridPane.rowIndex="3" />
</GridPane>

问题：如何让子项真正适合 GridPane 以及为什么这些文本字段的大小不同？

Answer 1

How do I make children actually fit the GridPane [...]?

您可以将子节点包裹在 AnchorPane 中并将锚点设置为零。

[...] and why those textfields are not of the same size?

我不知道，但您可以使用 ColumnConstraints 并将每列宽度设置为 33.33 %。

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane alignment="center" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1"
          fx:controller="com.mycompany.mavenproject1.PrimaryController">
    <columnConstraints>
        <ColumnConstraints percentWidth="33.33"/>
        <ColumnConstraints percentWidth="33.33"/>
        <ColumnConstraints percentWidth="33.33"/>
    </columnConstraints>
    <AnchorPane GridPane.columnSpan="3" GridPane.hgrow="always" GridPane.vgrow="always">
        <children>
            <Label fx:id="label" alignment="CENTER" style="-fx-background-color: tomato;" text="Number format error!"
                   AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
                   AnchorPane.topAnchor="0.0"/>
        </children>
    </AnchorPane>
    <TextField fx:id="a" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
    <TextField fx:id="b" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
    <TextField fx:id="c" GridPane.columnIndex="2" GridPane.rowIndex="1"/>
    <AnchorPane GridPane.columnSpan="3" GridPane.rowIndex="2">
        <Button fx:id="solveButton" onAction="#solve" text="_Solve" AnchorPane.bottomAnchor="0.0"
                AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"/>
    </AnchorPane>
    <AnchorPane GridPane.columnSpan="3" GridPane.rowIndex="3">
        <Button fx:id="clearButton" onAction="#clear" text="_Clear" AnchorPane.bottomAnchor="0.0"
                AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"/>
    </AnchorPane>
</GridPane>

Answer 2

实现此目的的另一种替代方法是仅依赖 GridPane 约束功能。您可以添加 Column/Row 约束并将 fillHeight/fillWidth 设置为 true 并将 hgrow/vgrow 策略设置为 ALWAYS。同时将所需节点 maxWidth/maxHeight 设置为 Infinity 以自动拉伸。

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

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<GridPane xmlns:fx="http://javafx.com/fxml"  alignment="center">
    <Label fx:id="label" text="Number Format Error !" maxWidth="Infinity" alignment="CENTER" GridPane.columnSpan="3"/>
    <TextField fx:id="a" GridPane.columnIndex="0" GridPane.rowIndex="1"/>
    <TextField fx:id="b" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
    <TextField fx:id="c" GridPane.columnIndex="2" GridPane.rowIndex="1"/>
    <Button fx:id="solveButton" text="Solve" maxWidth="Infinity" maxHeight="Infinity" GridPane.columnSpan="3" GridPane.rowIndex="2"  />
    <Button fx:id="clearButton" text="Clear" maxWidth="Infinity" maxHeight="Infinity" GridPane.columnSpan="3" GridPane.rowIndex="3" />
    <columnConstraints>
        <ColumnConstraints fillWidth="true" hgrow="ALWAYS"/>
        <ColumnConstraints fillWidth="true" hgrow="ALWAYS"/>
        <ColumnConstraints fillWidth="true" hgrow="ALWAYS"/>
    </columnConstraints>
    <rowConstraints>
        <RowConstraints vgrow="ALWAYS"/>
        <RowConstraints vgrow="NEVER"/>
        <RowConstraints fillHeight="true" vgrow="ALWAYS"/>
        <RowConstraints fillHeight="true" vgrow="ALWAYS"/>
    </rowConstraints>
</GridPane>

如何使组件适合它们添加到的 GridPane 的宽度？

How to make components fit width of the GridPane they're added to?

javafx

fxml