ListView 中的选定项目隐藏 JavaFX

Question

我有一个 ListView，并添加了带有一些内容的 BorderPane 元素。

---

当我选择一个项目时，它会隐藏。

我该如何解决这个问题？

The white item is the selected item. Is hidden.

我在 listView 中没有任何 CSS

更新：

BorderPane 内容

public BorderPane getUserBox()
{
    BorderPane borderPane = new BorderPane();

    HBox mainPane = new HBox();


    mainPane.prefWidthProperty().bind(borderPane.prefWidthProperty());
    mainPane.minWidthProperty().bind(borderPane.minWidthProperty());
    mainPane.maxWidthProperty().bind(borderPane.maxWidthProperty());

    ImageView image = new ImageView(Images.CLOSE_ICON);

    Label nick = new Label("  Name");
    Label text = new Label("  Text ");

    VBox vBox = new VBox();
    vBox.getChildren().addAll(nick, text);

    Label time = new Label("   4.06.2016");

    mainPane.getChildren().addAll(image, vBox, time);

    borderPane.getStyleClass().add("userBox");

    borderPane.setCenter(mainPane);

    return borderPane;
}

添加边框

    UserBox userBox = new UserBox();

    ObservableList<BorderPane> items =FXCollections.observableArrayList (
    userBox.getUserBox(), userBox.getUserBox(), userBox.getUserBox(),    userBox.getUserBox());

    listUsersBox.setItems(items);

我在borderPane中只有这个css

.userBox {

    -fx-background-color: green;

}

Answer 1

好吧，所以在使用ListView 时，您不应将图形元素直接放入ListView，而应使用setCellFactory 告诉ListView 如何显示元素。

自定义 ListView 视觉效果

ListView 的视觉效果可以通过替换来完全自定义 默认单元工厂。单元工厂用于生成 ListCell 实例，用于表示 ListView 中的项目。看 Cell 类文档更完整地描述了如何 编写自定义单元格。

作为数据源，你应该有一个数据模型，它用一些真实的信息填充图形表示。

在以下示例中，我创建了一个User 类，它是列表视图中单个元素的模型（列表视图显示用户）。然后我使用上述方法为每个用户创建了一个 GUI 布局（请注意，您甚至不需要 BorderPane，因为您只填充了中心）。

示例

User.java

public class User {

    private StringProperty nick = new SimpleStringProperty();
    private StringProperty text = new SimpleStringProperty();
    private ObjectProperty<Date> time = new SimpleObjectProperty<Date>();

    public StringProperty nickProperty(){ return nick;}
    public StringProperty textProperty(){ return text;}
    public ObjectProperty<Date> timeProperty(){ return time;}

    public User(String nick, String text, Date time){

        this.nick.set(nick);
        this.text.set(text);
        this.time.set(time);
    }
}

Main.java

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            BorderPane root = new BorderPane();
            Scene scene = new Scene(root,400,400);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());


            ListView<User> listView = new ListView<User>();

            SimpleDateFormat sdf = new SimpleDateFormat("dd/MM/yyyy");

            ObservableList<User> users = FXCollections.observableArrayList();
            users.addAll(new User("Bruce", "Is strong", sdf.parse("24/12/1975")),
                    new User("Claire", "Is clever", sdf.parse("02/01/1986")), 
                    new User("Bale", "Is funny", sdf.parse("03/01/1989")));

            listView.setCellFactory(new Callback<ListView<User>, ListCell<User>>() {

                @Override
                public ListCell<User> call(ListView<User> param) {
                    return new ListCell<User>(){

                        @Override
                        protected void updateItem(User item, boolean empty) {

                            super.updateItem(item, empty);
                            if(item != null){

                                HBox mainPane = new HBox();
                                ImageView image = new ImageView(new Image(getClass().getResource("close_icon.png").toExternalForm(),
                                        20, 20, true, true));

                                Label nick = new Label(item.nickProperty().get());
                                Label text = new Label(item.textProperty().get());

                                VBox vBox = new VBox();
                                vBox.getChildren().addAll(nick, text);

                                SimpleDateFormat dateFormat = new SimpleDateFormat("dd/MM/yyyy");

                                Label time = new Label(dateFormat.format(item.timeProperty().get()));

                                mainPane.getChildren().addAll(image, vBox, time);

                                setGraphic(mainPane);

                            }
                        }

                    };
                }
            });

            listView.setItems(users);

            root.setCenter(listView);


            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

此代码产生以下内容：

我强烈建议自己了解如何使用具有 ListView、TableView 等数据模型的 JavaFX 控件。

开始学习的好地方：Using JavaFX UI Controls: ListVew