Как сделать так, чтобы «Трелло выглядело» в javafx.Список прямоугольников

Question

Я пытаюсь заставить trello выглядеть в JavaFX. Мне просто и понятно работать с ним. Проблема в том, что я делаю первое приложение в javaFX и даже в java. Как мне создать «компонент списка» так же, как в trello? Он должен быть прокручиваемым, а родительская панель должна иметь размер, соответствующий всем прямоугольникам в качестве параметров списка

Изображение ниже того, чего я хочу достичь

Итак, я хочу создать что-то вроде этого:

Код в xml:

<?import javafx.scene.text.*?>
<?import javafx.geometry.*?>
<?import com.jfoenix.controls.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.shape.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="mainPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" prefHeight="592.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="pizzeria.kontrolery.FXMLGlownyPanelController">
   <children>
      <AnchorPane maxWidth="1.7976931348623157E308" minHeight="-Infinity" prefHeight="80.0" prefWidth="600.0" style="-fx-background-color: #2db78b;" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <children>
            <JFXHamburger fx:id="menuBtn" alignment="CENTER" layoutX="517.0" prefHeight="80.0" prefWidth="83.0" AnchorPane.bottomAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
               <opaqueInsets>
                  <Insets />
               </opaqueInsets>
            </JFXHamburger>
            <VBox id="navBox" alignment="CENTER" layoutX="271.0" layoutY="9.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
               <children>
                  <ImageView fitHeight="62.0" fitWidth="65.0" layoutX="271.0" layoutY="9.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2">
                     <image>
                        <Image url="@../img/logo2.png" />
                     </image>
                  </ImageView>
               </children>
            </VBox>
         </children>
      </AnchorPane>
      <AnchorPane layoutY="70.0" nodeOrientation="LEFT_TO_RIGHT" prefHeight="330.0" prefWidth="600.0" style="-fx-background-color: #C9DED7;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="80.0">
         <children>
            <JFXDrawer fx:id="menu" defaultDrawerSize="200.0" direction="RIGHT" layoutX="400.0" maxHeight="-Infinity" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" prefHeight="330.0" AnchorPane.bottomAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
            <Rectangle arcHeight="15.0" arcWidth="15.0" fill="#2db588" height="464.0" layoutX="29.0" layoutY="7.0" stroke="#2db588" strokeType="INSIDE" width="283.0" AnchorPane.leftAnchor="20.0" AnchorPane.topAnchor="20.0">
               <effect>
                  <DropShadow />
               </effect></Rectangle>
            <Label layoutX="45.0" layoutY="34.0" text="Przyjęte zamówienia" textFill="WHITE">
               <font>
                  <Font name="System Bold" size="20.0" />
               </font>
            </Label>
            <Button layoutX="91.0" layoutY="454.0" mnemonicParsing="false" style="-fx-background-color: #269572;" text="DODAJ ZAMÓWIENIE" textFill="WHITE">
               <font>
                  <Font size="12.0" />
               </font>
            </Button>
            <ScrollPane layoutX="30.0" layoutY="70.0" prefHeight="376.0" prefWidth="262.0">
              <content>
                <AnchorPane fx:id="listaZamowien" minHeight="0.0" minWidth="0.0" prefHeight="374.0" prefWidth="260.0" style="-fx-background-color: #D2D2D2;">
                     <children>
                        <Rectangle arcHeight="5.0" arcWidth="5.0" fill="WHITE" height="72.0" layoutX="10.0" layoutY="181.0" stroke="WHITE" strokeType="INSIDE" width="240.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="181.0">
                           <effect>
                              <DropShadow />
                           </effect>
                        </Rectangle>
                        <Label layoutX="21.0" layoutY="199.0" prefHeight="18.0" prefWidth="200.0" text="Zamówienie nr: 1" AnchorPane.leftAnchor="21.0" AnchorPane.topAnchor="199.0">
                           <font>
                              <Font size="14.0" />
                           </font>
                        </Label>
                        <Label layoutX="20.0" layoutY="217.0" text="Rodzaj zamówienia: dostawa" AnchorPane.leftAnchor="20.0">
                           <font>
                              <Font size="14.0" />
                           </font>
                        </Label>
                     </children>
                  </AnchorPane>
              </content>
            </ScrollPane>
         </children>
      </AnchorPane>
   </children>
</AnchorPane>

Может кто-нибудь дать мне несколько советов, как заставить все это работать хорошо? Я понятия не имею, как сделать регулируемую панель для этих прямоугольников, и когда она достигает нижнего края, она начинает прокручиваться.

Answer 1

Как вы уже сказали, вы можете реализовать собственный ListView, который визуализирует ваши элементы, как на вашем первом изображении.Для этого вам нужно реализовать свой собственный ListCell.

Еще один способ - создать собственный VBox, который содержит ваши узлы (Something 1, Something 2).Например, вашими Узлами могут быть HBox, если вы хотите показать больше элементов пользовательского интерфейса рядом друг с другом.