如何在颤动中将列表视图滚动到底部答案

【问题标题】：how can I scroll list view to the bottom in flutter如何在颤动中将列表视图滚动到底部
【发布时间】：2020-08-09 14:28:51
【问题描述】：

我有一个包含列表视图构建器的颤振应用程序（聊天页面）我需要将页面滚动到页面末尾到最后一条消息吗？

【问题讨论】：

这能回答你的问题吗？ Programmatically scrolling to the end of a ListView

标签： listview flutter dart scroll chat

【解决方案1】：

您需要创建一个 scrollController 并将其传递给 ListView 并运行如下代码：

class SampleList extends StatefulWidget {
  @override
  _SampleListState createState() => _SampleListState();
}

class _SampleListState extends State<SampleList> {
  ScrollController _scrollController;
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: _scrollController,
      itemBuilder: (_, index) => ListTile(
        title: Text(
          index.toString(),
        ),
      ),
    );
  }

  void scrollToBottom() {
    final bottomOffset = _scrollController.position.maxScrollExtent;
    _scrollController.animateTo(
      bottomOffset,
      duration: Duration(milliseconds: 1000),
      curve: Curves.easeInOut,
    );
  }

  @override
  void initState() {
    _scrollController = ScrollController();
    super.initState();
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}

【讨论】：

scrollToBottom()的调用在哪里
@Husamuldeen 这取决于你。每当您加载新消息或对您有意义的任何内容时，您都可以调用它。
我尝试在 initate 或 build 方法中调用它，但出现红屏
@Husamuldeen 您必须在布局小部件后调用该方法。
请为我解释一下，该怎么做

【解决方案2】：

将 reverse: true 设置为 ListView 小部件会将最新的元素置于底部。有了这个，您可以轻松实现聊天时间线。

ListView.builder(
  reverse: true,
  itemBuilder: (context, index) => _chatCell(),
)

【讨论】：

我不想反转它，我想向下滚动它，当我使用计时器 I initState 时，它工作之前的答案，我需要对每条新消息都这样做。
@Husamuldeen 你真的试过这个吗？它实际上就像一个魅力。

【解决方案3】：

在initState方法中初始化ScrollController类的对象。

记住：- 1) 调用 super.initState();在 initState 方法的顶部。 2) ListView 应该与滚动控制器的对象相连。

WidgetsBinding.instance.addPostFrameCallback((_) { scrollController.jumpTo(scrollController.position.maxScrollExtent); });

然后，在 build 方法的顶部添加上面的代码。它会自动滚动到消息列表视图的底部。

【讨论】：

【解决方案4】：

完美的方法是添加

reverse: true

到ListView.builder() 并更改您为数据提供列表视图的方式。像这样。

与其正常检索，不如将其反转并提供给列表视图构建器。

<List> _messages = [...];
_messages.reversed.toList();

【讨论】：

我说的是滚动而不是反转
这样，Flutter 会自动将您带到聊天的底部，并在列表视图中添加新消息时将您保持在底部。如果不起作用，请告诉我。