3个使用javafx的响应式盒子设计答案

【问题标题】：3 responsive box designs using javafx3个使用javafx的响应式盒子设计
【发布时间】：2026-02-07 13:50:01
【问题描述】：

如何使用scenebuilder为javafx创建树响应框设计。它应该有 3 个可以调整到屏幕大小的框。类似于下面的框。任何帮助>

【问题讨论】：

【解决方案1】：

我不使用场景构建器，我更喜欢自己创建 FXML 文件，尤其是因为它没有响应性。
定义应用程序 UI 的目的是选择好的布局。根据您想要实现的目标，有些比其他响应更快。

我看到了您的第一篇文章，但我没有使用 JFoenix，那么这里有一个非常轻量级/简单示例，其中包含“常规”组件，可以帮助您使您的应用程序具有响应性。

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

<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>

<fx:root xmlns:fx="http://javafx.com/fxml/1" type="GridPane" >
    <children>
        <VBox GridPane.rowIndex="0" GridPane.columnIndex="0" style="-fx-background-color:grey; -fx-opacity:0.7;"/>
        <VBox GridPane.rowIndex="0" GridPane.columnIndex="2" style="-fx-background-color:grey; -fx-opacity:0.7;"/>
        <VBox GridPane.rowIndex="0" GridPane.columnIndex="4" style="-fx-background-color:grey; -fx-opacity:0.7;"/>

        <HBox GridPane.rowIndex="1" GridPane.columnIndex="2"  alignment="CENTER" spacing="10.0">
            <Button text="ADD" style="-fx-background-color:DODGERBLUE;-fx-border-radius:10;-fx-background-radius:10"/> 
            <Button text="UPDATE" style="-fx-background-color:DODGERBLUE;-fx-border-radius:10;-fx-background-radius:10"/>
            <Button text="CLEAN" style="-fx-background-color:DODGERBLUE;-fx-border-radius:10;-fx-background-radius:10"/>
        </HBox>
    </children>
    <columnConstraints>
        <ColumnConstraints percentWidth="30.0" />
        <!-- Space -->
        <ColumnConstraints percentWidth="5.0" />
        <ColumnConstraints percentWidth="30.0" />
        <!-- Space -->
        <ColumnConstraints percentWidth="5.0" />
        <ColumnConstraints percentWidth="30.0" />
    </columnConstraints>
    <rowConstraints>
        <RowConstraints percentHeight="80.0" />
        <RowConstraints percentHeight="20.0" />
    </rowConstraints>
    <padding>
        <Insets top="10.0" left="10.0" bottom="10.0" right="10.0"/>
    </padding>
</fx:root>

这会导致类似的情况：

【讨论】：

嗨，我也刚刚使用 GridPane 完成了布局，然后我看到了你的答案。非常感谢您的回答。我想gridpane真的是要走的路，呵呵。
不过，您没有理由不能使用 Scene Builder 执行此操作。根据您希望它如何响应调整大小，HBox 也可能在这里工作。（或者，我猜是BorderPane 和HBox，中间有三个VBox，底部有HBox 中的三个按钮。）
@James_D 我不知道第一句话是否适合我，但如果是的话，我绝对从来没有说过这不能与 SceneBuilder 一起工作......我的意见是 SceneBuilder 经常设置很多组件的硬编码坐标/大小，这就是为什么 GUI 在大多数情况下对它的响应不如手动 FXML 编写。