Flutter重试机制插件hf_retry的使用

hf_retry

一个用于在网络连接中断时提升用户体验的插件。

当网络不可用时，会显示占位图像而不是 NetworkImage。
当设备重新连接到互联网时，会自动重试并获取 NetworkImage。

只需将 NetworkImageWithRetry 替换为 NetworkImage 即可。

示例

Image(
  image: NetworkImageWithRetry('http://example.com/avatars/123.jpg'),
  errorBuilder: (context, _, __) {
    return FlutterLogo(
      size: 200,
    );
  },
),

完整示例代码

以下是一个完整的示例代码，展示了如何使用 hf_retry 插件来实现重试机制。

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

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

class MyApp extends StatelessWidget {
  // 这个小部件是应用程序的根节点。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        body: Center(
          child: Image(
            // 使用 NetworkImageWithRetry 来加载网络图片
            image: NetworkImageWithRetry(
              'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
            ),
            // 错误构建器：当加载失败时显示 FlutterLogo
            errorBuilder: (context, _, __) {
              return FlutterLogo(
                size: 200,
              );
            },
            // 加载构建器：在图片加载过程中显示进度条
            loadingBuilder: (BuildContext context, Widget child,
                ImageChunkEvent? loadingProgress) {
              if (loadingProgress == null) return child;
              return Center(
                child: CircularProgressIndicator(
                  // 显示加载进度
                  value: loadingProgress.expectedTotalBytes != null
                      ? loadingProgress.cumulativeBytesLoaded /
                          loadingProgress.expectedTotalBytes!
                      : null,
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

更多关于Flutter重试机制插件hf_retry的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼•6 天前

更多关于Flutter重试机制插件hf_retry的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

hf_retry 是一个用于在 Flutter 应用中实现重试机制的插件。它可以帮助你在网络请求或其他异步操作失败时，自动进行重试，直到操作成功或达到最大重试次数。

安装 `hf_retry`

首先，你需要在 pubspec.yaml 文件中添加 hf_retry 依赖：

dependencies:
  flutter:
    sdk: flutter
  hf_retry: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

使用 `hf_retry`

hf_retry 提供了一个 Retry 类，你可以使用它来包装你的异步操作，并配置重试策略。

基本用法

import 'package:hf_retry/hf_retry.dart';

void main() async {
  final retry = Retry(
    maxAttempts: 3, // 最大重试次数
    delay: Duration(seconds: 1), // 每次重试的延迟时间
    onRetry: (e, attempt) {
      print('Retry attempt $attempt due to $e');
    },
  );

  try {
    final result = await retry.run(() async {
      // 这里放置你的异步操作
      return await someAsyncOperation();
    });
    print('Operation succeeded: $result');
  } catch (e) {
    print('Operation failed after retries: $e');
  }
}

Future<String> someAsyncOperation() async {
  // 模拟一个可能失败的操作
  if (DateTime.now().second % 2 == 0) {
    throw Exception('Random failure');
  }
  return 'Success';
}

配置选项

maxAttempts: 最大重试次数，默认为 3。
delay: 每次重试之间的延迟时间，默认为 Duration(seconds: 1)。
onRetry: 每次重试时的回调函数，可以用于记录日志或执行其他操作。
retryIf: 一个条件函数，用于决定是否应该重试。默认情况下，所有异常都会触发重试。

自定义重试条件

你可以通过 retryIf 参数来自定义重试条件。例如，只对特定类型的异常进行重试：

final retry = Retry(
  maxAttempts: 3,
  delay: Duration(seconds: 1),
  retryIf: (e) => e is MyCustomException, // 只对 MyCustomException 进行重试
);

使用 `Retry` 与 `FutureBuilder`

你也可以在 FutureBuilder 中使用 Retry 来处理异步操作的重试：

FutureBuilder<String>(
  future: retry.run(() async {
    return await someAsyncOperation();
  }),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      return Text('Result: ${snapshot.data}');
    }
  },
);

Flutter重试机制插件hf_retry的使用

Flutter重试机制插件hf_retry的使用

hf_retry

示例

完整示例代码

安装 hf_retry

使用 hf_retry

基本用法

配置选项

自定义重试条件

使用 Retry 与 FutureBuilder

安装 `hf_retry`

使用 `hf_retry`

使用 `Retry` 与 `FutureBuilder`