Flutter Scrollcontroller maxScrollExtent 不会一直到列表末尾

Question

它在列表中的最后一个元素之前停止。有没有办法走到最后一个元素的末尾容器

        controller
          ..animateTo(
            controller.position.maxScrollExtent,
            curve: Curves.easeIn,
            duration: const Duration(milliseconds: 300),
          );
      });```

Answer 1

不使用动画解决了问题

Timer(Duration(milliseconds: 500), () {
        controller.jumpTo(controller.position.maxScrollExtent);
      });

Answer 2

在我的例子中，问题是元素的大小不相等，并且在渲染之前不知道大小。因此，

ListView

滚动到其初始估计的

maxScrollExtent

但在滚动时元素被渲染并且新的

maxScrollExtent

更大。我最初通过给它一个更大的价值来破解它：

attachmentsScrollController.animateTo(
  attachmentsScrollController.position.maxScrollExtent * 2,
  duration: Duration(milliseconds: 300),
  curve: Curves.easeInOut);

Answer 3

我认为这是最好的功能滚动到底部有一个好的动画

scrollToBottom() {
if (_chatController.hasClients) {
      Future.delayed(const Duration(milliseconds: 500)).then((value) {
        _chatController.animateTo(
          _chatController.position.maxScrollExtent,
          duration: const Duration(milliseconds: 200),
          curve: Curves.fastOutSlowIn,
        );
      });
    }
}

Answer 4

我在使用 CustomeScrollView 小部件时遇到了同样的问题，我用这个解决了。

CustomScrollView(
                  controller: Get.find<ChatController>(tag: 'chatDetail')
                      .scrollController
                      .value,
                  reverse: true,
                  keyboardDismissBehavior:
                      ScrollViewKeyboardDismissBehavior.onDrag,
                  physics: ClampingScrollPhysics(),
                  cacheExtent: 99999, // <-- here !!! ADD THIS CODE
                  slivers: [
                    ChatList(
                      isQuestion: isQuestion,
                      postCreatedAt: postCreatedAt,
                      title: title,
                    ),
                  ],
                ),

我的滚动功能是正常的，正如我们之前所说的。

 void chatScrollUp() async {
await scrollController.value.animateTo(
    scrollController.value.position.maxScrollExtent,
    duration: Duration(
        milliseconds:
            (scrollController.value.position.maxScrollExtent / 2).round()),
    curve: Curves.easeOutCirc);}

Answer 5

对我有用的是：

 void scrollAnimateToEnd(ScrollController controller) {
Future.delayed(const Duration(milliseconds: 400)).then((_) {
  try {
    controller
        .animateTo(
      controller.position.maxScrollExtent,
      duration: const Duration(seconds: 1),
      curve: Curves.fastOutSlowIn,
    )
        .then((value) {
      controller.animateTo(
        controller.position.maxScrollExtent,
        duration: const Duration(milliseconds: 200),
        curve: Curves.easeInOut,
      );
    });
  } catch (e) {
    print('error on scroll $e');
  }
});

}

Answer 6

似乎添加 appBar 和底部工具栏高度解决了这个问题：

void _scrollToBottom() {
if (_scrollController.hasClients) {

  // THIS:
  double bottomPosition = _scrollController.position.maxScrollExtent + kToolbarHeight + kBottomNavigationBarHeight;

  _scrollController.animateTo(
    bottomPosition,
    duration: const Duration(
      milliseconds: 300
    ),
    curve: Curves.easeOut
  );
} else {
  Timer(const Duration(milliseconds: 400), () => _scrollToBottom());
}

}