javafx - 使用包含 GridPane 列表的 controlsfx GridView

Question

我正在学习 JavaFx 并构建一个示例应用程序，该应用程序将以可滚动的方式显示餐厅菜单项列表。我发现最好的方法是使用 controlsfx 中的 GridView 控件，因为即使有大量菜单项，滚动也会很快。这是我试图使其工作的示例代码:

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

            ObservableList<GridPane> list = FXCollections.<GridPane>observableArrayList();
            GridView<GridPane> gridView = new GridView<>(list);

            gridView.setCellFactory(new Callback<GridView<GridPane>, GridCell<GridPane>>() {
                 public GridCell<GridPane> call(GridView<GridPane> gridView) {
                     return new GridCell<GridPane>();
                 }
             });

            Label lblName1 = new Label("Name");
            GridPane grid = new GridPane();
            grid.addRow(0, lblName1);

            Label lblName2 = new Label("Price");
            grid.addRow(1, lblName2);

            list.add(grid);

            root.getChildren().add(gridView);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

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

当我运行上面的代码时，它只显示没有项目的 VBox。我试图复制 controlsfx 网站上关于使用 GridView ( http://controlsfx.bitbucket.org/org/controlsfx/control/GridView.html ) 的示例代码。

任何帮助/提示将不胜感激。谢谢。

Answer 1

找出问题所在，这是正确的代码。我需要编写自定义 GridPane(用于显示菜单项)和用于生成自定义对象的单元工厂。

//Main Class
package application;

import java.util.Random;

import org.controlsfx.control.GridCell;
import org.controlsfx.control.GridView;
import org.controlsfx.control.cell.ColorGridCell;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Orientation;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.util.Callback;


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

            GridView<MenuItem> menuItems = new GridView<>();

            for(int i = 0; i < 10000; i++) {
                menuItems.getItems().addAll(new MenuItem(i));
            }

            menuItems.setCellFactory(new MenuItemCellFactory());

            root.getChildren().add(menuItems);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

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

/**
 * Custom Menu Item
 */
package application;

import javafx.scene.control.Label;
import javafx.scene.layout.GridPane;

/**
 * @author Rahul
 *
 */
public class MenuItem extends GridPane {
    private Integer name = null;

    public MenuItem(int i) {
        // TODO Auto-generated constructor stub
        this.name = i;
    }

    public Integer getName() {
        return name;
    }

    public void setName(Integer name) {
        this.name = name;
    }
}


//Menu Item Cell Factory
package application;

import org.controlsfx.control.GridCell;
import org.controlsfx.control.GridView;

import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.layout.GridPane;
import javafx.util.Callback;

public class MenuItemCellFactory implements Callback<GridView<MenuItem>, GridCell<MenuItem>> {

    @Override
    public GridCell<MenuItem> call(GridView<MenuItem> listview) {
        return new MenuItemCell();
    }
}


//Menu Item Cell
package application;

import org.controlsfx.control.GridCell;

import javafx.scene.control.ListCell;
import javafx.scene.layout.GridPane;

public class MenuItemCell extends GridCell<MenuItem> {

    @Override
    protected void updateItem(MenuItem item, boolean empty) {
        // TODO Auto-generated method stub
        super.updateItem(item, empty);
        if (empty || item == null) {
            setText(null);
            setGraphic(null);
        } else {
            setText(item.getName().toString());
            setStyle("-fx-background-color: #ffffff; -fx-background-radius: 15; -fx-border-radius: 15; -fx-border-width: 0; -fx-padding: 10; -fx-pref-width: 145; -fx-max-width: 145; -fx-max-width: 145; -fx-pref-height: 130; -fx-max-height: 130; -fx-effect: dropshadow(three-pass-box, #93948d, 10, 0, 0, 0);");
        }
    }
}

这是使用 GridView 的示例代码，其中包含使用 cellfactory 的 GridPane 列表。请根据您的要求进行修改。基本保持不变。

非常欢迎提出建议和反馈。谢谢。