如何在javafx中制作“trello look”。 矩形列表

Question

我嘗試在JavaFX中使用trello。 我發現它很簡單明了。 問題是我在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）。 例如，如果要在彼此旁邊顯示更多UI元素，您的節點可能是HBox。