有新数据时使FirebaseAnimatedList自动滚动

rekjcdws  于 2023-01-14  发布在  其他
关注(0)|答案(3)|浏览(98)

我尝试在Flutter上构建聊天示例,但遇到了问题,如何在填充新数据时使FirebaseAnimatedFlutter自动滚动?
例如:当我为我的朋友提交新的聊天消息时,我可以从我的Angular 调用这个方法来自动滚动:

Timer(Duration(milliseconds: 100), () {
    scrollController.animateTo(
        scrollController.position.maxScrollExtent,
        duration: const Duration(milliseconds: 100),
        curve: Curves.easeOut);
  });

但是在我的朋友那里,他仍然需要手动滚动到最后才能看到新消息
那么,当我们接收到新数据时,有什么方法可以检测并自动滚动到FirebaseAnimatedList的结尾吗?
谢谢

qvsjd97n

qvsjd97n1#

我看不到所有的代码,但是有一个技巧可以避免添加额外的代码,它包括反转消息列表中的数据,并将ListViewreverse属性设置为true,这将使消息随着新消息的到来而上移。
反转原始列表,将ListViewreverse属性设置为true,当向List添加消息时,使用messages.insert(0, newMessage)将其添加到顶部(由于反转,现在是底部),而不是messages.add

class Issue65846722 extends StatefulWidget {
  @override
  _Issue65846722State createState() => _Issue65846722State();
}

class _Issue65846722State extends State<Issue65846722> {
  List<String> messages = [
    'message 1',
    'message 2',
    'message 3',
  ].reversed.toList();
  TextEditingController textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('StackOverflow'),
      ),
      floatingActionButton: Align(
        alignment: Alignment.topRight,
        child: Padding(
          padding: const EdgeInsets.only(top: 100.0),
          child: FloatingActionButton(
            // To simulate an incoming message from another source that is not
            // the local TextField
            child: Icon(Icons.message),
            onPressed: () => newMessage('new message'),
          ),
        ),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              reverse: true,
              itemCount: messages.length,
              itemBuilder: (context, index){
                return Container(
                  child: Text(messages[index]),
                );
              },
            ),
          ),
          Divider(color: Colors.black,),
          TextFormField(
            controller: textEditingController,
            onFieldSubmitted: (_) => submitMessage()
          ),
        ],
      ),
    );
  }

  void submitMessage(){
    newMessage(textEditingController.text);
    textEditingController.clear();
  }

  void newMessage(String newMessage){
    setState(() {
      messages.insert(0, newMessage);
    });
  }
}
cld4siwp

cld4siwp2#

感谢João Soares有用回答,我已经通过2步解决了这个问题
1.通过使用FirebaseAnimatedList的“排序”属性从Firebase反转数据
1.在FirebaseAnimatedList中将“reverse”属性设置为“true”并像一个魅力一样工作

FirebaseAnimatedList(
query: loadChatContent(context, app),
sort: (DataSnapshot a,DataSnapshot b) => b.key.compareTo(a.key), //fixed
reverse: true, //fixed
qyswt5oh

qyswt5oh3#

只要用灵活的小部件 Package 你的FirebaseAnimatedList就行了,这对我很有效。

相关问题