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

更新時間：2022年07月29日 10:03:56 作者：保安小黑

這篇文章主要為大家詳細(xì)介紹了flutter實現(xiàn)切換頁面緩存，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了flutter實現(xiàn)切換頁面緩存的具體代碼，供大家參考，具體內(nèi)容如下

一、實現(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),
? ? ? ? ));
? }
}

文章只介紹了如何實現(xiàn)切換頁面緩存，其他相關(guān)具體頁面實現(xiàn)在這里就不贅述了，有需要的可以自己實現(xiàn)一下試一試。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: