JavaFX 列表就像 SceneBuilder 中的库一样

Question

我试图在 SceneBuilder 中重新创建库列表的外观，但我不知道我需要采用哪个元素。

如何重新创建此列表？

Answer 1

这是使用 ControlsFx Awesome Fonts 的草稿。

Main:

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

/**
 *
 * @author blj0011
 */
public class JavaFXApplication73 extends Application
{    
    @Override
    public void start(Stage stage) throws Exception
    {
        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));

        Scene scene = new Scene(root);

        stage.setScene(scene);
        stage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args)
    {
        launch(args);
    }    
}

FXML:

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

<?import javafx.scene.control.Accordion?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.111" fx:controller="javafxapplication73.FXMLDocumentController">
    <children>
        <Label fx:id="label" layoutX="126" layoutY="120" minHeight="16" minWidth="69" />
      <Accordion prefHeight="200.0" prefWidth="320.0">
        <panes>
          <TitledPane animated="false" text="untitled 1">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
                     <children>
                        <ListView fx:id="lvOne" layoutX="-19.0" layoutY="-50.0" prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
                     </children>
                  </AnchorPane>
            </content>
          </TitledPane>
          <TitledPane animated="false" text="untitled 2">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
            </content>
          </TitledPane>
          <TitledPane animated="false" text="untitled 3">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
            </content>
          </TitledPane>
        </panes>
      </Accordion>
    </children>
</AnchorPane>

Controller:

import java.net.URL;
import java.util.ResourceBundle;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.util.Callback;
import org.controlsfx.glyphfont.FontAwesome;

/**
 *
 * @author blj0011
 */
public class FXMLDocumentController implements Initializable
{

    @FXML ListView lvOne;

    ObservableList<CustomItem> listViewData = FXCollections.observableArrayList();

    @Override
    public void initialize(URL url, ResourceBundle rb)
    {
        // TODO
        lvOne.setItems(listViewData);
        lvOne.setCellFactory(new Callback<ListView<CustomItem>, ListCell<CustomItem>>() {
            @Override
            public ListCell<CustomItem> call(ListView<CustomItem> listView)
            {
                return new ListViewCell();
            }
        });

        CustomItem ci = new CustomItem();        
        ci.setLabelGlyph(FontAwesome.Glyph.FLASH);
        ci.setString("entry one");
        listViewData.add(ci);

        CustomItem ci2 = new CustomItem();        
        ci2.setLabelGlyph(FontAwesome.Glyph.AMBULANCE);
        ci2.setString("entry two");
        listViewData.add(ci2);
    }    

}

ListView Cell:

import javafx.scene.control.Label;
import javafx.scene.control.ListCell;

/**
 *
 * @author blj0011
 */
public class ListViewCell extends ListCell<CustomItem>
{
    @Override
    public void updateItem(CustomItem item, boolean empty)
    {         
       super.updateItem(item, empty);

        if (empty || item == null) 
        {
            setGraphic(null);
            setText(null);
        } 
        else 
        {
            Label label = item.getLabel();
            setGraphic(label);
        }       
    }
}

CustomItem:

import javafx.scene.control.Label;
import org.controlsfx.glyphfont.FontAwesome;
import org.controlsfx.glyphfont.FontAwesome.Glyph;

/**
 *
 * @author blj0011
 */
public class CustomItem
{
    private final Label label = new Label();

    public void setLabelGlyph(Glyph glyph)
    {
        FontAwesome fa = new FontAwesome();
        label.setGraphic(fa.create(glyph));
    }

    public void setString(String string)
    {
        label.setText(string);
    }

    public Label getLabel()
    {
        return label;
    }
}