Question

我的JavaFX应用程序中有自定义ListCells的ListView。我通过setGraphic方法设置了根窗格，一个GridPane。现在我想通过CSS设置GridPane的内容样式。假设这个GridPane有类my-gridpane。

.list-cell:selected > .my-gridpane{
  /* CSS sytles */
}

不幸的是，这不起作用。我认为这是因为我没有将单元格的内容添加到其子代中，因此直接子选择器不起作用。现在问我的问题：是否可以通过CSS设置列表单元格的自定义内容的样式？

提前致谢

Answer 1

确定。这是一个具有相同问题的应用程序。

package listviewstyle;

import java.io.File;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Callback;

public class App extends Application {

private ListView<String> list;

@Override
public void start(Stage stage) throws Exception {
    File f=new File("src/listviewstyle/style.css");
    VBox root = new VBox();
    root.setFillWidth(true);
    list = new ListView<>();
    initListView();
    root.getChildren().add(list);
    root.getStylesheets().add(f.toURI().toURL().toString());
    stage.setScene(new Scene(root, 500, 200));
    stage.show();
}

private void initListView() {
    list.setCellFactory(new Callback<ListView<String>, ListCell<String>>() {
        @Override
        public ListCell<String> call(ListView<String> param) {
            return new CellLayout();
        }
    });
    list.getItems().add("string1");
    list.getItems().add("string2");
    list.getItems().add("string3");
    list.getItems().add("string4");
}

private static class CellLayout extends ListCell<String> {
    @Override
    protected void updateItem(String arg, boolean arg1) {
        if (arg != null) {
            Label l1 = new Label(arg);
            GridPane pane = new GridPane();
            pane.add(l1, 0, 0);
            pane.getStyleClass().add("cell-root");
            this.setGraphic(pane);
        } else {
            setGraphic(null);
        }
    }
}

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

这是我的css文件style.css。

.list-cell:selected > .cell-root{
    -fx-background-color: blue;
}

.list-cell:selected{
    -fx-border-width:10px;
    -fx-border-color:pink;
}

.cell-root{
    -fx-background-color: red;
}

感谢您的帮助。好的解决了这个问题。我需要调用超类的updateItem方法。

JavaFX：自定义ListView单元的样式内容

1 个答案: