flutter如何實現(xiàn)切換頁面緩存

本文小編為大家詳細介紹“flutter如何實現(xiàn)切換頁面緩存”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當(dāng)，希望這篇“flutter如何實現(xiàn)切換頁面緩存”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

一、實現(xiàn)底部導(dǎo)航欄切換頁面緩存

實現(xiàn)底部導(dǎo)航欄切換頁面緩存需要在pubspc.yamal中導(dǎo)入proste_indexed_stack插件，這個插件可以實現(xiàn)懶加載，比起使用IndexedStack包裹body實現(xiàn)，性能更好。

dependencies:

#懶加載的層疊組件
proste_indexed_stack:  //不加版本號可獲取最新版本

實現(xiàn)底部導(dǎo)航切換頁面緩存只需將body用ProsteIndexedStack包裹一層既可以，注意ProsteIndexedStack的children 是IndexedStackChild類型的，所以中的每一個children 的每一項都需要用IndexedStackChild包裹

示例：

import 'package:flutter/material.dart';
... //其他需要import的內(nèi)容省略

class RootPage extends StatefulWidget {
  @override
  _RootPageState createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  //底部導(dǎo)航欄數(shù)組
  final items = [
    BottomNavigationBarItem(
        icon: Icon(Icons.home),label: '首頁',tooltip: ''
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.music_note),label: '音樂',tooltip: ''
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.slow_motion_video),label: '短視頻',tooltip: ''
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.account_circle_outlined),label: '我的',tooltip: ''
    ),
  ];

  //底部導(dǎo)航欄頁面
  final bodyList = [
    IndexedStackChild(child: HomePage()),
    IndexedStackChild(child: MusicPage()),
    IndexedStackChild(child: TinyVideoPage()),
    IndexedStackChild(child: ProfilePage()),
  ];

  //當(dāng)前選中頁面索引
  int _currentIndex = 0;

  //底部導(dǎo)航欄切換
  void _onTap(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: items,
        currentIndex: _currentIndex,  //當(dāng)前選中標(biāo)識符
        onTap: _onTap,
        type: BottomNavigationBarType.fixed,
      ),
      //ProsteIndexedStack包裹，實現(xiàn)底部導(dǎo)航切換時保持原頁面狀態(tài)
      body: ProsteIndexedStack(
        index: _currentIndex,
        children: bodyList,
      ),
    );
  }
}

二、實現(xiàn)頂部tab切換頁面緩存

頂部tab切換頁面緩存可使用AutomaticKeepAliveClientMixin實現(xiàn)，只需在頁面的state中混入AutomaticKeepAliveClientMixin，然后重寫wantKeepAlive為true即可。

做了以上配置，你如果在build 中 print 一下，當(dāng)你切換 tabbar 時，print 就不會打印，也就實現(xiàn)了頁面保持狀態(tài)。

示例：

import 'package:flutter/material.dart';

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() {
    super.initState();
    print('recommend initState');
  }

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

讀到這里，這篇“flutter如何實現(xiàn)切換頁面緩存”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。