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

Question

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

Answer 1

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

我第一次看到你的第一个 post 并且我不使用 JFoenix，然后这里是一个 very light/simple 带有 "regular" 组件的例子这可以帮助您使您的应用程序响应。

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

这导致了类似的事情：

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

3 responsive box designs using javafx

javafx

fxml

scenebuilder