那些遇到过的问题

How to create responsive desktop applications UI in JavaFx?

Adn*_*rch 0 java javafx responsive-design fxml

The problem is that i want to know how to make responsive Desktop applications in JavaFx or Java Swing (preferred in JavaFx) . When i try to resize my application frame it's components size does not grow or shrink and similar is the situation when i try to run this on different screen sizes with different screen resolutions. I have searched on this topic but could not find any solution to this. So, any reference material will also be very helpful.

I just want to know how can i add responsiveness in my desktop applications.

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

<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIcon?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.text.Font?>

<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="700.0" xmlns="http://javafx.com/javafx/20.0.1" xmlns:fx="http://javafx.com/fxml/1">
    <AnchorPane prefHeight="500.0" prefWidth="700.0">
        <AnchorPane layoutY="1.0" prefHeight="500.0" prefWidth="250.0" styleClass="left-form" stylesheets="@../../stylesheets/loginDesign.css">
            <FontAwesomeIcon fill="WHITE" glyphName="STETHOSCOPE" layoutX="68.0" layoutY="228.0" size="12em" tabSize="0" />
            <Label layoutX="11.0" layoutY="274.0" text="Pesticide Management System" textFill="WHITE">
                <font>
                    <Font name="Berlin Sans FB" size="18.0" />
                </font>
            </Label>
        </AnchorPane>
        <AnchorPane layoutX="250.0" layoutY="1.0" prefHeight="500.0" prefWidth="450.0" styleClass="right-form" stylesheets="@../../stylesheets/loginDesign.css">
            <Label layoutX="133.0" layoutY="148.0" text="Welcome, Admin!" textFill="#374151">
                <font>
                    <Font name="Berlin Sans FB" size="25.0" />
                </font>
            </Label>
            <TextField layoutX="114.0" layoutY="226.0" prefHeight="30.0" prefWidth="220.0" promptText="Username" styleClass="text-field" stylesheets="@../../stylesheets/loginDesign.css" />
            <PasswordField layoutX="115.0" layoutY="273.0" prefHeight="30.0" prefWidth="220.0" promptText="Password" styleClass="text-field" stylesheets="@../../stylesheets/loginDesign.css" />
            <Button layoutX="115.0" layoutY="334.0" mnemonicParsing="false" prefHeight="35.0" prefWidth="220.0" styleClass="login-button" stylesheets="@../../stylesheets/loginDesign.css" text="Login" />
            <FontAwesomeIcon fill="#14b8a6" glyphName="USER_MD" layoutX="191.0" layoutY="128.0" size="7em" />
         <Button layoutX="401.0" mnemonicParsing="false" prefHeight="22.0" prefWidth="50.0" styleClass="close" stylesheets="@../../stylesheets/loginDesign.css">
            <graphic>
               <FontAwesomeIcon glyphName="CLOSE" size="15" />
            </graphic>
         </Button>
        </AnchorPane>
    </AnchorPane>
</StackPane>
Run Code Online (Sandbox Code Playgroud)

and here is my css file

.left-form {
    -fx-background-color: #14b8a6;
    -fx-border-color: #000;
    -fx-border-width: 0.4px 0px .4px .4px;
}

.right-form {
    -fx-background-color: #fff;
    -fx-border-color: #000;
    -fx-border-width: .4px .4px .4px 0px;
}

.close {
    -fx-background-color: transparent;
    -fx-cursor: hand;
}

.close:hover {
    -fx-background-color: #ef4444;
}

.text-field {
    -fx-border-color: #3e3d3d;
    -fx-border-width: 0.5px;
    -fx-border-radius: 4px;
    -fx-font-family: "Tahoma";
    -fx-font-size: 13px; /* Add 'px' unit to font size */
}

.text-field:focused {
    -fx-border-color: #14b8a6;
    -fx-border-radius: 4px;
    -fx-border-width: 1.5px;
}

.login-button {
    -fx-background-color: #14b8a6;
    -fx-background-radius: 15px;
    -fx-cursor: hand;
    -fx-font-size: 14px; /* Add 'px' unit to font size */
    -fx-text-fill: #fff;
    -fx-font-family: "SansSerif";
}
Run Code Online (Sandbox Code Playgroud)

Jam*_*s_D 5

要管理布局，您需要熟悉 JavaFX 的内置布局窗格。

尝试这些布局窗格并熟悉每个布局窗格如何管理布局以及它们具有哪些属性确实没有捷径。

如果您希望布局具有响应能力（即组件根据可用空间大小移动和调整大小），您需要：

  1. 避免对位置和大小进行硬编码。这意味着您不得设置layoutX、layoutY、prefWidth等prefHeight。有时，设置最小/最大尺寸可能会有所帮助，但这可能会限制布局窗格响应可用空间变化的能力。
  2. 使用执行响应式布局的布局窗格。这意味着您通常不应该使用StackPane或AnchorPane除了 UI 的非常小的特定部分。相比之下，BorderPane、HBox、VBox、GridPane、TilePane、FlowPane等提供了最强的响应能力。注重逻辑布局而不是具体定位。
  3. 决定您希望布局如何响应。如果有多余的空间，应该如何利用呢？如果空间有限，应该缩小什么？这将决定您决定使用哪些布局窗格。

这是您使用响应式窗格定义的布局的近似值。我还在CSS 中添加-fx-padding: 10;了left-form和样式类。right-form

我无法让 FontAwesome 部分工作，所以我将它们注释掉并猜测它们应该如何。（在我找到的版本中，FontAwesomeIcon不是Node子类。不确定那里发生了什么。）

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

<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIcon?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.Font?>
<BorderPane stylesheets="@loginDesign.css" xmlns="http://javafx.com/javafx/20.0.1" xmlns:fx="http://javafx.com/fxml/1">
    <left>
        <VBox alignment="CENTER" styleClass="left-form">
            <!--
            <FontAwesomeIcon fill="WHITE" glyphName="STETHOSCOPE" size="12em" tabSize="0" />
            -->
            <Label text="Pesticide Management System" textFill="WHITE">
                <font>
                    <Font name="Berlin Sans FB" size="18.0" />
                </font>
            </Label>
        </VBox>
    </left>
    <center>
        <BorderPane styleClass="right-form">
            <top>
                <HBox alignment="TOP_RIGHT">
                    <padding><Insets topRightBottomLeft="10"/></padding>
                    <Button mnemonicParsing="false" styleClass="close" text="X">
                        <!--
                        <graphic>
                            <FontAwesomeIcon glyphName="CLOSE" size="15" />
                        </graphic>
                        -->
                    </Button>
                </HBox>

            </top>
            <center>
                <VBox alignment="CENTER" spacing="20" fillWidth="true">
                    <Label text="Welcome, Admin!" textFill="#374151">
                        <font>
                            <Font name="Berlin Sans FB" size="25.0" />
                        </font>
                    </Label>
                    <TextField promptText="Username" styleClass="text-field" maxWidth="Infinity"/>
                    <PasswordField maxWidth="Infinity" promptText="Password" styleClass="text-field"  />
                    <Button maxWidth="Infinity" styleClass="login-button" text="Login" />
                    <!--
                    <FontAwesomeIcon fill="#14b8a6" glyphName="USER_MD" size="7em" />
                    -->
                </VBox>
            </center>
        </BorderPane>
    </center>
</BorderPane>
Run Code Online (Sandbox Code Playgroud)

这会产生

在此输入图像描述

如果我调整屏幕大小，它的响应相当好。您可以根据您的实际要求调整代码以使其做出不同的响应。

在此输入图像描述

归档时间：

查看次数：

224 次

最近记录：

2 年，10 月 前
相关归档
Android - SPAN_EXCLUSIVE_EXCLUSIVE跨度不能为零长度 182
可选orElse Java中的可选项 128
如何知道其他线程是否已完成？ 121
如何强制Selenium WebDriver点击当前不可见的元素？ 96
BigDecimal - 使用new或valueOf 87
Windows:如何获取所有可见窗口的列表？ 43
如何引用primaryStage 18
JavaFX如何显示只读文本？ 11
如何在移动设备上强制缩小或缩小宽度？ 7
将颜色从 CSS 转换为 javafx 颜色对象 5
难疑归档
使用Git将我的最后一次X提交压缩在一起 3294
如何在不手动指定编码的情况下在C#中获得字符串的一致字节表示？ 2121
Eclipse Android插件中的"调试证书已过期"错误 1863
如何将包含历史记录的SVN存储库迁移到新的Git存储库？ 1486
如何创建文件并用Java写入？ 1336
如何在jQuery Ajax调用之后管理重定向请求 1319
varchar和nvarchar有什么区别？ 1300
在现代Python中声明自定义异常的正确方法？ 1176
.NET - 枚举的jSON序列化为字符串 1088
功能编程是否取代了GoF设计模式？ 1028