Flutter - 如何将ListView滚动到底部？

12 浏览
0 Comments

Flutter - 如何将ListView滚动到底部？

我使用以下代码来滚动：\nWidgetsBinding.instance?.addPostFrameCallback((_) => _scrollToEnd());\n\n`_scrollToEnd()` 方法如下：\n_scrollController.animateTo(\n _scrollController.position.maxScrollExtent,\n duration: const Duration(\n milliseconds: 200,\n ),\n curve: Curves.easeInOut,\n);\n\n想象一下这是一个普通的聊天界面。如果消息只有一行，它会滚动到底部。但是一旦消息超过两行，它就无法完全滚动到底部。消息行数越多，滚动到底部的距离就越小。\n当我进入聊天时，它看起来像这样：\n\n但是如果我继续向下滚动，这是聊天的底部：\n\n我注意到还有一种情况：\n

    \n

  1. 我进入聊天界面。

    2. \n

  2. 它像第一张图片那样滚动到底部。

    3. \n

  3. 如果我在屏幕上的任何位置点击，它会继续滚动到列表视图的底部，就像第二张图片那样。

    4. \n

\n为什么会发生这种情况，我该如何修复？

0

3 答案

0 Comments

问题出现的原因：无法将ListView滚动到底部。

解决方法：

1. 在ListView builder中添加reverse: true，使ListView反向显示。

2. 在返回消息时，使用return messages[messages.length - 1 - index];，将消息按照相反的顺序返回，确保最新的消息在底部显示。

0
0 Comments

问题的原因是希望能够将ListView滚动到底部，但是使用默认的clamping physics时无法实现"drag beyond bottom"的效果。解决方法是使用_scrollController.animateTo()方法，并将maxScrollExtent的值增加一个额外的数值。这样可以实现滚动到底部的效果，但在iOS上无法实现"drag beyond bottom"的效果。为了解决这个问题，可以将physics属性改为bouncephysics或者normal scrollphysics，但这样会出现一个额外的反弹效果。为了解决这个问题，可以尝试添加一个近似值。例如，如果最后一条消息有4行，可以添加一个值为120（30x4）。这样就可以使用任何自己选择的物理效果，而不会出现反弹效果。

0
0 Comments

问题：在Flutter中，如何滚动到ListView的底部？

原因：在ListView中使用reverse属性为true时，会使得列表倒序显示，而children属性中使用reversed方法将map列表倒序排列，导致无法直接滚动到列表的底部。

解决方法：可以通过以下步骤来解决这个问题：

1. 将ListView的reverse属性设置为false，以保持列表的正序显示。

2. 在children属性中，直接使用map方法遍历列表，而不使用reversed方法。

3. 为了实现初始状态滚动到底部，可以在ListView的controller属性中使用ScrollController，并将其initialScrollOffset属性设置为一个足够大的值，以确保滚动到底部。

下面是修改后的代码示例：

ScrollController _scrollController = ScrollController(initialScrollOffset: 99999.0);

ListView(

controller: _scrollController,

reverse: false,

children: controller.listMessageData

.map((e) => Container(child: Text(e.title)))

.toList(),

);

通过以上步骤，我们可以实现在Flutter中滚动到ListView的底部。

0