如何在打开聊天页面时直接显示底部的ListView（像大多数聊天应用一样）？

Question

我正在构建一个聊天页面，并希望它在打开时显示最新消息，类似于大多数聊天应用程序。目前，我尝试了两种方法。

方法1.像这样使用

addPostFrameCallback

 和

jumpTo

 ，但是这样会导致打开时屏幕闪烁。

WidgetsBinding.instance.addPostFrameCallback((\_) {

  provider.chatScrollController.jumpTo(

  provider.chatScrollController.position.maxScrollExtent);

});

方法2.使用`reverse: true`，但是当只有一两个时，这会在底部显示消息。

有没有更好的方法可以实现平滑滚动到最新消息而不闪烁？希望有任何意见或建议！

Answer 1

您可以使用

animateTo

中的

ScrollController

方法。在代码中将

jumpTo

更改为

animateTo

，然后在方法中添加

duration

和

curves

属性，如下所示：

// Make sure the widget is already rendered.
WidgetsBinding.instance.addPostFrameCallback((_) {
  // Move the scroll position to the bottom of the page with animation.
  provider.chatScrollController.animateTo(
    provider.chatScrollController.position.maxScrollExtent,
    // [duration] for setting the animation duration. 
    duration: const Duration(seconds: 2),
    // [curve] An parametric animation easing curve, i.e. a mapping of the unit 
    // interval to the unit interval.
    // (https://api.flutter.dev/flutter/animation/Curve-class.html)
    // 
    // In simple term is to manage how your animation run.
    curve: Curves.fastEaseInToSlowEaseOut,
  );
});

这将使您的滚动动画到页面底部。

参考 animateTo Flutter 文档