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

时间:2018-08-07 08:39:46

标签: listview navigation dart scrollview flutter

人,

目标:要使用我的ListView.builder导航到该页面并立即查看列表的最新(顶部),并向下滚动以查看较早的条目。

我有一个100个项目的ListView.builder(#1-100)。我可以颠倒该列表,以获取最近的(100)开头的类似Facebook的供稿。

使用ListView上的Floating action按钮,我可以使用以下内容成功跳至列表顶部:

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

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

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

咕oo声!

1 个答案:

答案 0 :(得分:0)

这是一个非常简单的示例,该示例显示如何反转列表,而不是整个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]));