Page switching data retention: Mixin and PageView

“This is the 13th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

Hi 👋

• Wechat: RyukieW
• Wechat official account: LabLawliet
• 📦 Archive of technical articles
• 🐙 making

More columns:

The independent development of Lawliet

Lawliet’s iOS garden party

Lawliet’s underlying iOS lab

Lawliet’s iOS Reverse lab

Lawliet’s brush book

Lawliet’s Flutter Lab

Flutter tips | Gesture handling and CLAMP functions from side index bar encapsulation

Flutter tips | Widget initialization method rewrite & chain call & Sort

Flutter tips | Assertion through the style of cells

Flutter tips | ListView slide to group heads

Flutter Tips | Third-party library import and Web data Display (three forms)

preface

A problem can be found with Flutter library import and network data presentation (three forms). Every time the page is changed, data will be requested again. In real development, data is retained and updated as needed.

Mixin

Adjust inheritance relationship

Multiple inheritance AutomaticKeepAliveClientMixin

class MessagePage extends StatefulWidget {
  @override
  _MessagePageState createState() => _MessagePageState();
}

class _MessagePageState extends State<MessagePage> with AutomaticKeepAliveClientMixin<MessagePage> {... }Copy the code

Rewrite wantKeepAlive

class _MessagePageState extends State<MessagePage> with AutomaticKeepAliveClientMixin<MessagePage> {...@override
    bool get wantKeepAlive => true;
}
Copy the code

Adjust the Build method

  @override
  Widget build(BuildContext context) {
    super.build(context);
    returnScaffold(...) ; }Copy the code

Adjust MyHomePage (Tab page)

Our original logic for switching a Tab looked like this:

class _MyHomePageDataSource extends State<MyHomePage> {
  int _selectedTab = 0;
  final List<Widget> _pages = [
      MessagePage(), 
      ContactsPage(), 
      MommentPage(), 
      MinePage()
      ];

  @override
  Widget build(BuildContext context) {
    returnScaffold( body: _pages[_selectedTab], ... ) ;Copy the code

Not all of the child page’s widgets are in the widget tree of the tag container, causing each switch to regenerate the render.

• We need to make the following adjustments:
  • buildPageController
  • Adjust theBody 为 PageViewAnd bindingPageController 和 pages
  • throughPageControllerSwitching subpages

class _MyHomePageDataSource extends State<MyHomePage> {
  int _selectedTab = 0;
  final List<Widget> _pages = [
    MessagePage(),
    ContactsPage(),
    MommentPage(),
    MinePage()
  ];
  // 一、 构建 PageController
  final PageController _pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // Set Body to PageView and bind PageController to Pages
      body: PageView(
        controller: _pageController,
        children: _pages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.green,
        unselectedItemColor: Colors.grey,
        currentIndex: _selectedTab,
        onTap: (idx) {
          setState(() {
            _selectedTab = idx;
            // Use PageController to switch child pages
            _pageController.jumpToPage(_selectedTab);
          });
        },
        items: const[...]. ,),); }}Copy the code

Check the effect

PageView

Swipe to switch between sub-pages

After using the total suddenly found that you can slide to switch PageView child pages. But the TAB at the bottom hasn’t changed, so let’s deal with that.

Synchronous label switching

Listen to the page switch through onPageChanged and modify the selected tag synchronously.

body: PageView(
        onPageChanged: (idx) {
          setState(() {
            _selectedTab = idx;
          });
        },
        controller: _pageController,
        children: _pages,
      ),
Copy the code

Slide off

Of course, you can turn it off using physics without sliding.

body: PageView(
    physics: const NeverScrollableScrollPhysics(),
    controller: _pageController,
    children: _pages,
),
Copy the code

The complete code

GitHub