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

dependencies:

#懶加載的層疊組件
proste_indexed_stack: ?//不加版本號(hào)可獲取最新版本

實(shí)現(xiàn)底部導(dǎo)航切換頁(yè)面緩存只需將body用ProsteIndexedStack包裹一層既可以，注意ProsteIndexedStack的children 是IndexedStackChild類型的，所以中的每一個(gè)children 的每一項(xiàng)都需要用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: '首頁(yè)',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)航欄頁(yè)面
? final bodyList = [
? ? IndexedStackChild(child: HomePage()),
? ? IndexedStackChild(child: MusicPage()),
? ? IndexedStackChild(child: TinyVideoPage()),
? ? IndexedStackChild(child: ProfilePage()),
? ];

? //當(dāng)前選中頁(yè)面索引
? 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)識(shí)符
? ? ? ? onTap: _onTap,
? ? ? ? type: BottomNavigationBarType.fixed,
? ? ? ),
? ? ? //ProsteIndexedStack包裹，實(shí)現(xiàn)底部導(dǎo)航切換時(shí)保持原頁(yè)面狀態(tài)
? ? ? body: ProsteIndexedStack(
? ? ? ? index: _currentIndex,
? ? ? ? children: bodyList,
? ? ? ),
? ? );
? }
}

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

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

做了以上配置，你如果在build 中 print 一下，當(dāng)你切換 tabbar 時(shí)，print 就不會(huì)打印，也就實(shí)現(xiàn)了頁(yè)面保持狀態(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),
? ? ? ? ));
? }
}

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

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

您可能感興趣的文章: