Flutter延迟加载功能插件deferred_helper的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter延迟加载功能插件deferred_helper的使用

一个简单的Flutter包，用于轻松处理应用程序中的延迟内容。

延迟加载会将构建文件拆分为多个文件，从而显著减小应用的大小并降低启动时间。每个设计良好的应用都应该有延迟页面。请注意，一些自定义路由器已经具有此类功能。

延迟加载在Widget树中的使用

import 'deferred_content/deferred_widget.dart' deferred as import_deferred_widget;

[@override](/user/override)
Widget build(BuildContext context) {
  return Deferred.widget(import_deferred_widget.loadLibrary,
      () => import_deferred_widget.YourDeferredWidget());
}

在这个例子中，YourDeferredWidget 是一个延迟加载的组件。只有当 loadLibrary 被调用时，该组件才会被加载到内存中。

延迟加载在Navigator中的使用

import 'deferred_content/page1.dart' deferred as import_page1;
import 'deferred_content/page2.dart' deferred as import_page2;

MaterialApp(
  // ...
  onGenerateRoute: (settings) {
    if (settings.name == "/") {
      return PageRouteBuilder(
        settings: RouteSettings(name: "/"),
        pageBuilder: (context, animation, secondaryAnimation) {
          // 只有当导航器请求时才加载页面
          return Deferred.widget(import_page1.loadLibrary,
              () => import_page1.Page1());
        },
      );
    } else {
      // 可以加载多个库（例如延迟参数类）
      return Deferred.route([import_page2.loadLibrary],
          (context) {
            // 您可以使用任何页面生成器（如过渡效果）
            return PageTransition(
              // 在成功加载后，这里可以定义路由设置
              settings: RouteSettings(name: "deferred_dependent_route_settings"),
              child: import_page2.Page2(),
              type: PageTransitionType.fade,
            );
          });
    }
  },
);

在这个例子中，Page1 和 Page2 都是延迟加载的组件。只有当用户尝试导航到这些页面时，它们才会被加载到内存中。

已知问题

目前，Hero过渡不支持。我正在积极修复这个问题。

完整示例代码

import 'package:deferred_helper/deferred_helper.dart';
import 'package:example/directory.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final deferredController = DeferredController();

  MyApp({super.key});

  // 这个widget是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "FlockUp",
      onGenerateInitialRoutes: (initialRouteName) {
        return [
          Dir.routes(
              RouteSettings(name: Dir.deferredRoute.path), deferredController),
        ];
      },
      onGenerateRoute: (settings) {
        return Dir.routes(settings, deferredController);
      },
    );
  }
}

更多关于Flutter延迟加载功能插件deferred_helper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter延迟加载功能插件deferred_helper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，deferred_helper 是一个用于 Flutter 的插件，它简化了延迟加载（deferred loading）Dart 代码的过程。延迟加载允许你按需加载代码，从而减少应用的初始启动时间和内存占用。以下是如何使用 deferred_helper 插件的一个示例。

首先，确保你已经在 pubspec.yaml 文件中添加了 deferred_helper 依赖：

dependencies:
  flutter:
    sdk: flutter
  deferred_helper: ^x.y.z  # 请替换为最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来，我们将展示如何设置和使用 deferred_helper 来延迟加载某些功能。

1. 创建需要延迟加载的 Dart 文件

假设我们有两个模块 module_a.dart 和 module_b.dart 需要延迟加载：

module_a.dart

part of my_app;

void showModuleA() {
  print("Module A is loaded and shown!");
}

module_b.dart

part of my_app;

void showModuleB() {
  print("Module B is loaded and shown!");
}

注意：由于延迟加载要求被延迟加载的代码必须位于独立的 Dart 文件中，并且这些文件需要使用 part of 指令来声明它们属于同一个库。因此，你需要在项目根目录或 lib 目录下创建一个库声明文件，比如 my_app.dart：

my_app.dart

library my_app;

// 这个文件是空的，只是为了声明库

2. 修改主应用文件

接下来，我们修改主应用文件（比如 main.dart）来使用 deferred_helper 插件延迟加载这些模块：

import 'package:flutter/material.dart';
import 'package:deferred_helper/deferred_helper.dart';
import 'my_app.dart' deferred as module_a, deferred as module_b;

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isModuleALoaded = false;
  bool isModuleBLoaded = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Deferred Loading Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () async {
                  if (!isModuleALoaded) {
                    await DeferredHelper.loadLibrary(() => module_a.loadLibrary());
                    isModuleALoaded = true;
                  }
                  module_a.showModuleA();
                },
                child: Text('Load and Show Module A'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async {
                  if (!isModuleBLoaded) {
                    await DeferredHelper.loadLibrary(() => module_b.loadLibrary());
                    isModuleBLoaded = true;
                  }
                  module_b.showModuleB();
                },
                child: Text('Load and Show Module B'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们使用了 DeferredHelper.loadLibrary 方法来加载延迟的库。module_a.loadLibrary() 和 module_b.loadLibrary() 是由 Flutter 生成的函数，用于加载对应的延迟库。

3. 构建和运行应用

现在，你可以构建并运行你的 Flutter 应用。当你点击相应的按钮时，相应的模块将会被加载并显示相应的消息。

这个示例展示了如何使用 deferred_helper 插件来简化 Flutter 应用中的延迟加载过程。通过这种方法，你可以有效地减少应用的初始大小和提高启动速度。

回到顶部