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

Question

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

Answer 1

我不使用scenebuilder，我更喜欢自己创建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>

这会导致类似的事情：