导航后将滚动控制器动画到 ListView.builder 的顶部答案

【问题标题】：Animate Scroll Controller to top of ListView.builder after Navigation导航后将滚动控制器动画到 ListView.builder 的顶部
【发布时间】：2018-08-07 08:39:45
【问题描述】：

各位，

目标：使用我的 ListView.builder 导航到页面并立即查看列表的最新（顶部），并向下滚动以查看较旧的条目。

我有一个包含 100 个项目（#1-100）的 ListView.builder。我可以反转列表以首先获得一个类似 facebook 的提要，其中包含最新的 (100)。

在 ListView 上使用 Floating 操作按钮，我可以使用以下内容成功跳转到列表顶部：

 _postscrollController.animateTo(     
 _scrollController.position.maxScrollExtent 
                            curve: Curves.easeOut,
                            duration: const Duration(milliseconds: 10))

但是，当导航到包含 ListView.builder 的页面时，我无法自动调用上述内容。当我打开应用程序并从主屏幕导航到列表时，它会从列表的最底部 (1) 开始，我必须向上滚动才能到达顶部。

任何意见/建议将不胜感激。

咕嘟咕嘟！

【问题讨论】：

为什么不直接使用默认从顶部开始的非反转ListView？
我如何设置一个 ListView，默认情况下以最新帖子开头？如果 reversed = true （并且用户向上滚动以查看较新的帖子），我使用的那些从用户在底部看到最旧的值开始，或者如果 reversed = false （并且用户向下滚动以查看），则从用户在顶部看到最旧的值开始较新的帖子）。谢谢
好吧，您只需将提供给ListView 的项目列表反转。我将发布一个简单的示例作为答案。

标签： listview navigation dart scrollview flutter

【解决方案1】：

这是一个非常简单的例子，如何反转一个列表，而不是整个ListView：

import 'package:flutter/material.dart';

main() => runApp(MaterialApp(home: MyHomePage()));

List<String> listData = [
  'oldest',
  'older',
  'old',
  'new',
  'newer',
  'newest',
];

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // reverse the order of the list data
    List<String> reversedListData = listData.reversed.toList();

    return Scaffold(
      appBar: AppBar(),
      body: ListView.builder(
        itemCount: reversedListData.length,
        itemBuilder: (BuildContext context, int index) {
          // use reversed list to build list item
          return ListTile(title: Text(reversedListData[index]));
        },
      ),
    );
  }
}

或者，您也可以将索引转换为倒计时：

int reversedIndex = listData.length - 1 - index;
return ListTile(title: Text(listData[reversedIndex]));

【讨论】：