flutter implements switching page cache

This example shares the specific code for flutter to switch page cache for your reference. The specific content is as follows

1. Implement the bottom navigation bar toggle page cache

Implementing the bottom navigation bar to switch page cache requires import inproste_indexed_stackPlugin, this plugin can achieve lazy loading, compared to usingIndexedStackpackbodyImplemented, better performance.

dependencies:

#Lazy loading of cascading componentsproste_indexed_stack:  //You can get the latest version without adding a version number

To achieve bottom navigation switching page cache, just turnbodyuseProsteIndexedStackIt is OK to wrap a layer, please pay attentionProsteIndexedStackofchildrenyesIndexedStackChildtype, so eachchildren Every item needs to be usedIndexedStackChildpack

Example:

import 'package:flutter/';
... //Other content that requires import is omitted
class RootPage extends StatefulWidget {
  @override
  _RootPageState createState() =&gt; _RootPageState();
}

class _RootPageState extends State&lt;RootPage&gt; {
  //Bottom navigation bar array  final items = [
    BottomNavigationBarItem(
        icon: Icon(),label: 'front page',tooltip: ''
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.music_note),label: 'music',tooltip: ''
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.slow_motion_video),label: 'Short Video',tooltip: ''
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.account_circle_outlined),label: 'mine',tooltip: ''
    ),
  ];

  //Bottom navigation bar page  final bodyList = [
    IndexedStackChild(child: HomePage()),
    IndexedStackChild(child: MusicPage()),
    IndexedStackChild(child: TinyVideoPage()),
    IndexedStackChild(child: ProfilePage()),
  ];

  //The page index is currently selected  int _currentIndex = 0;

  //Switch the bottom navigation bar  void _onTap(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: items,
        currentIndex: _currentIndex,  //The identifier is currently selected        onTap: _onTap,
        type: ,
      ),
      //ProsteIndexedStack package, maintain the original page status when switching at the bottom navigation      body: ProsteIndexedStack(
        index: _currentIndex,
        children: bodyList,
      ),
    );
  }
}

2. Implement the top tab switching page cache

Top tab switch page cache is availableAutomaticKeepAliveClientMixinImplementation, just on the pagestateMixed inAutomaticKeepAliveClientMixin, then rewritewantKeepAlivefortrueJust do it.

If you have made the above configuration,build middleprintWhen you switch tabbar,print It will not print, and the page will be kept intact.

Example:

import 'package:flutter/';

class ExamplePage extends StatefulWidget {
  @override
  _ExamplePageState createState() => _RecommendPageState();
}

class _ExmaplePageState extends State<ExamplePage>
    with AutomaticKeepAliveClientMixin {
  int count = 0;

  void add() {
    setState(() {
      count++;
    });
  }

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    ();
    print('recommend initState');
  }

  @override
  Widget build(BuildContext context) {
    (context);
    return Scaffold(
        body:Center(
          child: Text('Example: $count', style: TextStyle(fontSize: 30))
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: add,
          child: Icon(),
        ));
  }
}

The article only introduces how to switch page caching. I will not elaborate on other relevant specific page implementations here. If you need it, you can try it yourself.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.