页面在使用 BottomTabNavigator 在 2 个屏幕之间导航时开始答案

【问题标题】：Page started at begin when navigate between 2 screen using BottomTabNavigator页面在使用 BottomTabNavigator 在 2 个屏幕之间导航时开始
【发布时间】：2021-01-18 06:28:08
【问题描述】：

我是Flutter 的新手。我开始了一个关于社交媒体的新项目。我使用BottomTabNavigation 将主屏幕导航到通知屏幕。现在的问题是，当我在主页上显示提要并向下滚动查看许多帖子时。假设我在第 50 号帖子上。现在，当我单击通知并再次单击主页时，它从头开始。我需要在每个主屏幕上将滚动条保持在之前的位置。

这是我将一个页面导航到另一个页面的代码。

class _DefaultLayoutWidgetState extends State<DefaultLayoutWidget> {
  final List<Map<String, dynamic>> _pages = [
    {'page': PostScreen(), 'title': 'SelfieCorner'},
    {'page': NotificationScreen(), 'title': 'Notifications'}
  ];

  int _curruntIndex = 0;

  void handleTapEvent(inx) {
    setState(() {
      _curruntIndex = inx;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PostAppBarWidget(),
      body: _pages[_curruntIndex]['page'],
      bottomNavigationBar: BottomNavigationBar(
        onTap: (index) => handleTapEvent(index),
        currentIndex: _curruntIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
            ),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.notifications,
            ),
            title: Text('Notifications'),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.lock,
            ),
            title: Text('Profile'),
          )
        ],
      ),
    );
  }
}

【问题讨论】：

标签： flutter flutter-dependencies flutter-navigation flutter-routes

【解决方案1】：

考虑像这样使用IndexedStack。它会在移动到另一个时保存之前的widget 的state。

body: IndexedStack(.....),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (index) => handleTapEvent(index),
        currentIndex: _curruntIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
            ),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.notifications,
            ),
            title: Text('Notifications'),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.lock,
            ),
            title: Text('Profile'),
          )
        ],
      ),

【讨论】：