如何创建响应式盒子设计

时间：2018-05-30 08:15:38

标签： javafx fxml scenebuilder

所以我有两个相互重叠的hbox，以创建每个框的描述和内容。他们似乎看起来很好看当前的大小（看看img 1）。但是，它没有响应。一旦我使用更大的屏幕，盒子就不会调整到大小并保持原位（看看img 2）。有时他们甚至不会彼此重叠，而是向右或向左移动（看看img 3）。你能帮我建议一个更好的设计让我的盒子响应吗？提前谢谢。

图片1： enter image description here

图片2： enter image description here

图3： enter image description here

这是我的fxml代码：

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

<?import com.jfoenix.controls.JFXButton?>
<?import com.jfoenix.controls.JFXTabPane?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<AnchorPane id="AnchorPane" prefHeight="752.0" prefWidth="1280.0" styleClass="main-anchor-pane" stylesheets="@../../resources/css/Consolidated.css" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="gui.controllers.SalesDataController">
   <children>
      <JFXTabPane fx:id="tabPane" layoutX="181.0" layoutY="91.0" prefHeight="752.0" prefWidth="1280.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <tabs>
            <Tab fx:id="addNewTab" text="Add New">
               <content>
                  <AnchorPane maxWidth="1.7976931348623157E308" prefWidth="1280.0">
                     <children>
                        <HBox layoutY="79.0" prefHeight="383.0" prefWidth="1228.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
                           <children>
                              <VBox prefHeight="331.0" prefWidth="331.0" styleClass="vbox-properties">
                                 <children>
                                    <GridPane prefHeight="153.0" prefWidth="331.0">
                                       <columnConstraints>
                                          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                       </columnConstraints>
                                       <rowConstraints>
                                          <RowConstraints minHeight="10.0" prefHeight="40.0" vgrow="SOMETIMES" />
                                          <RowConstraints minHeight="10.0" prefHeight="40.0" vgrow="SOMETIMES" />
                                          <RowConstraints minHeight="10.0" prefHeight="40.0" vgrow="SOMETIMES" />
                                       </rowConstraints>
                                       <opaqueInsets>
                                          <Insets />
                                       </opaqueInsets>
                                       <padding>
                                          <Insets left="10.0" right="10.0" />
                                       </padding>
                                    </GridPane>
                                 </children>
                                 <HBox.margin>
                                    <Insets left="15.0" />
                                 </HBox.margin>
                              </VBox>
                              <VBox prefHeight="312.0" prefWidth="331.0" styleClass="vbox-properties">
                                 <children>
                                    <GridPane prefHeight="179.0" prefWidth="183.0">
                                       <columnConstraints>
                                          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                       </columnConstraints>
                                       <rowConstraints>
                                          <RowConstraints minHeight="12.0" prefHeight="30.0" vgrow="SOMETIMES" />
                                          <RowConstraints minHeight="12.0" prefHeight="30.0" vgrow="SOMETIMES" />
                                          <RowConstraints minHeight="12.0" prefHeight="30.0" vgrow="SOMETIMES" />
                                          <RowConstraints minHeight="12.0" prefHeight="30.0" vgrow="SOMETIMES" />
                                       </rowConstraints>
                                       <opaqueInsets>
                                          <Insets />
                                       </opaqueInsets>
                                       <padding>
                                          <Insets left="10.0" right="10.0" />
                                       </padding>
                                    </GridPane>
                                    <GridPane prefHeight="101.0" prefWidth="351.0">
                                       <columnConstraints>
                                          <ColumnConstraints />
                                       </columnConstraints>
                                       <rowConstraints>
                                          <RowConstraints />
                                       </rowConstraints>
                                       <opaqueInsets>
                                          <Insets />
                                       </opaqueInsets>
                                       <VBox.margin>
                                          <Insets top="30.0" />
                                       </VBox.margin>
                                    </GridPane>
                                 </children>
                                 <HBox.margin>
                                    <Insets left="71.75" right="71.75" />
                                 </HBox.margin>
                              </VBox>
                              <VBox prefHeight="166.0" prefWidth="331.0" styleClass="vbox-properties">
                                 <children>
                                    <GridPane prefHeight="101.0" prefWidth="331.0">
                                       <columnConstraints>
                                          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                                       </columnConstraints>
                                       <rowConstraints>
                                          <RowConstraints minHeight="10.0" prefHeight="40.0" vgrow="SOMETIMES" />
                                          <RowConstraints minHeight="10.0" prefHeight="40.0" vgrow="SOMETIMES" />
                                       </rowConstraints>
                                       <opaqueInsets>
                                          <Insets />
                                       </opaqueInsets>
                                       <padding>
                                          <Insets left="10.0" right="10.0" />
                                       </padding>
                                    </GridPane>
                                 </children>
                              </VBox>
                           </children>
                           <padding>
                              <Insets left="71.75" right="71.75" />
                           </padding>
                        </HBox>
                        <HBox alignment="CENTER" layoutY="462.0" prefHeight="51.0" prefWidth="277.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="462.0">
                           <children>
                              <JFXButton fx:id="addButton" mnemonicParsing="false" onAction="#addAction" prefWidth="70.0" text="ADD">
                                 <HBox.margin>
                                    <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                                 </HBox.margin>
                                 <padding>
                                    <Insets bottom="6.0" left="6.0" right="6.0" top="6.0" />
                                 </padding>
                              </JFXButton>
                              <JFXButton fx:id="updateButton" mnemonicParsing="false" onAction="#updateSalesDataAction" prefWidth="70.0" text="UPDATE">
                                 <HBox.margin>
                                    <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                                 </HBox.margin>
                                 <padding>
                                    <Insets bottom="6.0" left="6.0" right="6.0" top="6.0" />
                                 </padding>
                              </JFXButton>
                              <JFXButton fx:id="clearButton" mnemonicParsing="false" onAction="#clearAction" prefWidth="70.0" text="CLEAR">
                                 <padding>
                                    <Insets bottom="6.0" left="6.0" right="6.0" top="6.0" />
                                 </padding>
                                 <HBox.margin>
                                    <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                                 </HBox.margin>
                              </JFXButton>
                           </children>
                        </HBox>
                        <HBox alignment="CENTER" layoutX="502.0" layoutY="521.0" prefHeight="33.0" prefWidth="277.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="521.0" />
                        <HBox layoutY="29.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
                           <children>
                              <Label alignment="CENTER" prefHeight="55.0" prefWidth="279.0" styleClass="label-color" text="Info A" textAlignment="CENTER">
                                 <font>
                                    <Font name="System Bold" size="18.0" />
                                 </font>
                                 <HBox.margin>
                                    <Insets left="41.0" />
                                 </HBox.margin>
                              </Label>
                              <Label alignment="CENTER" prefHeight="55.0" prefWidth="279.0" styleClass="label-color" text="Info B" textAlignment="CENTER">
                                 <font>
                                    <Font name="System Bold" size="18.0" />
                                 </font>
                                 <HBox.margin>
                                    <Insets left="123.75" right="97.75" />
                                 </HBox.margin>
                              </Label>
                              <Label alignment="CENTER" prefHeight="55.0" prefWidth="279.0" styleClass="label-color" text="Info C" textAlignment="CENTER">
                                 <font>
                                    <Font name="System Bold" size="18.0" />
                                 </font>
                                 <HBox.margin>
                                    <Insets left="26.0" />
                                 </HBox.margin>
                              </Label>
                           </children>
                           <padding>
                              <Insets left="71.75" right="71.75" />
                           </padding>
                        </HBox>
                     </children>
                  </AnchorPane>
               </content>
            </Tab>
         </tabs>
      </JFXTabPane>
   </children>
</AnchorPane>

0 个答案:

没有答案
相关问题
最新问题