JAvaFX元素调整大小以适应Window

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JAvaFX元素调整大小以适应Window相关的知识,希望对你有一定的参考价值。

我只是在试用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>
答案

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

可调整大小的tableView和文本从中心向左移动

  1. 更改包含tableView的HBox的Anchor Constraints
  2. 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>
另一答案

我已经修改了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 s

以上是关于JAvaFX元素调整大小以适应Window的主要内容,如果未能解决你的问题,请参考以下文章

调整 textarea 的大小时,如果父元素是表格,它会扩展以适应,但当它是 div 时则不会。为啥?

Vanilla JavaScript:调整字体大小以适应容器

如何使 JavaFX 窗格适应其内容的大小?

html5 Canvas 如何自适应屏幕大小?

调整父小部件的大小以适应 Flutter 中的子帖子“变换”

如何自动调整标签大小以适应固定宽度的容器?