[Flutter] AutomaticKeepAliveClientMixin löst das Problem der häufigen Erstellung von Tab-Wechselseiten

Standardmäßig erstellen PageView und TabBarView in Flutter die Seite jedes Mal neu, wenn Sie die Seite wechseln. Obwohl die neueste Benutzeroberfläche gerendert wird, kann dieses Verhalten zu Leistungsproblemen führen, insbesondere wenn die Seite ein komplexes Layout und das Laden von Daten aufweist. .

Um dieses Problem zu lösen, können Sie die Schnittstelle AutomaticKeepAliveClientMixin und ihre Methode wantKeepAlive verwenden. Behalten Sie den Seitenstatus bei, um zu vermeiden, dass er bei jedem Wechsel neu erstellt wird.

main.dart-Code

import 'package:flutter/material.dart';
import 'package:tab_pageview/tab_pageview.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TabPageView',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const TabPage(title: 'TabPageView'),
    );
  }
}

class TabPage extends StatefulWidget {
  const TabPage({super.key, required this.title});
  final String title;

  @override
  State<TabPage> createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> {
  static const tabs = ['全部', 'Android', 'Flutter', 'RN', 'Kotlin', 'IOS'];

  get _tabPages => tabs.map((e) => TabPageView(tabName: e)).toList();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: PageView(
        children: _tabPages,
      ),
    );
  }
}

tab_pageview.dart-Code

import 'package:flutter/material.dart';

///PageView
class TabPageView extends StatefulWidget {
  final String tabName;
  const TabPageView({super.key, required this.tabName});

  @override
  State<TabPageView> createState() => _TabPageViewState();
}

class _TabPageViewState extends State<TabPageView>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context); //不要忘记加
    debugPrint("TabPageView:build ${widget.tabName}");
    return Center(
      child: Text(
        widget.tabName,
        style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true; //返回true
}

Quellcode-Adresse: GitHub – IBraveBegins/tab_pageview: Häufiges Build-Problem beim Tab-Umschalten von Seiten