如何在javafx中进行“响应式”设计？

Question

我在使用javafx时遇到了一些麻烦。

我有一个FXML文件，该文件具有两个表视图以及每个表视图之间的文本字段。

此FXML包含在tabPane中的另一个FXML中。

该应用程序是一个很大的应用程序，具有许多fxml，并包含在内部。

所以我不能将我的fxml与场景绑定。

问题与视图的高度有关。

在我的FXML的“ 行约束 ”中，所有百分比的总和为100 ，但视觉效果不好，在分辨率较低的情况下会发生溢出， 例如1360x768 。

我使用了scrollPane和选项“ AS_Needed ”解决了该问题，但我不明白为什么在屏幕很小的情况下为什么我的表视图没有减少。

例如 ：

tableview的行是： <RowConstraints percentHeight="20"/>如果我将值15而不是20减小了tableview。 但是所有行约束的总和不再是100。 如果我保持20，就会有溢出...

有人有解决方案吗？

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import fr.sdgib.app.tools.* ?>

<GridPane fx:id="gp" alignment="TOP_CENTER" styleClass="gpDetails" gridLinesVisible="true" xmlns="http://javafx.com/javafx/8.0.40"
          xmlns:fx="http://javafx.com/fxml/1" fx:controller="xxx.xxx.xxx.xxx.xxxController">
    <children>

        <Label styleClass="lblSousTitre" text="Contrats : " GridPane.columnIndex="1" GridPane.rowIndex="0" GridPane.columnSpan="2"/>

        <Label text="Recherche :" GridPane.columnIndex="1" GridPane.rowIndex="1"/>
        <TextField fx:id="tfRechercheContrat" promptText="Recherche" GridPane.columnIndex="2" GridPane.rowIndex="1" onKeyPressed="#rechercherContrat"/>

        <TableView fx:id="tvContrat" GridPane.columnIndex="1" GridPane.rowIndex="2" GridPane.columnSpan="2">
            <columns>
                <TableColumn fx:id="colNum" text="NUMERO DE CONTRAT"/>
                <TableColumn fx:id="colMontantFixe" text="MONTANT FIXE"/>
                <TableColumn fx:id="colMontant" text="MONTANT"/>
                <TableColumn fx:id="colType" text="TYPE"/>
            </columns>
        </TableView>


        <GridPane fx:id="gpFormContrat" gridLinesVisible="false" GridPane.columnIndex="1" GridPane.rowIndex="3" visible="true" GridPane.columnSpan="2">
            <children>

                <Label text="Type : " GridPane.columnIndex="0" GridPane.rowIndex="0"/>
                <ComboBox fx:id="cbxType" styleClass="cbxFiche" GridPane.columnIndex="1" GridPane.rowIndex="0" disable="true"/>

                <Label text="xxx : " GridPane.columnIndex="3" GridPane.rowIndex="0"/>
                <ComboBox fx:id="cbxxxx" styleClass="cbx" GridPane.columnIndex="4" GridPane.rowIndex="0" disable="true"/>

                <Label fx:id="lblMontant1" text="Montant xxx: " GridPane.columnIndex="0" GridPane.rowIndex="1"/>
                <TextFieldLimited fx:id="tfMontant1" maxlength="200" promptText="Montant " GridPane.columnIndex="1" GridPane.rowIndex="1" disable="true"/>

                <Label fx:id="lblMontant 2" text="Montant xxx : " GridPane.columnIndex="3" GridPane.rowIndex="1"/>
                <TextFieldLimited fx:id="tfMontant2" maxlength="200" promptText="Montant 2" GridPane.columnIndex="4" GridPane.rowIndex="1" />

                <Label fx:id="lblErrorContrat" GridPane.columnIndex="0" GridPane.rowIndex="2" GridPane.columnSpan="5"/>

                <Button fx:id="btnSupprimerContrat" styleClass="btnSupprimer" text="SUPPRIMER" visible="true" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.rowIndex="3" disable="true" onAction="#supprimerContrat"/>
                <Button fx:id="btnValiderContrat"  styleClass="btnValider" text="VALIDER" visible="true" GridPane.columnIndex="4" GridPane.halignment="RIGHT" GridPane.rowIndex="3" disable="true" onAction="#validerContrat"/>

            </children>
            <columnConstraints>
                <ColumnConstraints percentWidth="20"/>
                <ColumnConstraints percentWidth="28"/>
                <ColumnConstraints percentWidth="2"/>
                <ColumnConstraints percentWidth="20"/>
                <ColumnConstraints percentWidth="30"/>
            </columnConstraints>
            <rowConstraints>
                <RowConstraints />
                <RowConstraints />
                <RowConstraints />
                <RowConstraints />
            </rowConstraints>
        </GridPane>


        <Label styleClass="lblSousTitre" text="Contrats disponibles : " GridPane.columnIndex="1" GridPane.rowIndex="4" GridPane.columnSpan="2"/>

        <Label text="Recherche :" GridPane.columnIndex="1" GridPane.rowIndex="5"/>
        <TextField fx:id="tfRechercheContratDispo" promptText="Recherche" GridPane.columnIndex="2" GridPane.rowIndex="5" onKeyPressed="#rechercherContratDispo"/>

        <TableView fx:id="tvContratDispo" GridPane.columnIndex="1" GridPane.rowIndex="6" GridPane.columnSpan="2">
            <columns>
                <TableColumn fx:id="colNumDispo" text="NUMERO DE CONTRAT"/>
                <TableColumn fx:id="colMontantFixeDispo" text="MONTANT FIXE"/>
                <TableColumn fx:id="colMontantDispo" text="MONTANT"/>
                <TableColumn fx:id="colTypeDispo" text="TYPE"/>
            </columns>
        </TableView>


    </children>
    <columnConstraints>
        <ColumnConstraints percentWidth="5" />
        <ColumnConstraints percentWidth="10" />
        <ColumnConstraints percentWidth="80" />
        <ColumnConstraints percentWidth="5" />
    </columnConstraints>
    <rowConstraints>
        <RowConstraints percentHeight="5" />
        <RowConstraints percentHeight="5" />
        <RowConstraints percentHeight="30" />
        <RowConstraints percentHeight="22" />
        <RowConstraints percentHeight="5" />
        <RowConstraints percentHeight="5" />
        <RowConstraints percentHeight="26" />
        <RowConstraints percentHeight="2" />
    </rowConstraints>
</GridPane>

此处1368x768： http ://imgur.com/grBoRQH和1920x1080： http ://imgur.com/EnXFqCl