如果我使用页面视图（内部有ListView）+底部导航栏，一切都可以正常工作。
我对每一页都使用唯一的pagestoragekey，以便列出两页上的列表视图保存和恢复滚动偏移量。
但我需要建立基于路线的应用导航。
这里有一个非常简单的代码，但它足以显示和重现我面临的问题。
你可以复制粘贴这个剪贴检查

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text("Test")),
        body: Scaffold(
          body: Navigator(
            key: _navigatorKey,
            onGenerateRoute: (settings) {
              switch (settings.name) {
                case '/':
                  return MaterialPageRoute(builder: (_) => SomeWidget(0));
                case '/another_route':
                  return MaterialPageRoute(builder: (_) => SomeWidget(1));
                  break;
              }
            },
          ),
          bottomNavigationBar: BottomNavigationBar(
            selectedItemColor: Colors.grey,
            unselectedItemColor: Colors.grey,
            items: [
              BottomNavigationBarItem(icon: Icon(Icons.print), title: Text('Page 0')),
              BottomNavigationBarItem(icon: Icon(Icons.category), title: Text('Page 1')),
            ],
            onTap: (index) {
              if (index == 0) {
                _navigatorKey.currentState.pushReplacementNamed('/');
              } else {
                _navigatorKey.currentState.pushReplacementNamed('/another_route');
              }
            },
          ),
        ),
      ),
    );
  }
}

class SomeWidget extends StatelessWidget {
  final int page;

  SomeWidget(this.page) : super(key: Key('page key $page'));

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      key: PageStorageKey(page),
      itemBuilder: (context, index) {
        return Card(
          key: Key('item: $index on page: $page'),
          color: page == 0 ? Colors.blue[200] : Colors.green[200],
          child: Container(
            height: 196,
            alignment: Alignment.center,
            child: Text('Row: $index  |  Page $page'),
          ),
        );
      },
    );
  }
}

最佳答案

这是预期的行为。当你按下一个屏幕时，它会生成一个全新的屏幕，而没有任何以前的状态。
这就是使用页面视图的原因，它的构建是为了保留状态，而不是卸载任何屏幕。
在您的示例中，生命周期是
处理屏幕
创建新屏幕
显示屏幕
我可以不使用viewpager（因为我不需要拖动函数）共享我使用它的方式。

import 'package:flutter/material.dart';
import '../Widgets.dart'; // my custom widgets

class PageTabs extends StatefulWidget {
  @override
  _PageTabsState createState() => _PageTabsState();
}

class _PageTabsState extends State<PageTabs> {
  int _cIndex = 0; //the current page index

  @override
  void initState() {
    super.initState();
  }

  void _changeTab(index) {
    setState(() {
      _cIndex = index;
    });
  }

  List<Widget> tabs = [
    TimelineScreen(key: PageStorageKey('TimeLine')),
    PageTrends(key: PageStorageKey('Trends')),
    PageSettings(key: PageStorageKey('Settings'))
  ];
  final PageStorageBucket bucket = PageStorageBucket();



  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        initialIndex: 1,
        length: 3,
        child: Stack(
          alignment: AlignmentDirectional.bottomStart,
          children: <Widget>[
          PageStorage(
              child: tabs[_cIndex],
              bucket: bucket,
            ),
           AppBarra( //Custom bottom navigation bar wrapper
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                  Expanded(
                      child: TabButton(
                          tooltip: 'Back',
                          onTap: () {
                            _changeTab(0);
                          },
                          icon: Icons.home,
                          color:
                              _cIndex == 0 ? Color(0xff00abee) : Colors.grey)),
                  Expanded(
                      child: TabButton(
                          tooltip: 'Back',
                          onTap: () {
                            _changeTab(1);
                          },
                          icon: Icons.search,
                           color:
                              _cIndex == 1 ? Color(0xff00abee) : Colors.grey)
                      ),
                  Expanded(
                      child: TabButton(
                          tooltip: 'Back',
                          onTap: () {
                            _changeTab(2);
                          },
                          icon: Icons.settings,
                          color:
                              _cIndex == 2 ? Color(0xff00abee) : Colors.grey)),
                ]))
          ]


    ));
  }
}

关于flutter - ListView恢复滚动位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56818836/