带有图像背景的列表视图

Question

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

控制器class:

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 后面显示背景图像，您必须移除每个 ListCell 的背景颜色。这是一个示例：

@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 class（例如 .my-cell）并使用 class 而不是 .list-cell 因为当前代码适用于每个 ListCell.

带有图像背景的列表视图

ListView with Image background

listview

javafx

scenebuilder