Mehrere Methoden für Flutter zum Implementieren des Seitenstatus-Cachings

Wenn Sie die BottomNavigationBar-Komponente zum Seitenwechsel verwenden, wird die Komponente zerstört, wenn die Seite weggeschaltet wird, und sie wird neu erstellt, wenn die Seite zurückgeschaltet wird. Wie kann die Seite weggeschaltet bleiben, ohne die Komponente zu zerstören (Cache-Status)?

Es gibt zwei Methoden:

1. Verwenden Sie die IndexedStack-Komponente, um die Seite zwischenzuspeichern.
Die IndexedStack-Komponente erstellt die Komponente auf einmal, stapelt Fenster und wechselt, um das entsprechende Fenster über den Index anzuzeigen

List<Widget> _MainList = [HomePage(), KnowledgePage(), MenstrualCalendarPage(), UserPage()];
int currentIndex = 0;

body: IndexedStack(
  index: currentIndex,
  children: _MainList,
),

2. Unter Verwendung der PageView-Komponente wird die Komponente zur Verwendung mit AutomaticKeepAliveClientMixin gemischt** (empfohlen)**

List<Widget> _MainList = [HomePage(), KnowledgePage(), MenstrualCalendarPage(), UserPage()];
int currentIndex = 0;
late PageController _pageController;

@override
void initState() {
    
    
  super.initState();
  this._pageController = PageController(initialPage: this.currentIndex, keepPage: true);
}
@override
void dispose() {
    
    
  _pageController.dispose();
  super.dispose();
}
  
Scaffold(
	body: PageView(
	 physics: NeverScrollableScrollPhysics(), // 禁止左右滑动切换页面
	  controller: _pageController,
	  children: _MainList,
	),
	bottomNavigationBar: BottomNavigationBar(
	   onTap: (int index) {
    
    
	     setState(() {
    
    
	        this.currentIndex = index;
	        _pageController.jumpToPage(index);
	      });
	    },
	);
);

Mischen Sie dann AutomaticKeepAliveClientMixin in die Komponente ein, die zwischengespeichert werden muss

class _MenstrualCalendarPageState extends State<MenstrualCalendarPage> with AutomaticKeepAliveClientMixin {
    
    

  @override
  void initState() {
    
    
    super.initState();
    print('创建分类页面');
  }

  @override
  Widget build(BuildContext context) {
    
    
    super.build(context);
    return Container(child: MyText('缓存的组件'),);
  }
  
  @override
  bool get wantKeepAlive => true; // 是否开启缓存
}

Wenn Sie es nützlich finden, können Sie es gerne mit einem „Gefällt mir“ markieren. Vielen Dank,
dass Sie mir folgen und von Zeit zu Zeit technische Trockengüter teilen

Scannen Sie den QR-Code, um dem offiziellen Konto zu folgen