ListView中的选定项目隐藏JavaFX

I have a ListView and I add BorderPane elements with some content.

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

---

When I select one item, it hides.

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

How can I fix this?

我怎样才能解决这个问题?

The white item is the selected item. Is hidden.

白色项目是所选项目。被隐藏了。

I have no CSS for nothing in the listView

我在listView中没有任何CSS

UPDATE:

BorderPane content

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

Adding the borderPane

添加borderPane

    UserBox userBox = new UserBox();

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

    listUsersBox.setItems(items);

I only have this css in the borderPane

我在borderPane中只有这个css

.userBox {

    -fx-background-color: green;

}

1 个解决方案

#1

Well, so when working with a ListView you shall not place graphical elements directly into the ListView, rather you shall use setCellFactory to tell the ListView how to display elements.

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

Customizing ListView Visuals

自定义ListView Visuals

The visuals of the ListView can be entirely customized by replacing the default cell factory. A cell factory is used to generate ListCell instances, which are used to represent an item in the ListView. See the Cell class documentation for a more complete description of how to write custom Cells.

可以通过替换默认单元工厂来完全自定义ListView的视觉效果。单元工厂用于生成ListCell实例,用于表示ListView中的项。有关如何编写自定义单元格的更完整说明,请参阅Cell类文档。

As data source you shall have a data model, that fills the graphical representation with some real information.

作为数据源,您应该拥有一个数据模型,用一些真实信息填充图形表示。

In the following example I have created a User class, which is the model for one single element in the list view (the listview displays users). Then I have used the mentioned method to create a GUI layout for each user (note that you don't even need the BorderPane as you have filled only the center).

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

Example

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

This code produces the following:

此代码生成以下内容:

I would highly recommend to inform yourself about how to work with JavaFX controls that has a data model like ListView, TableView.

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

Good place to start learning: Using JavaFX UI Controls: ListVew

开始学习的好地方:使用JavaFX UI控件:ListVew