使用自定义 gif 而非微调器刷新指示器

Question

有谁知道如何用 gif 而不是旋转器制作刷新指示器？

尝试使用custom_refresh_indicator库来实现

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

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Container(
            color: Colors.blue,
            height: 100,
          ),
          Expanded(
            child: CustomRefreshIndicator(
              onRefresh: () => Future.delayed(
                const Duration(seconds: 3),
              ),
              builder: (
                context,
                child,
                controller,
              ) {
                return AnimatedBuilder(
                  animation: controller,
                  builder: (BuildContext context, _) {
                    return Stack(
                      alignment: Alignment.topCenter,
                      children: [
                        if (!controller.isIdle)
                          Positioned(
                            top: -50,
                            child: SizedBox(
                              height: 200,
                              width: 200,
                              child: Image.asset(
                                'assets/test.gif',
                              ),
                            ),
                          ),
                        Transform.translate(
                          offset: Offset(0, 100.0 * controller.value),
                          child: child,
                        ),
                      ],
                    );
                  },
                );
              },
              child: ListView.builder(
                itemCount: 20,
                itemBuilder: (context, index) {
                  return const Card(
                    color: Colors.grey,
                    child: ListTile(),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

但它的工作方式非常笨拙：

还尝试查看pull_to_refresh库，但他们的 Gif 指示器示例非常不清楚且过时。

那么有人知道这个问题的解决方案吗？

提前致谢。

Answer 1

以下是如何使用前面提到的custom_refresh_indicator包实现此目的的示例。

\n

代码

\n

class ImageIndicator extends StatelessWidget {\n  /// The image to be displayed as an indicator.\n  final ImageProvider image;\n\n  /// The callback that will be triggered as a result\n  /// of the pull-to-refresh gesture.\n  final AsyncCallback onRefresh;\n\n  /// A scrollable widget, such as [ListView].\n  final Widget child;\n\n  const ImageIndicator({\n    Key? key,\n    required this.child,\n    required this.image,\n    required this.onRefresh,\n  }) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return CustomRefreshIndicator(\n      onRefresh: onRefresh,\n      child: child,\n      /// We use the [MaterialIndicatorDelegate] class, which simulates\n      /// the behavior of the built-in [RefreshIndicator] widget container.\n      builder: MaterialIndicatorDelegate(\n        /// We can make some adjustments to the default material container\n        backgroundColor: Colors.black,\n        clipBehavior: Clip.antiAlias,\n        builder: (context, controller) {\n          /// This is the interesting part!\n          /// Here you specify the content of the custom refresh indicator.\n          return Image(\n            image: image,\n            fit: BoxFit.cover,\n          );\n        },\n      ),\n    );\n  }\n}\n\n

\n

使用来自 Google 图片的随机 gif 的效果：

\n

https://i.stack.imgur.com/64oQ9.gif

\n\n

\xe2\x84\xb9\xef\xb8\x8f 当然，您可以使用您选择的小部件，而不是图像，甚至摆脱MaterialIndicatorDelegate并从头开始构建您自己的指标。

\n