Hi,
我正在尝试编写一个应用程序，其中 ListView 中的每个新条目都会动画化。这是我的代码：
public class BookCell extends ListCell<Book>
{
private Text text;
private HBox h;
public BookCell()
{
this.text = new Text();
this.h = new HBox();
this.h.getChildren().add(text);
super.getStyleClass().add("book-list-cell");
super.itemProperty().addListener((obs,oldv,newv)->{
if(newv != null )
{
if(getIndex() == this.getListView().getItems().size()-1 )
{
//why does this get called twice for each update?
System.out.println("isbn = "+newv.getIsbn().get() + " lastIndexOf=" + this.getListView().getItems().lastIndexOf(newv)+" Index="+getIndex()+" size="+this.getListView().getItems().size());
runAnimation();
}
}
});
this.getChildren().add(h);
}
@Override
protected void updateItem(Book item, boolean empty)
{
super.updateItem(item, empty);
if(!empty)
super.setGraphic(h);
text.setText(item == null ? "" : item.getIsbn().get());
}
public void runAnimation()
{
FadeTransition f = new FadeTransition();
f.setFromValue(0);
f.setToValue(1);
f.setNode(this);
f.play();
}
}
I've tried to add a listener to the itemProperty, but I get some strange behavior. Firstly, the listener fires twice each time I add an entry:
which results in the animation playing twice. This can be a little awkward to watch even though it is hardly noticeable in this case.
Furthermore, after the list starts scrolling, the animation is sometimes repeated for a visible entry:
说实话，如果某个项目我不一定介意动画重复再次可见，但就目前情况而言，哪些单元格被动画化是非常不可靠的。
我知道这些细胞实际上是受控制的，并且随着时间的推移会被重复使用。但我很难找到一种可靠的方法来确定屏幕上是否出现非空单元格。
这可能会有所帮助，所以这是我的 css 和主文件。
主程序.java
public class Main extends Application
{
static int newBookIndex = 1;
public static final ObservableList<Book> data = FXCollections.observableArrayList();
@Override
public void start(Stage primaryStage)
{
try
{
GridPane myPane = (GridPane)FXMLLoader.load(getClass().getResource("quotes.fxml"));
ListView<Book> lv = (ListView<Book>) myPane.getChildren().get(0);
Button addButton = (Button) myPane.getChildren().get(1);
addButton.setText("Add Book");
addButton.setOnAction((event)->{
data.add(new Book(String.valueOf(newBookIndex++),"test"));
});
lv.setEditable(true);
data.addAll(
new Book("123","Hugo"),
new Book("456","Harry Potter")
);
lv.setItems(data);
lv.setCellFactory((param)->return new BookCell());
Scene myScene = new Scene(myPane);
myScene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
primaryStage.setScene(myScene);
primaryStage.show();
}
catch(Exception e)
{
e.printStackTrace();
}
}
public static void main(String[] args)
{
launch(args);
}
}
application.css（基于https://github.com/privatejava/javafx-listview-animation https://github.com/privatejava/javafx-listview-animation)
.book-list-cell:odd{
-fx-background-image: url('./wooden2.png') ,url('./gloss.png');
-fx-background-repeat: repeat,no-repeat;
}
.book-list-cell:empty {
-fx-background-image: url('./gloss.png');
-fx-background-repeat: repeat;
}
.book-list-cell {
-fx-font-size:45px;
-fx-font-family: 'Segoe Script';
}
.book-list-cell:selected,.book-list-cell:selected:hover{
-fx-border-color:linear-gradient(to bottom,transparent,rgb(22,22,22,1));
-fx-border-width:2 2 2 10px;
-fx-effect:innershadow( three-pass-box,#764b0c,30,0.3,0,0);
}
.book-list-cell:hover{
-fx-border-color:rgb(255,255,255,0.7);
-fx-border-width:1 1 1 10px;
}
.book-list-cell{
-fx-background-image: url('./wooden.png') ,url('./gloss.png');
-fx-background-repeat: repeat,no-repeat;
-fx-background-position:left top;
-fx-background-size: auto,100% 40%;
}
为了找到监听器双重触发的原因，我做了一些调试，遵循layoutChildren calls.
长话短说：每次点击Add Book按钮，不是两个，而是三个变化itemProperty()。要找到答案，请在侦听器和控制台上添加一些打印updateItem method:
itemProperty().addListener((obs,oldv,newv)->{
System.out.println("change: "+getIndex()+", newv "+(newv != null?newv.getIsbn():"null")+", oldv: "+(oldv != null?oldv.getIsbn():"null"));
}
protected void updateItem(Book item, boolean empty){
super.updateItem(item, empty);
System.out.println("update item: "+(item!=null?item.getIsbn():"null"));
}
对于第一本书“123”，这是跟踪：
update item: null
change: 0, newv 123, oldv: null
update item: 123
change: -1, newv null, oldv: 123
update item: null
update item: null
change: 0, newv 123, oldv: null
update item: 123
由于新单元的创建，第一个更改按预期发生。但一旦创建，就会调用VirtualFlow.releaseCell()索引为-1，最后all细胞被重新重建addLeadingCells() and addTrailingCells() in VirtualFlow.layoutChildren().
因此，根据设计，这些调用是无法避免的，这意味着如果您想确保只调用一次动画，则动画不应该位于侦听器中。
动画片
我提出了一个解决方案，意味着获取单元格并运行动画：
addButton.setOnAction((event)->{
data.add(new Book(String.valueOf(newBookIndex++),"test"));
VirtualFlow vf=(VirtualFlow)lv.lookup(".virtual-flow");
BookCell cell = (BookCell)vf.getCell(lv.getItems().size()-1);
cell.runAnimation();
});
这不是非常可取，因为使用VirtualFlow，私有API。
通过查找 CSS 选择器可以避免这种情况indexed-cells反而：
addButton.setOnAction((event)->{
data.add(new Book(String.valueOf(newBookIndex),"test"));
lv.lookupAll(".indexed-cell").stream()
.map(n->(BookCell)n)
.filter(c->c.getBook().getIsbn().equals(String.valueOf(newBookIndex)))
.findFirst().ifPresent(BookCell::runAnimation);
newBookIndex++;
});
请注意，由于我们使用查找，因此应在显示舞台后添加按钮的事件处理程序。
EDIT
OP 报告了滚动方面的奇怪问题。我不确定这是否是一个错误，但顶部的单元格是动画的，而不是底部的。
为了解决这个问题，我提出了这个解决方法，删除BookCell动画，并为单元格创建一个动画，使用VirtualFlow获取单元格并在必要时滚动。
首先，我们尝试查找滚动条是否不可见：我们使用淡入淡出过渡。但如果我们有滚动条，现在我们需要调用show()滚动到最后一个单元格。一个短PauseTransition在启动淡入淡出过渡之前完成这个技巧。
addButton.setOnAction((event)->{
addButton.setDisable(true);
data.add(new Book(String.valueOf(newBookIndex),"test"));
VirtualFlow vf=(VirtualFlow)lv.lookup(".virtual-flow");
if(!lv.lookup(".scroll-bar").isVisible()){
FadeTransition f = new FadeTransition();
f.setDuration(Duration.seconds(1));
f.setFromValue(0);
f.setToValue(1);
f.setNode(vf.getCell(lv.getItems().size()-1));
f.setOnFinished(t->{
newBookIndex++;
addButton.setDisable(false);
});
f.play();
} else {
PauseTransition p = new PauseTransition(Duration.millis(20));
p.setOnFinished(e->{
vf.getCell(lv.getItems().size()-1).setOpacity(0);
vf.show(lv.getItems().size()-1);
FadeTransition f = new FadeTransition();
f.setDuration(Duration.seconds(1));
f.setFromValue(0);
f.setToValue(1);
f.setNode(vf.getCell(lv.getItems().size()-1));
f.setOnFinished(t->{
newBookIndex++;
addButton.setDisable(false);
});
f.play();
});
p.play();
}
});
更新的代码
最后，这是我使用过的所有代码：
public class Main extends Application {
private int newBookIndex = 2;
public final ObservableList<Book> data = FXCollections.observableArrayList(
new Book("123","Hugo"), new Book("456","Harry Potter"));
private final ListView<Book> lv = new ListView<>();
@Override
public void start(Stage primaryStage) {
Button addButton = new Button("Add Book");
lv.setCellFactory(param->new BookCell());
lv.setItems(data);
Scene myScene = new Scene(new VBox(10,lv,addButton), 200, 200);
myScene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
primaryStage.setScene(myScene);
primaryStage.show();
addButton.setOnAction((event)->{
addButton.setDisable(true);
data.add(new Book(String.valueOf(newBookIndex),"test"));
VirtualFlow vf=(VirtualFlow)lv.lookup(".virtual-flow");
if(!lv.lookup(".scroll-bar").isVisible()){
FadeTransition f = new FadeTransition();
f.setDuration(Duration.seconds(1));
f.setFromValue(0);
f.setToValue(1);
f.setNode(vf.getCell(lv.getItems().size()-1));
f.setOnFinished(t->{
newBookIndex++;
addButton.setDisable(false);
});
f.play();
} else {
PauseTransition p = new PauseTransition(Duration.millis(20));
p.setOnFinished(e->{
vf.getCell(lv.getItems().size()-1).setOpacity(0);
vf.show(lv.getItems().size()-1);
FadeTransition f = new FadeTransition();
f.setDuration(Duration.seconds(1));
f.setFromValue(0);
f.setToValue(1);
f.setNode(vf.getCell(lv.getItems().size()-1));
f.setOnFinished(t->{
newBookIndex++;
addButton.setDisable(false);
});
f.play();
});
p.play();
}
});
}
class BookCell extends ListCell<Book>{
private final Text text = new Text();
private final HBox h = new HBox(text);
{
getStyleClass().add("book-list-cell");
}
@Override
protected void updateItem(Book item, boolean empty){
super.updateItem(item, empty);
if(item!=null && !empty){
text.setText(item.getIsbn());
setGraphic(h);
} else {
setGraphic(null);
setText(null);
}
}
}
class Book {
private Book(String isbn, String name) {
this.isbn.set(isbn);
this.name.set(name);
}
private final StringProperty name = new SimpleStringProperty();
public String getName() {
return name.get();
}
public void setName(String value) {
name.set(value);
}
public StringProperty nameProperty() {
return name;
}
private final StringProperty isbn = new SimpleStringProperty();
public String getIsbn() {
return isbn.get();
}
public void setIsbn(String value) {
isbn.set(value);
}
public StringProperty isbnProperty() {
return isbn;
}
}
public static void main(String[] args) {
launch(args);
}
}