带有XML文件的javaFX的列表视图中有两个按钮 [英] Having two button in a list view in javaFX with XML file

问题描述

我正在尝试使用javaFX创建类似Facebook的应用程序，并且我希望有一个页面可以在列表视图中显示好友，并带有确认和删除好友请求选项.我当时想使用列表视图，但是我不知道如何在每个单元格上添加按钮. 因此，可以在JavaFX
的列表视图中添加两个好友请求按钮或将其删除 像facebook朋友列表 在此处输入图片描述

I'm trying to make an application like Facebook with javaFX, and I want to have a page to show friends in a list view with option confirm and remove friends request. I was thinking to use list view but I don't know how to add buttons on each cell. So, is it possible to add two buttons of friends request or remove in a list view in JavaFX
like facebook friends list enter image description here

如果还有其他执行相同操作的控件视图，请告诉我.

If there are other control views that It does the same thing please let me know.

推荐答案

我认为很简单的一种可能方法是为ListView提供自己的CellFactory.这样，您就可以为每个单元构建整个布局.

One possible way, that I think is pretty simple, is to just provide your own CellFactory for the ListView. This allows you to build an entire layout for each cell.

以下示例应用程序将演示该过程:

The following sample application will demonstrate the process:

import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.layout.Region;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Callback;

public class ListViewButtonsSample extends Application {

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

    @Override
    public void start(Stage primaryStage) {

        // Simple interface
        VBox root = new VBox(5);
        root.setPadding(new Insets(10));
        root.setAlignment(Pos.CENTER);

        // Create some sample Users
        ObservableList<User> usersList = FXCollections.observableArrayList();
        usersList.addAll(
                new User("Amir"),
                new User("Jasmine"),
                new User("Leonardo")
        );

        // Create the ListView
        ListView<User> listView = new ListView<>();

        // We need to create a new CellFactory so we can display our layout for each individual user
        listView.setCellFactory((Callback<ListView<User>, ListCell<User>>) param -> {
            return new ListCell<User>() {
                @Override
                protected void updateItem(User user, boolean empty) {
                    super.updateItem(user, empty);

                    if (user == null || empty) {
                        setText(null);
                    } else {
                        // Here we can build the layout we want for each ListCell. Let's use a HBox as our root.
                        HBox root = new HBox(10);
                        root.setAlignment(Pos.CENTER_LEFT);
                        root.setPadding(new Insets(5, 10, 5, 10));

                        // Within the root, we'll show the username on the left and our two buttons to the right
                        root.getChildren().add(new Label(user.getUsername()));

                        // I'll add another Region here to expand, pushing the buttons to the right
                        Region region = new Region();
                        HBox.setHgrow(region, Priority.ALWAYS);
                        root.getChildren().add(region);

                        // Now for our buttons
                        Button btnAddFriend = new Button("Add Friend");
                        btnAddFriend.setOnAction(event -> {
                            // Code to add friend
                            System.out.println("Added " + user.getUsername() + " as a friend!");
                        });
                        Button btnRemove = new Button("Remove");
                        btnRemove.setOnAction(event -> {
                            // Code to remove friend
                            System.out.println("Broke up with " + user.getUsername() + "!");
                        });
                        root.getChildren().addAll(btnAddFriend, btnRemove);

                        // Finally, set our cell to display the root HBox
                        setText(null);
                        setGraphic(root);
                    }

                }
            };

        });

        // Set our users to display in the ListView
        listView.setItems(usersList);

        root.getChildren().add(listView);

        // Show the Stage
        primaryStage.setWidth(500);
        primaryStage.setHeight(300);
        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }
}

class User {

    private final StringProperty username = new SimpleStringProperty();

    public User(String username) {
        this.username.set(username);
    }

    public String getUsername() {
        return username.get();
    }

    public StringProperty usernameProperty() {
        return username;
    }

    public void setUsername(String username) {
        this.username.set(username);
    }
}

---

结果:

注意:结果类似于Sedrick的解决方案，但不使用FXML.如果打算在应用程序的其他位置使用此ListCell实现，则需要为此特定的ListCell创建一个单独的类，以便可以重复使用.

Note: The result is similar to Sedrick's solution, but does not use FXML. If you intend to use this ListCell implementation elsewhere in your application, you would want to create a separate class for this particular ListCell so it can be reused.

这篇关于带有XML文件的javaFX的列表视图中有两个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！