如何在 flutter 中将列表视图滚动到底部

Question

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

Answer 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();
  }
}

Answer 2

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

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

Answer 3

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

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

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

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

Answer 4

完美的方法是添加

reverse: true

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

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

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

如何在 flutter 中将列表视图滚动到底部

how can I scroll list view to the bottom in flutter

listview

scroll

chat

dart

flutter