具有图像背景的 ListView

Question

我在这个窗口中有一个 ListView，我将天空图像设置为效果（在 SceneBuilder 中）。 但现在我看不到我的清单。是否可以有图像背景和列表可供选择？

控制器类：

public class SampleController implements Initializable {
@FXML
ListView<String> listView;

@Override
public void initialize(URL location, ResourceBundle resources) {
    ObservableList<String> list;
    list = FXCollections.observableArrayList("Opcja 1", "Opcja 2");
    listView.setItems(list);
}

}

Answer 1

为了在ListView 后面显示背景图像，您必须移除每个ListCells 上的背景颜色。这是一个示例：

@Override
public void start(Stage primaryStage) {

    String image = "http://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast,_Dhaka,_Bangladesh.JPG";

    ObservableList<String> data = FXCollections.observableList(IntStream
            .range(1000, 2000).mapToObj(Integer::toString)
            .collect(Collectors.toList()));

    ListView<String> listView = new ListView<>(data);
    listView.setBackground(new Background(new BackgroundImage(new Image(
            image), BackgroundRepeat.NO_REPEAT, BackgroundRepeat.NO_REPEAT,
            BackgroundPosition.CENTER, BackgroundSize.DEFAULT)));

    BorderPane root = new BorderPane(listView);

    Scene scene = new Scene(root, 700, 400);
    scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
    primaryStage.setScene(scene);
    primaryStage.show();
}

以及必要的 CSS 代码：

.list-cell {
    -fx-background-color: null;
}

提示：在大多数情况下，您将向每个单元格添加自定义 CSS 类（例如 .my-cell）并使用该类而不是 .list-cell，因为当前代码将适用于每个 ListCell。