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

Hus*_*een 2 listview scroll chat dart flutter

我有一个 flutter 应用程序包含一个列表视图生成器(聊天页面),我需要将页面滚动到页面末尾到最后一条消息?

dsh*_*tjr 8

对ListView小部件设置reverse: true会将最新元素显示在底部。这样,您就可以轻松实现聊天时间线。

ListView.builder(
  reverse: true,
  itemBuilder: (context, index) => _chatCell(),
)
Run Code Online (Sandbox Code Playgroud)


dsh*_*tjr 5

您需要创建一个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();
  }
}
Run Code Online (Sandbox Code Playgroud)