自定义 ListView 中的单元格答案

【问题标题】：Customizing Cells in ListView自定义 ListView 中的单元格
【发布时间】：2019-01-22 19:12:13
【问题描述】：

我已关注this 教程如何自定义在 FXML 中定义的结构的列表视图单元格。我已经像往常一样定义了 cellFactory：

itemListView.setCellFactory((ListView studentListView) -> new SwatchCell());

SwatchCell 类定义如下：

package ui;

import java.io.*;
import javafx.fxml.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.shape.*;
import logic.*;

public class SwatchCell extends ListCell<ColorSwatch>{

private FXMLLoader fxmlLoader;
@FXML private Label name, tagLine;
@FXML private Circle color1, color2, color3, color4, color5;
@FXML private VBox cellRootNode;

@Override
protected void updateItem(ColorSwatch item, boolean empty) {
    super.updateItem(item, empty);

    if (empty || item == null) {
        setText(null);
        setGraphic(null);
    } else {
        if (fxmlLoader == null) {
            loadFXML();
        }
        name.setText(item.getName());
        String tl = "";

        for (Tag t : item.getTagLine()) {
            if ("".equals(tl)) {
                tl += t.getDescription();
            } else {
                tl += ", " + t.getDescription();
            }
        }

        this.tagLine.setText(tl);

        color1.setFill(item.getColors()[0]);
        color2.setFill(item.getColors()[1]);
        color3.setFill(item.getColors()[2]);
        color4.setFill(item.getColors()[3]);
        color5.setFill(item.getColors()[4]);

        setText(null);
        setGraphic(cellRootNode);
    }
}

private void loadFXML() {
    fxmlLoader = new FXMLLoader(getClass().getResource("SwatchCellGraph.fxml"));
    fxmlLoader.setController(this);
    try {
        cellRootNode = fxmlLoader.load();
    } catch (IOException e) {
        System.err.println("failed to load Cell FXML");
        System.exit(0);
    }
}
}

FXML 是使用 scenebuilder 生成的，并且在 NetBeans 代码中不会弹出语法错误。对于您的想象，FXML 看起来像这样： screen .由于某种原因，程序最终出现在 SwatchCell 类中 loadFXML 方法的 catch 块中。这是堆栈跟踪

        Aug 15, 2018 2:25:58 PM javafx.fxml.FXMLLoader$ValueElement processValue
    WARNING: Loading FXML document with JavaFX API of version 8.0.171 by JavaFX runtime of version 8.0.161
Exception in Application start method
java.lang.reflect.InvocationTargetException
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at com.sun.javafx.application.LauncherImpl.launchApplicationWithArgs(LauncherImpl.java:389)
    at com.sun.javafx.application.LauncherImpl.launchApplication(LauncherImpl.java:328)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at sun.launcher.LauncherHelper$FXHelper.main(LauncherHelper.java:767)
Caused by: java.lang.RuntimeException: Exception in Application start method
    at com.sun.javafx.application.LauncherImpl.launchApplication1(LauncherImpl.java:917)
    at com.sun.javafx.application.LauncherImpl.lambda$launchApplication$154(LauncherImpl.java:182)
    at java.lang.Thread.run(Thread.java:748)
Caused by: java.lang.NullPointerException
    at ui.SwatchCell.updateItem(SwatchCell.java:29)
    at ui.SwatchCell.updateItem(SwatchCell.java:11)
    at javafx.scene.control.ListCell.updateItem(ListCell.java:471)
    at javafx.scene.control.ListCell.indexChanged(ListCell.java:330)
    at javafx.scene.control.IndexedCell.updateIndex(IndexedCell.java:116)
    at com.sun.javafx.scene.control.skin.VirtualFlow.setCellIndex(VirtualFlow.java:1957)
    at com.sun.javafx.scene.control.skin.VirtualFlow.getCell(VirtualFlow.java:1797)
    at com.sun.javafx.scene.control.skin.VirtualFlow.getCellLength(VirtualFlow.java:1879)
    at com.sun.javafx.scene.control.skin.VirtualFlow.computeViewportOffset(VirtualFlow.java:2528)
    at com.sun.javafx.scene.control.skin.VirtualFlow.layoutChildren(VirtualFlow.java:1189)
    at javafx.scene.Parent.layout(Parent.java:1087)
    at javafx.scene.Parent.layout(Parent.java:1093)
    at javafx.scene.Parent.layout(Parent.java:1093)
    at javafx.scene.Parent.layout(Parent.java:1093)
    at javafx.scene.Scene.doLayoutPass(Scene.java:552)
    at javafx.scene.Scene.preferredSize(Scene.java:1646)
    at javafx.scene.Scene.impl_preferredSize(Scene.java:1720)
    at javafx.stage.Window$9.invalidated(Window.java:864)
    at javafx.beans.property.BooleanPropertyBase.markInvalid(BooleanPropertyBase.java:109)
    at javafx.beans.property.BooleanPropertyBase.set(BooleanPropertyBase.java:144)
    at javafx.stage.Window.setShowing(Window.java:940)
    at javafx.stage.Window.show(Window.java:955)
    at javafx.stage.Stage.show(Stage.java:259)
    at ui.MainWindow.show(MainWindow.java:51)
    at ui.launcher.start(launcher.java:15)
    at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$161(LauncherImpl.java:863)
    at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$174(PlatformImpl.java:326)
    at com.sun.javafx.application.PlatformImpl.lambda$null$172(PlatformImpl.java:295)
    at java.security.AccessController.doPrivileged(Native Method)
    at com.sun.javafx.application.PlatformImpl.lambda$runLater$173(PlatformImpl.java:294)
    at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95)
    at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
    at com.sun.glass.ui.win.WinApplication.lambda$null$147(WinApplication.java:177)
    ... 1 more
Exception running application ui.launcher
C:\Users\Jan\AppData\Local\NetBeans\Cache\8.2\executor-snippets\run.xml:53: Java returned: 1
BUILD FAILED (total time: 2 seconds)

。我希望我包含了所有相关的代码。

老实说，我不完全理解 CallBack 和 CellFactory 的具体工作原理，这是第一次将 List Cell 更改到如此程度和这种方式。尽管我知道我不应该问“为我解决这个问题”，但对我来说如何学习的最佳方法是学习工作示例。我显然想让 listviews 的单元格采用 FXML 文件的外观。感谢您的帮助。

PS：所有 FXML 代码都是在 Scene Builder 中生成的，并且不会在 NetBeans 中弹出任何错误，因此在语法上应该没问题。 FX:ID 应该正确分配。

主窗口的FXML：

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

<?import javafx.geometry.Insets?>
<?import javafx.geometry.Rectangle2D?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>

<StackPane fx:id="background" maxHeight="1.7976931348623157E308" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="550.0" prefWidth="275.0" stylesheets="@MainWindowCSS.css" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ui.MainWindowGraphController">
   <padding>
      <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
   </padding>
   <children>
      <VBox fx:id="content" alignment="TOP_CENTER" maxHeight="1.7976931348623157E308" maxWidth="-Infinity" prefWidth="265.0" spacing="5.0">
         <children>
            <HBox prefHeight="32.0" prefWidth="200.0" spacing="5.0">
               <children>
                  <ImageView fitHeight="34.0" fitWidth="170.0" pickOnBounds="true" preserveRatio="true">
                     <image>
                        <Image url="@../resources/header.png" />
                     </image>
                     <viewport>
                        <Rectangle2D height="32.0" width="170.0" />
                     </viewport>
                  </ImageView>
                  <Button fx:id="miniButton" contentDisplay="GRAPHIC_ONLY" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#minimize" prefHeight="32.0" prefWidth="32.0" styleClass="util-button" text="_">
                     <graphic>
                        <ImageView fitHeight="32.0" fitWidth="32.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../resources/minimize.png" />
                           </image>
                        </ImageView>
                     </graphic>
                     <padding>
                        <Insets bottom="-5.0" left="-5.0" right="-5.0" top="-5.0" />
                     </padding>
                  </Button>
                  <Button fx:id="closeButton" contentDisplay="GRAPHIC_ONLY" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#kill" prefHeight="32.0" prefWidth="32.0" styleClass="util-button" text="x">
                     <graphic>
                        <ImageView fitHeight="32.0" fitWidth="32.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../resources/cross.png" />
                           </image>
                        </ImageView>
                     </graphic>
                     <padding>
                        <Insets bottom="-5.0" left="-5.0" right="-5.0" top="-5.0" />
                     </padding>
                  </Button>
               </children>
            </HBox>
            <Separator maxHeight="0.0" minHeight="0.0" prefHeight="0.0" prefWidth="177.0" />
            <ComboBox fx:id="comboBox" focusTraversable="false" maxWidth="1.7976931348623157E308" onAction="#repopulateListView" prefHeight="33.0" prefWidth="284.0" VBox.vgrow="ALWAYS" />
            <HBox spacing="5.0">
               <children>
                  <Button fx:id="addButton" contentDisplay="RIGHT" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="33.0" prefWidth="59.0" text="Add" HBox.hgrow="ALWAYS">
                     <graphic>
                        <ImageView fitHeight="14.0" fitWidth="14.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../resources/add.png" />
                           </image>
                           <viewport>
                              <Rectangle2D height="14.0" width="14.0" />
                           </viewport>
                        </ImageView>
                     </graphic>
                  </Button>
                  <Button fx:id="editButton" contentDisplay="RIGHT" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="33.0" prefWidth="54.0" text="Edit" HBox.hgrow="ALWAYS">
                     <graphic>
                        <ImageView fitHeight="14.0" fitWidth="14.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../resources/edit.png" />
                           </image>
                           <viewport>
                              <Rectangle2D height="14.0" width="14.0" />
                           </viewport>
                        </ImageView>
                     </graphic>
                  </Button>
                  <Button fx:id="deleteButton" contentDisplay="RIGHT" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="33.0" prefWidth="73.0" text="Delete" HBox.hgrow="ALWAYS">
                     <graphic>
                        <ImageView fitHeight="14.0" fitWidth="14.0" pickOnBounds="true" preserveRatio="true">
                           <image>
                              <Image url="@../resources/remove.png" />
                           </image>
                           <viewport>
                              <Rectangle2D height="14.0" width="14.0" />
                           </viewport>
                        </ImageView>
                     </graphic>
                  </Button>
               </children>
            </HBox>
            <Separator maxHeight="0.0" minHeight="0.0" prefHeight="0.0" prefWidth="177.0" />
            <ListView fx:id="itemListView" prefHeight="397.0" prefWidth="216.0" VBox.vgrow="ALWAYS" />
         </children>
         <padding>
            <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
         </padding></VBox>
   </children>
</StackPane>

SwatchCell 的 FXML：

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.shape.Circle?>
<?import javafx.scene.text.Font?>

<VBox fx:id="cellRootNode" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="107.0" prefWidth="255.0" spacing="5.0" style="-fx-background-color: #191919;" stylesheets="@MainWindowCSS.css" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Label fx:id="name" maxWidth="1.7976931348623157E308" text="ColorSwatch Name" textFill="WHITE" VBox.vgrow="ALWAYS" />
      <Label fx:id="tagLine" maxWidth="1.7976931348623157E308" text="TagLine" textFill="#b3b3b3">
         <graphic>
            <ImageView fitHeight="21.0" fitWidth="21.0" pickOnBounds="true" preserveRatio="true">
               <image>
                  <Image url="@../resources/tag.png" />
               </image>
            </ImageView>
         </graphic>
         <font>
            <Font size="12.0" />
         </font>
      </Label>
      <HBox prefHeight="12.0" prefWidth="64.0" spacing="5.0" VBox.vgrow="NEVER">
         <children>
            <StackPane minHeight="-Infinity" minWidth="-Infinity" prefHeight="44.0" prefWidth="44.0" styleClass="swatchBackground" HBox.hgrow="NEVER">
               <children>
                  <Circle fx:id="color1" fill="DODGERBLUE" radius="15.0" stroke="#ffffff00" strokeType="INSIDE" />
               </children>
            </StackPane>
            <StackPane minHeight="-Infinity" minWidth="-Infinity" prefHeight="44.0" prefWidth="44.0" styleClass="swatchBackground">
               <children>
                  <Circle fx:id="color2" fill="DODGERBLUE" radius="15.0" stroke="#ffffff00" strokeType="INSIDE" />
               </children>
            </StackPane>
            <StackPane minHeight="-Infinity" minWidth="-Infinity" prefHeight="44.0" prefWidth="44.0" styleClass="swatchBackground">
               <children>
                  <Circle fx:id="color3" fill="DODGERBLUE" radius="15.0" stroke="#ffffff00" strokeType="INSIDE" />
               </children>
            </StackPane>
            <StackPane minHeight="-Infinity" minWidth="-Infinity" prefHeight="44.0" prefWidth="44.0" styleClass="swatchBackground">
               <children>
                  <Circle fx:id="color4" fill="DODGERBLUE" radius="15.0" stroke="#ffffff00" strokeType="INSIDE" />
               </children>
            </StackPane>
            <StackPane minHeight="-Infinity" minWidth="-Infinity" prefHeight="44.0" prefWidth="44.0" styleClass="swatchBackground">
               <children>
                  <Circle fx:id="color5" fill="DODGERBLUE" radius="15.0" stroke="#ffffff00" strokeType="INSIDE" />
               </children>
            </StackPane>
         </children>
      </HBox>
   </children>
   <padding>
      <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
   </padding>
</VBox>

【问题讨论】：

添加您的FXML。
FXMLs 添加到原始帖子
很遗憾，我无法运行您的程序。这不是 MCVE。
我只是看教程。我没有看到教程中的cellRootNode = fxmlLoader.load(); 是在哪里完成的。该教程似乎在做fxmlLoader.load()，就是这样。你是怎么想出你的产品线的？
如前所述：请提供一个 minimal reproducible example 来证明问题；）

标签： java listview javafx

【解决方案1】：

我在我的一个项目中遇到了同样的问题，我通过在我的 fxml 文件中提供 fx:controller= 来解决它。你已经在你的主 fxml 中给出了，在 swatch fxml 文件中设置控制器也使用fx:controller="SwatchCell"//无论你的类包是什么

【讨论】：

是的，这是问题的一部分。我最终通过设置 fx:controller 让它工作，如果单元格为空或不为空，我突然错过了我的 NetBeans 拒绝正确地自动格式化（缩进）我的代码。谢谢解答