日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

flutter實現切換頁面緩存_Android

作者：保安小黑 ? 更新時間： 2022-09-23 編程語言

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

一、實現底部導航欄切換頁面緩存

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

dependencies:

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

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

示例：

import 'package:flutter/material.dart';
... //其他需要import的內容省略

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

class _RootPageState extends State<RootPage> {
? //底部導航欄數組
? 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: ''
? ? ),
? ];

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

? //當前選中頁面索引
? int _currentIndex = 0;

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

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

二、實現頂部tab切換頁面緩存

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

做了以上配置，你如果在build 中 print 一下，當你切換 tabbar 時，print 就不會打印，也就實現了頁面保持狀態。

示例：

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),
? ? ? ? ));
? }
}

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

原文鏈接：https://blog.csdn.net/weixin_47894857/article/details/119715051

欄目分類
最近更新