JavaFX 列表类似于 SceneBuilder 中的库答案

【问题标题】：JavaFX list like the library in the SceneBuilderJavaFX 列表类似于 SceneBuilder 中的库
【发布时间】：2017-04-12 12:14:04
【问题描述】：

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

如何重新创建此列表？

【问题讨论】：

您的问题是：如何创建一堆可展开的部分，每个部分都包含一组带有图标的按钮？
它看起来像ListView，使用 CSS 应用了一些样式，可能还有一个自定义单元工厂来添加左侧的图形。（而ListView 用作TitledPane 的内容。）注意source code 是免费提供的……（我没看过）。
从 Accordion 开始，然后添加像 James_D 建议的 ListViews。
谢谢！我已经有了手风琴，有了你的建议，我想我会得到的。此外，关于来源的提醒是个好主意。
具体可以看here（populateLibraryPanel()方法）——列表单元格定义here...

标签： java user-interface javafx

【解决方案1】：

这是一个使用 ControlsFx Awesome Fonts 的草稿。

主要：

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>

控制器：

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);
    }    

}

列表视图单元格：

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);
        }       
    }
}

自定义项：

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;
    }
}

【讨论】：