FirebaseAnimatedList itemBuilder 错误

Question

我目前正在学习 Flutter Firebase 代码实验室 here。

我已按照所有步骤操作，但在尝试使用 FirebaseAnimatedList 小部件的 itemBuilder 时遇到两个错误。

错误 1

与 sort: (a, b) => b.key.compareTo(a.key) 相关：

The function expression type '(dynamic, dynamic) → dynamic' isn't of type '(DataSnapshot, DataSnapshot) → int'. This means its parameter or return type does not match what is expected. Consider changing parameter type(s) or the returned type(s).

我需要将 (a,b) 转换为 DataSnapshot 吗？

错误 2

与FirebaseAnimatedList的itemBuilder有关。

The argument type '(BuildContext, DataSnapshot, Animation, int) → dynamic' can't be assigned to the parameter type '(BuildContext, DataSnapshot, Animation) → Widget'.

在这种情况下，似乎需要传入索引，而且 ChatMessage 返回的类型错误。我不确定如何解决这些问题。

下面是我的代码。

ChatScreenState class

的构建函数

 @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(
          title: Text('friendlychat'),
        ),
        body: Column(
          children: <Widget>[
            Flexible(
              child: FirebaseAnimatedList(
                query: reference,
                sort: (a, b) => b.key.compareTo(a.key),
                padding: EdgeInsets.all(8.0),
                reverse: true,
                itemBuilder: (BuildContext context, DataSnapshot snapshot,
                    Animation<double> animation, int index) {
                  return ChatMessage(snapshot: snapshot, animation: animation);
                },
              ),
            ),
            Divider(height: 1.0),
            Container(
              decoration: BoxDecoration(color: Theme.of(context).cardColor),
              child: _buildTextComposer(),
            )
          ],
        ));
  }

ChatMessage class

class ChatMessage extends StatelessWidget {
  ChatMessage({this.snapshot, this.animation});
  final DataSnapshot snapshot;
  final Animation animation;

  @override
  Widget build(BuildContext context) {
    return SizeTransition(
        sizeFactor: CurvedAnimation(parent: animation, curve: Curves.easeOut),
        axisAlignment: 0.0,
        child: Container(
          margin: EdgeInsets.symmetric(vertical: 10.0),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(right: 16.0),
                child: CircleAvatar(
                    backgroundImage:
                        NetworkImage(snapshot.value['senderPhotoUrl'])),
              ),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(snapshot.value['senderName'],
                        style: Theme.of(context).textTheme.subhead),
                    Container(
                      margin: EdgeInsets.only(top: 5.0),
                      child: Text(snapshot.value['text']),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ));
  }
}

FirebaseAnimatedList 的更新代码：

FirebaseAnimatedList(
                query: reference,
                sort: (DataSnapshot a, DataSnapshot b) =>
                    b.key.compareTo(a.key),
                padding: EdgeInsets.all(8.0),
                reverse: true,
                itemBuilder: (BuildContext context, DataSnapshot snapshot,
                    Animation<double> animation) {
                  return ChatMessage(snapshot: snapshot, animation: animation);
                },
              ),

Answer 1

这是因为 flutter beta 使用的是 Dart-2，默认情况下最大程度确保类型安全。

要解决错误 1： 变化

(a, b) => b.key.compareTo(a.key)

至

(Datasnapshot a, Datasnapshot b) => b.key.compareTo(a.key)

要解决错误 2： 变化

从 itemBuilder 函数中删除 int index

并且还在itemBuilder函数的return之后添加new关键字。

希望对您有所帮助！

Answer 2

itemBuilder 有一个名为 index 的额外参数。

typedef 小工具 FirebaseAnimatedListItemBuilder( BuildContext上下文， DataSnapshot快照， 动画动画， 整数索引， );

所以只需在 Animation 后添加“, _”即可解决问题。