问题
你好,
我正在尝试编写一个应用程序,让 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();
}
}
我尝试向 itemProperty 添加一个监听器,但出现了一些奇怪的行为。首先,每当我添加一个条目时,监听器都会触发两次: 这导致动画播放两次。尽管在这种情况下几乎看不出来,但看起来可能有点尴尬。
此外,列表开始滚动后,有时会为可见条目重复动画:
老实说,如果某个项目再次可见,我不一定介意重复动画,但就目前而言,让哪些单元格动画化是非常不可靠的。
我知道细胞实际上是受控的,并且随着时间的推移会被重复使用。但是我很难找到一种可靠的方法来确定屏幕上是否出现非空单元格。
问题
- 为什么监听器触发两次?
- 在屏幕上观察细胞出现/消失的最佳方法是什么
- 有没有更好的方法向 ListView 添加动画?
完整代码
这可能会有帮助,所以这是我的 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 )
.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
调用之后进行了一些调试。
长话短说:每次单击 Add Book
按钮时,itemProperty()
中的变化不是两次,而是三次。要找出答案,请在监听器和 updateItem
方法上向控制台添加一些打印信息:
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
由于新单元格的创建,第一个更改按预期发生。但是一旦它被创建,接下来是调用索引为 -1 的 VirtualFlow.releaseCell()
,最后 所有 单元将用 重新构建
和 VirtualFlow.layoutChildren()
中的 addLeadingCells()addTrailingCells()
。
因此在设计上,这些调用是无法避免的,如果您想确保只调用一次动画,这意味着动画不应该在监听器中。
动画
我提出了一个解决方案,它意味着获取单元格并运行动画:
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
,私有(private) 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++;
});
请注意,由于我们正在使用查找,因此应在显示阶段后添加按钮的事件处理程序。
编辑
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);
}
}
关于java - 在 Javafx 中为新的 ListView 条目设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27130679/