JAvaFX 元素调整大小以适应 Window

Question

我只是在试用 JavaFX 并且正在强行进入它，因为它被认为是未来。我遇到的问题是组件不会随屏幕调整大小。我试图更改 HBoxz HPane 约束，但它们似乎把一切都搞砸了。

这是我的 FXML 文件。

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<?import org.kordamp.ikonli.javafx.FontIcon?>

<AnchorPane id="AnchorPane" prefHeight="671.0" prefWidth="1020.0" stylesheets="@../../../resources/css/MainCSS.css" xmlns="http://javafx.com/javafx/9.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.arpentechnologies.software.core.paneladmin.gestionroles.FXMLGestionRolesController">
    <children>
        <Button id="backButton" fx:id="volverPanelAdminButton" layoutX="14.0" layoutY="14.0" mnemonicParsing="false" onAction="#onClickVolverInicio" prefHeight="56.0" prefWidth="54.0" styleClass="backButton" stylesheets="@../../../resources/css/MainCSS.css" AnchorPane.leftAnchor="8.0">
            <graphic>
                <FontIcon iconLiteral="mdi-keyboard-backspace" iconSize="30" wrappingWidth="30.0" />
            </graphic>
        </Button>
        <StackPane layoutX="14.0" layoutY="83.0" prefHeight="50.0" prefWidth="253.0" AnchorPane.leftAnchor="8.0">
            <children>
                <TextField prefHeight="45.0" prefWidth="283.0" promptText="Buscar...">
                    <font>
                        <Font size="18.0" />
                    </font>
                </TextField>
            </children>
        </StackPane>
        <StackPane layoutX="267.0" layoutY="83.0" prefHeight="50.0" prefWidth="50.0">
            <children>
                <FontIcon iconLiteral="mdi-send" iconSize="36" text="" />
            </children>
        </StackPane>
        <StackPane layoutX="860.0" layoutY="77.0" prefHeight="62.0" prefWidth="200.0" AnchorPane.rightAnchor="8.0">
            <children>
                <Button fx:id="anadirRolButton" mnemonicParsing="false" onAction="#onClickAnadirRol" prefHeight="39.0" prefWidth="231.0" text=" Añadir Rol">
                    <font>
                        <Font size="18.0" />
                    </font>
                    <graphic>
                        <FontIcon iconLiteral="mdi-account-plus" iconSize="26" />
                    </graphic>
                </Button>
            </children>
        </StackPane>
        <HBox layoutX="14.0" layoutY="152.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="511.0" prefWidth="1060.0">
            <children>
                <TableView prefHeight="495.0" prefWidth="1049.0" HBox.hgrow="ALWAYS">
                    <columns>
                        <TableColumn prefWidth="75.0" text="Nombre" />
                        <TableColumn prefWidth="75.0" text="Rol Padre" />
                        <TableColumn prefWidth="75.0" text="Módulos" />
                        <TableColumn prefWidth="75.0" text="Permisos" />
                        <TableColumn prefWidth="75.0" text="Editar" />
                        <TableColumn prefWidth="75.0" text="Borrar" />
                    </columns>
                </TableView>
            </children>
        </HBox>
        <Text layoutX="425.0" layoutY="65.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Gestión de Roles" wrappingWidth="224.0546875">
            <font>
                <Font size="30.0" />
            </font>
        </Text>
    </children>
</AnchorPane>

Answer 1

我尝试对您的 fxml 文件进行一些更改以获得响应式布局来满足您的需求

The resizable tableView and the text moves from the center to the left

修改包含tableView的HBox的Anchor Constraints
将Gestión de Roles放入HBox

这是更改后的 FXML 文件：

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>

<AnchorPane id="AnchorPane" prefHeight="671.0" prefWidth="1020.0" stylesheets="@../../../resources/css/MainCSS.css" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <Button id="backButton" fx:id="volverPanelAdminButton" layoutX="14.0" layoutY="14.0" mnemonicParsing="false" prefHeight="56.0" prefWidth="54.0" styleClass="backButton" stylesheets="@../../../resources/css/MainCSS.css" AnchorPane.leftAnchor="8.0">
            <graphic>
            </graphic>
        </Button>
        <StackPane layoutX="14.0" layoutY="83.0" prefHeight="50.0" prefWidth="253.0" AnchorPane.leftAnchor="8.0">
            <children>
                <TextField prefHeight="45.0" prefWidth="283.0" promptText="Buscar...">
                    <font>
                        <Font size="18.0" />
                    </font>
                </TextField>
            </children>
        </StackPane>
        <StackPane layoutX="267.0" layoutY="83.0" prefHeight="50.0" prefWidth="50.0">
            <children>
            </children>
        </StackPane>
        <StackPane layoutX="860.0" layoutY="77.0" prefHeight="62.0" prefWidth="200.0" AnchorPane.rightAnchor="8.0">
            <children>
                <Button fx:id="anadirRolButton" mnemonicParsing="false" prefHeight="39.0" prefWidth="231.0" text=" Añadir Rol">
                    <font>
                        <Font size="18.0" />
                    </font>
                    <graphic>
                    </graphic>
                </Button>
            </children>
        </StackPane>
        <HBox layoutX="14.0" layoutY="152.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="511.0" prefWidth="1060.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
            <children>
                <TableView prefHeight="495.0" prefWidth="1049.0" HBox.hgrow="ALWAYS">
                    <columns>
                        <TableColumn prefWidth="75.0" text="Nombre" />
                        <TableColumn prefWidth="75.0" text="Rol Padre" />
                        <TableColumn prefWidth="75.0" text="Módulos" />
                        <TableColumn prefWidth="75.0" text="Permisos" />
                        <TableColumn prefWidth="75.0" text="Editar" />
                        <TableColumn prefWidth="75.0" text="Borrar" />
                    </columns>
                </TableView>
            </children>
        </HBox>
      <HBox alignment="CENTER" layoutX="174.0" layoutY="14.0" prefHeight="100.0" prefWidth="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <children>
              <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Gestión de Roles" wrappingWidth="224.0546875" HBox.hgrow="ALWAYS">
                  <font>
                      <Font size="30.0" />
                  </font>
              </Text>
         </children>
      </HBox>
    </children>
</AnchorPane>

Answer 2

我更改了 AnchorPane 的 HBox 约束以保持固定，从而确保响应能力

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>

<AnchorPane id="AnchorPane" prefHeight="671.0" prefWidth="1020.0" stylesheets="@../../../resources/css/MainCSS.css" xmlns="http://javafx.com/javafx/8.0.102" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.arpentechnologies.software.core.paneladmin.gestionroles.FXMLGestionRolesController">
    <children>
        <Button id="backButton" fx:id="volverPanelAdminButton" layoutX="14.0" layoutY="14.0" mnemonicParsing="false" onAction="#onClickVolverInicio" prefHeight="56.0" prefWidth="54.0" styleClass="backButton" stylesheets="@../../../resources/css/MainCSS.css" AnchorPane.leftAnchor="8.0">
            <graphic>
                <FontIcon iconLiteral="mdi-keyboard-backspace" iconSize="30" wrappingWidth="30.0" />
            </graphic>
        </Button>
        <StackPane layoutX="14.0" layoutY="83.0" prefHeight="50.0" prefWidth="253.0" AnchorPane.leftAnchor="8.0">
            <children>
                <TextField prefHeight="45.0" prefWidth="283.0" promptText="Buscar...">
                    <font>
                        <Font size="18.0" />
                    </font>
                </TextField>
            </children>
        </StackPane>
        <StackPane layoutX="267.0" layoutY="83.0" prefHeight="50.0" prefWidth="50.0">
            <children>
                <FontIcon iconLiteral="mdi-send" iconSize="36" text="?" />
            </children>
        </StackPane>
        <StackPane layoutX="860.0" layoutY="77.0" prefHeight="62.0" prefWidth="200.0" AnchorPane.rightAnchor="8.0">
            <children>
                <Button fx:id="anadirRolButton" mnemonicParsing="false" onAction="#onClickAnadirRol" prefHeight="39.0" prefWidth="231.0" text=" A�adir Rol">
                    <font>
                        <Font size="18.0" />
                    </font>
                    <graphic>
                        <FontIcon iconLiteral="mdi-account-plus" iconSize="26" />
                    </graphic>
                </Button>
            </children>
        </StackPane>
        <HBox layoutX="14.0" layoutY="152.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="511.0" prefWidth="1060.0" AnchorPane.bottomAnchor="8.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="152.0">
            <children>
                <TableView prefHeight="495.0" prefWidth="1049.0" HBox.hgrow="ALWAYS">
                    <columns>
                        <TableColumn prefWidth="75.0" text="Nombre" />
                        <TableColumn prefWidth="75.0" text="Rol Padre" />
                        <TableColumn prefWidth="75.0" text="M�dulos" />
                        <TableColumn prefWidth="75.0" text="Permisos" />
                        <TableColumn prefWidth="75.0" text="Editar" />
                        <TableColumn prefWidth="75.0" text="Borrar" />
                    </columns>
                </TableView>
            </children>
        </HBox>
        <Text layoutX="425.0" layoutY="65.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Gesti�n de Roles" wrappingWidth="224.0546875">
            <font>
                <Font size="30.0" />
            </font>
        </Text>
    </children>
</AnchorPane>

Answer 3

您还可以添加一个 ScrollPane

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>

<AnchorPane id="AnchorPane" prefHeight="671.0" prefWidth="1020.0" stylesheets="@../../../resources/css/MainCSS.css" xmlns="http://javafx.com/javafx/8.0.102" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.arpentechnologies.software.core.paneladmin.gestionroles.FXMLGestionRolesController">
    <children>
      <ScrollPane prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
        <content>
          <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="670.0" prefWidth="1005.0">
               <children>
                  <HBox layoutX="389.0" layoutY="30.0">
                     <children>
                          <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Gesti�n de Roles" wrappingWidth="241.0546875" HBox.hgrow="NEVER">
                              <font>
                                  <Font size="30.0" />
                              </font>
                          </Text>
                     </children>
                  </HBox>
                    <Button id="backButton" fx:id="volverPanelAdminButton" layoutX="14.0" layoutY="25.0" mnemonicParsing="false" onAction="#onClickVolverInicio" prefHeight="50.0" prefWidth="115.0" styleClass="backButton" stylesheets="@../../../resources/css/MainCSS.css" AnchorPane.leftAnchor="14.0">
                        <graphic>
                            <FontIcon iconLiteral="mdi-keyboard-backspace" iconSize="30" wrappingWidth="30.0" />
                        </graphic>
                    </Button>
                    <StackPane layoutX="14.0" layoutY="87.0" prefHeight="50.0" prefWidth="253.0" AnchorPane.leftAnchor="14.0">
                        <children>
                            <TextField promptText="Buscar...">
                                <font>
                                    <Font size="18.0" />
                                </font>
                            </TextField>
                        </children>
                    </StackPane>
                    <StackPane layoutX="280.0" layoutY="87.0" prefHeight="50.0" prefWidth="50.0">
                        <children>
                            <FontIcon iconLiteral="mdi-send" iconSize="36" text="?" />
                        </children>
                    </StackPane>
                    <StackPane layoutX="784.0" layoutY="81.0" prefHeight="62.0" prefWidth="200.0" AnchorPane.rightAnchor="21.0">
                        <children>
                            <Button fx:id="anadirRolButton" mnemonicParsing="false" onAction="#onClickAnadirRol" text=" A�adir Rol">
                                <font>
                                    <Font size="18.0" />
                                </font>
                                <graphic>
                                    <FontIcon iconLiteral="mdi-account-plus" iconSize="26" />
                                </graphic>
                            </Button>
                        </children>
                    </StackPane>
                    <HBox maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" AnchorPane.bottomAnchor="8.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="152.0">
                        <children>
                            <TableView HBox.hgrow="ALWAYS">
                                <columns>
                                    <TableColumn prefWidth="75.0" text="Nombre" />
                                    <TableColumn prefWidth="75.0" text="Rol Padre" />
                                    <TableColumn prefWidth="75.0" text="M�dulos" />
                                    <TableColumn prefWidth="75.0" text="Permisos" />
                                    <TableColumn prefWidth="75.0" text="Editar" />
                                    <TableColumn prefWidth="75.0" text="Borrar" />
                                </columns>
                            </TableView>
                        </children>
                    </HBox>
               </children>
            </AnchorPane>
        </content>
      </ScrollPane>
    </children>
</AnchorPane>

JAvaFX 元素调整大小以适应 Window

JAvaFX elements resize to fit Window

resize

javafx