Flutter页面保活插件keep_alive_builder的使用

Flutter页面保活插件keep_alive_builder的使用

特性

Keep alive for FutureBuilder and StreamBuilder

在Flutter中，keep_alive_builder 插件可以帮助你实现 FutureBuilder 和 StreamBuilder 的页面保活功能。这意味着当这些构建器不在屏幕视图中时，它们的状态会被保留下来，从而避免不必要的重建。

示例代码

以下是一个完整的示例，展示了如何使用 keep_alive_builder 插件来保活 FutureBuilder 和 KeepAliveFutureBuilder。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _count1 = 1;
  int _count2 = 1;

  @override
  Widget build(BuildContext context) {
    const gap = SizedBox(height: 40);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SizedBox(
        width: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            gap,
            FutureBuilder<int>(
              future: Future(() async {
                await Future.delayed(
                  const Duration(seconds: 1),
                );
                return _count1;
              }),
              builder: (context, snapshot) {
                if (snapshot.hasError) {
                  return const Text('error');
                }
                if (snapshot.connectionState != ConnectionState.done) {
                  return const Text('loading...');
                }

                return Text('future builder: ${snapshot.data}');
              },
            ),
            gap,
            // 使用 KeepAliveFutureBuilder 保持状态
            KeepAliveFutureBuilder<int>(
              needLoadingForSubsequentRequests: false,
              refreshKey: ValueKey(_count2),
              futureGenerator: () => Future(() async {
                    await Future.delayed(
                      const Duration(seconds: 1),
                    );
                    return _count2;
                  }),
              loading: const Text('loading...'),
              builder: (value) {
                return Text('keep alive future builder: $value');
              },
            ),
            gap,
            TextButton(
              onPressed: () {
                setState(() {
                  _count1++;
                  _count2++;
                });
              },
              child: const Text('rebuild'),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

1. 导入必要的库

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

2. 定义主应用

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

3. 创建 MyApp 类

   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   

4. 创建 MyHomePage 类

   class MyHomePage extends StatefulWidget {
     const MyHomePage({super.key, required this.title});
     final String title;
   
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }
   

5. 定义 _MyHomePageState 类

   class _MyHomePageState extends State<MyHomePage> {
     int _count1 = 1;
     int _count2 = 1;
   
     @override
     Widget build(BuildContext context) {
       const gap = SizedBox(height: 40);
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: SizedBox(
           width: double.infinity,
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
               gap,
               FutureBuilder<int>(
                 future: Future(() async {
                   await Future.delayed(
                     const Duration(seconds: 1),
                   );
                   return _count1;
                 }),
                 builder: (context, snapshot) {
                   if (snapshot.hasError) {
                     return const Text('error');
                   }
                   if (snapshot.connectionState != ConnectionState.done) {
                     return const Text('loading...');
                   }
   
                   return Text('future builder: ${snapshot.data}');
                 },
               ),
               gap,
               // 使用 KeepAliveFutureBuilder 保持状态
               KeepAliveFutureBuilder<int>(
                 needLoadingForSubsequentRequests: false,
                 refreshKey: ValueKey(_count2),
                 futureGenerator: () => Future(() async {
                       await Future.delayed(
                         const Duration(seconds: 1),
                       );
                       return _count2;
                     }),
                 loading: const Text('loading...'),
                 builder: (value) {
                   return Text('keep alive future builder: $value');
                 },
               ),
               gap,
               TextButton(
                 onPressed: () {
                   setState(() {
                     _count1++;
                     _count2++;
                   });
                 },
                 child: const Text('rebuild'),
               ),
             ],
           ),
         ),
       );
     }
   }