Flutter实现页面切换后保持原页面状态的3种方法

Flutter 实现页面切换后保持原页面状态的 3 种方法 在 Flutter 应用中，导航栏切换页面后默认情况下会丢失原页面状态，即每次进入页面时都会重新初始化状态。如果在 initState 中打印日志，会发现每次进入时都会输出，显然这样增加了额外的开销，并且带来了不好的用户体验。 为了解决这个问题，我们可以使用以下 3 种方法来实现页面切换后保持原页面状态： 第一种方法：使用 IndexedStack 来保存页面状态 IndexedStack 是 Flutter 中的一种 widget，可以用来保存页面状态。在这个方法中，我们可以创建一个 IndexedStack，并将每个页面作为一个子 widget 添加到栈中。当用户切换页面时，我们只需要更新 IndexedStack 的索引，而不需要重新创建页面。 第二种方法：使用 AutomaticKeepAliveClientMixin 来保存页面状态 AutomaticKeepAliveClientMixin 是 Flutter 中的一个 mixin，可以用来保存页面状态。在这个方法中，我们可以将每个页面混入 AutomaticKeepAliveClientMixin，并在页面中使用 wantKeepAlive 属性来保存页面状态。 第三种方法：使用 PageStore 来保存页面状态 PageStore 是 Flutter 中的一个第三方库，可以用来保存页面状态。在这个方法中，我们可以使用 PageStore 来保存页面状态，并在页面切换时使用 PageStore 来恢复页面状态。 在上面的代码中，我们可以看到，作者使用了第一种方法，即使用 IndexedStack 来保存页面状态。作者创建了一个 IndexedStack，并将每个页面作为一个子 widget 添加到栈中。当用户切换页面时，作者只需要更新 IndexedStack 的索引，而不需要重新创建页面。 在作者的示例代码中，我们可以看到，作者使用了一个 BottomNavigationBar 来实现固定的底部导航，并使用了一个 Scaffold 来展示当前选中的子页面。作者还使用了一个 setState 来更新当前选中的索引，并使用了一个 bodyList 来存储每个子页面。 在子页面中，作者使用了一个 StatefulWidget 来实现一个计数器和一个加号按钮。作者还使用了一个 setState 来更新计数器的值，并使用了一个 floatingActionButton 来实现加号按钮的点击事件。 Flutter 实现页面切换后保持原页面状态的 3 种方法可以满足不同的需求和场景。开发者可以根据实际情况选择合适的方法来实现页面切换后保持原页面状态。