如何在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 widget，会将最新的元素放在底部。有了这个，你就可以轻松实现聊天时间线了。

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