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

Posted 2023-02-23

【中文标题】页面在使用 BottomTabNavigator 在 2 个屏幕之间导航时开始

【英文标题】：Page started at begin when navigate between 2 screen using BottomTabNavigator

【发布时间】：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'),
          )
        ],
      ),
    );
  

【参考方案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'),
          )
        ],
      ),

IndexedStack Widget Video Tutorial on medium