如何在 JavaFx 中创建响应式桌面应用程序 UI？

Question

问题是我想知道如何在JavaFx或Java Swing（在JavaFx中首选）中制作响应式桌面应用程序。当我尝试调整应用程序框架的大小时，它的组件大小不会增大或缩小，当我尝试在不同的屏幕尺寸和不同的屏幕分辨率上运行它时，情况也类似。我已经搜索过这个主题，但找不到任何解决方案。因此，任何参考资料也会非常有帮助。

我只想知道如何在桌面应用程序中添加响应能力。

<?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>

这是我的 css 文件

.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";
}

Answer 1

要管理布局，您需要熟悉JavaFX的内置布局窗格。 Oracle提供了一个tutorial，比较老了，所以代码风格已经过时了，但是底层技术没有改变。还值得阅读布局包的 API 文档，以了解整个系统的工作原理，以及每个

Pane

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

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

避免硬编码位置和大小。这意味着您不得设置
```
layoutX
```
、
```
layoutY
```
、
```
prefWidth
```
、
```
prefHeight
```
等。有时，设置最小/最大尺寸可能会有所帮助，但这可能会限制布局窗格响应的能力可用空间的变化。使用执行响应式布局的布局窗格。这意味着您通常不应该使用

StackPane

或 AnchorPane，除非 UI 中非常小的特定部分。相比之下，
```
BorderPane
```
、
```
HBox
```
、
```
VBox
```
、
```
GridPane
```
、
```
TilePane
```
、
```
FlowPane
```
等提供了最强的响应能力。专注于
```
逻辑
```
布局而不是具体定位。
决定您希望布局如何响应。如果有多余的空间，应该如何利用呢？如果空间有限，应该缩小什么？这将决定您决定使用哪些布局窗格。
-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">  <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">  </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" />  </VBox> </center> </BorderPane> </center> </BorderPane>

这会产生

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

如何在 JavaFx 中创建响应式桌面应用程序 UI？

问题描述投票：0回答：1

1个回答

最新问题

如何在 JavaFx 中创建响应式桌面应用程序 UI？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1