dart 使用自定义gif而不是微调器刷新指示器

3bygqnnd 于 2023-06-19 发布在其他

关注(0)|答案(1)|浏览(160)

有人知道如何用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指示器示例非常不清楚和过时。
有人知道这个问题的解决方案吗？
先谢谢你了。

dart

来源：https://stackoverflow.com/questions/70825452/refresh-indicator-with-a-custom-gif-instead-of-a-spinner

1条答案

按热度按时间

6rqinv9w1#

下面是一个如何使用前面提到的**custom_refresh_indicator**包实现此功能的示例。

代码

class ImageIndicator extends StatelessWidget {
  /// The image to be displayed as an indicator.
  final ImageProvider image;

  /// The callback that will be triggered as a result
  /// of the pull-to-refresh gesture.
  final AsyncCallback onRefresh;

  /// A scrollable widget, such as [ListView].
  final Widget child;

  const ImageIndicator({
    Key? key,
    required this.child,
    required this.image,
    required this.onRefresh,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomRefreshIndicator(
      onRefresh: onRefresh,
      child: child,
      /// We use the [MaterialIndicatorDelegate] class, which simulates
      /// the behavior of the built-in [RefreshIndicator] widget container.
      builder: MaterialIndicatorDelegate(
        /// We can make some adjustments to the default material container
        backgroundColor: Colors.black,
        clipBehavior: Clip.antiAlias,
        builder: (context, controller) {
          /// This is the interesting part!
          /// Here you specify the content of the custom refresh indicator.
          return Image(
            image: image,
            fit: BoxFit.cover,
          );
        },
      ),
    );
  }
}

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

https://i.stack.imgur.com/64oQ9.gif
当然️，您可以使用您选择的小部件，甚至摆脱MaterialIndicatorDelegate，从头开始构建自己的指标，而不是图像👷。

赞(0）回复(0）举报 2023-06-19

我来回答

dart 使用自定义gif而不是微调器刷新指示器

1条答案

代码

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

相关问题

热门标签

最新问答