Question

我有一个Flutter应用，其中包含一个列表视图构建器（聊天页面）我需要滚动页面到页面末尾到最后一条消息吗？

Answer 1

反向设置：对ListView小部件为true会将最新元素置于底部。这样，您可以轻松实现聊天时间表。

==

Answer 2

您将需要创建一个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 3

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

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

<块引用>

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

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

Answer 4

完美的方法是添加

reverse: true

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

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

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

如何在颤抖的情况下将列表视图滚动到底部

4 个答案: