JavaFX - 带有图像按钮的 ListView 项 [英] JavaFX - ListView Item with an Image Button

问题描述

我想知道是否可以在每个 ListView 项目之后添加一个图像按钮.例如:

I'd like to know if there's possible to add an Image Button after every ListView Item. For example:

那些红色方块应该有一个按钮的地方.如果可能，我该如何处理项目按钮的点击事件?

where those red squares should have a button instead. If it's possible, how can I handle item's button's click event?

如果有其他控件可以做到这一点，请告诉我.我正在测试 TableView.

if there's another control that can do it, please let me know. I'm testing TableView.

提前致谢！

推荐答案

我最近正在测试这个.我的解决方案:

I was testing this recently. My solution:

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
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.Pane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.util.Callback;

public class SO extends Application {
    static class XCell extends ListCell<String> {
        HBox hbox = new HBox();
        Label label = new Label("(empty)");
        Pane pane = new Pane();
        Button button = new Button("(>)");
        String lastItem;

        public XCell() {
            super();
            hbox.getChildren().addAll(label, pane, button);
            HBox.setHgrow(pane, Priority.ALWAYS);
            button.setOnAction(new EventHandler<ActionEvent>() {
                @Override
                public void handle(ActionEvent event) {
                    System.out.println(lastItem + " : " + event);
                }
            });
        }

        @Override
        protected void updateItem(String item, boolean empty) {
            super.updateItem(item, empty);
            setText(null);  // No text in label of super class
            if (empty) {
                lastItem = null;
                setGraphic(null);
            } else {
                lastItem = item;
                label.setText(item!=null ? item : "<null>");
                setGraphic(hbox);
            }
        }
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        StackPane pane = new StackPane();
        Scene scene = new Scene(pane, 300, 150);
        primaryStage.setScene(scene);
        ObservableList<String> list = FXCollections.observableArrayList(
                "Item 1", "Item 2", "Item 3", "Item 4");
        ListView<String> lv = new ListView<>(list);
        lv.setCellFactory(new Callback<ListView<String>, ListCell<String>>() {
            @Override
            public ListCell<String> call(ListView<String> param) {
                return new XCell();
            }
        });
        pane.getChildren().add(lv);
        primaryStage.show();
    }

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

单元格看起来像这样:

相关部分是XCell.updateItem 方法和setGraphic 调用.使用 setGraphic() 通常应该为标签设置一个图标，但它同样适用于设置复杂的节点 - 在本例中为带有标签和按钮的 HBox.

The relevant part is the XCell.updateItem method and the setGraphic call. With setGraphic() usually an icon shall be set for a label, but it works equally well to set a complex Node - in this case the HBox with label and button.

您需要确保 Button 的事件处理程序引用列表中的正确项目.在下面的第一个链接中，提到当前选择的项目现在可能就足够了.所以在处理按钮的事件时，获取列表中当前选中的索引.

You need to make sure, that the Button's event handler refers to the correct item in the list. In the first link below, it is mentioned, that the currently selected item might be sufficient for now. So fetch the currently selected index in the list when handling the button's event.

你可能想看看这些:

• http://fxexperience.com/2012/05/listview-custom-cell-factories-and-context-menus/
• http://docs.oracle.com/javafx/2/ui_controls/list-view.htm

这篇关于JavaFX - 带有图像按钮的 ListView 项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！