[英]JavaFx : How to put ImageView inside ListView
我一直在搜索關於JavaFx ListView的一些線程,但仍然很難找到一個簡單而簡單的解決方案,用於將JavaFx ImageView放入JavaFx ListView中。 我正在嘗試使用JavaFx框架創建一個聊天應用程序。 它應該看起來像那樣。這不是重復的,因為另一個線程對於像我這樣的初學者來說是模糊的。 帶有imageview的ListView
我試過這樣的事。 我提前感謝你們!
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Main extends Application {
ImageView imageView = new ImageView();
Image image = new Image(Main.class.getResourceAsStream("bell.jpg"));
ListView<String> list = new ListView<String>();
ObservableList<String> data = FXCollections.observableArrayList(
"chocolate", "salmon", "gold", "coral", "darkorchid",
"darkgoldenrod", "lightsalmon", "black", "rosybrown", "blue",
"blueviolet", "brown");
Image pic;
@Override
public void start(Stage stage) {
VBox box = new VBox();
Scene scene = new Scene(box, 200, 200);
stage.setScene(scene);
stage.setTitle("ListViewSample");
box.getChildren().addAll(list);
VBox.setVgrow(list, Priority.ALWAYS);
list.setItems(data);
list.setCellFactory(listView -> new ListCell<String>() {
public void updateItem(String friend, boolean empty) {
super.updateItem(friend, empty);
if (empty) {
setText(null);
setGraphic(null);
} else {
imageView.setImage(image);
setText(friend);
setGraphic(imageView);
}
}
});
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}`
每次要在ListView中設置圖像時,都不需要創建新的HBox。 您可以直接使用ListView的setCellFactory()
來實現相同的結果。
此示例只是JavaFX ListView中答案Image的擴展,包含一個可以嘗試和測試的Minimal,Complete和Verifiable示例 。 如果你想了解它是如何工作的,我建議你首先查看鏈接的問題。
更新 - 如何調整圖像大小
要調整圖像大小以適合您想要的大小,請使用ImageView的fitWidth()和fitHeight()方法。 還有其他方法,如setSmooth()和setPreserveRatio() ,它們也可以派上用場。
MCVE
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class ListViewWithImages extends Application {
private final Image IMAGE_RUBY = new Image("https://upload.wikimedia.org/wikipedia/commons/f/f1/Ruby_logo_64x64.png");
private final Image IMAGE_APPLE = new Image("http://findicons.com/files/icons/832/social_and_web/64/apple.png");
private final Image IMAGE_VISTA = new Image("http://antaki.ca/bloom/img/windows_64x64.png");
private final Image IMAGE_TWITTER = new Image("http://files.softicons.com/download/social-media-icons/fresh-social-media-icons-by-creative-nerds/png/64x64/twitter-bird.png");
private Image[] listOfImages = {IMAGE_RUBY, IMAGE_APPLE, IMAGE_VISTA, IMAGE_TWITTER};
@Override
public void start(Stage primaryStage) throws Exception {
ListView<String> listView = new ListView<String>();
ObservableList<String> items =FXCollections.observableArrayList (
"RUBY", "APPLE", "VISTA", "TWITTER");
listView.setItems(items);
listView.setCellFactory(param -> new ListCell<String>() {
private ImageView imageView = new ImageView();
@Override
public void updateItem(String name, boolean empty) {
super.updateItem(name, empty);
if (empty) {
setText(null);
setGraphic(null);
} else {
if(name.equals("RUBY"))
imageView.setImage(listOfImages[0]);
else if(name.equals("APPLE"))
imageView.setImage(listOfImages[1]);
else if(name.equals("VISTA"))
imageView.setImage(listOfImages[2]);
else if(name.equals("TWITTER"))
imageView.setImage(listOfImages[3]);
setText(name);
setGraphic(imageView);
}
}
});
VBox box = new VBox(listView);
box.setAlignment(Pos.CENTER);
Scene scene = new Scene(box, 200, 200);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
OUTPUT
除了我的評論,我將在這里展示一些代碼,這對我有用:
private void setListEntry(ListCell<Label> listCell, Label label) {
Image img = loadLableIcon(label);
GridPane row = new GridPane();
row.setHgap(15);
row.setVgap(15);
ColumnConstraints col1 = new ColumnConstraints();
col1.setPercentWidth(90);
ColumnConstraints col2 = new ColumnConstraints();
col2.setPercentWidth(10);
ImageView icon = new ImageView(img);
javafx.scene.control.Label name = new javafx.scene.control.Label(label.getName());
name.setMinWidth(120d);
javafx.scene.control.Label amount = new javafx.scene.control.Label("" + label.getSize());
HBox iconAndName = new HBox(10);
iconAndName.setAlignment(Pos.CENTER_LEFT);
iconAndName.getChildren().addAll(icon, name);
row.add(iconAndName, 0, 0);
row.add(amount, 1, 0);
row.getColumnConstraints().addAll(col1, col2);
listCell.setGraphic(row);
}
請注意:我不是JavaFX的專家,因此我不確定它是否是最佳實踐。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.