flutter 网络镜像与加载生成器抖动

14ifxucb  于 2023-01-21  发布在  Flutter
关注(0)|答案(1)|浏览(116)

我使用的是我的版本中的NetworkImageWidget,但是当我在loadingBuilder中使用Shimmer而不是圆形进度指示器时,它不起作用!!
有谁能帮我用同样的附加代码纠正这个错误吗?我想找到这个问题的解决方案。
Package https://pub.dev/packages/shimmer
守则:

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

class NetworkImageWidget extends StatelessWidget {
  final double? width;
  final double? height;
  final String path;
  final BoxFit? fit;
  final BlendMode? colorBlendMode;
  final Color? imageColor;
  final double radius;
  final Color? backgroundColor;
  final List<BoxShadow>? boxShadow;
  final BoxBorder? border;
  final EdgeInsetsGeometry? padding;

  const NetworkImageWidget({
    Key? key,
    required this.path,
    this.width,
    this.height,
    this.fit,
    this.imageColor,
    this.colorBlendMode,
    this.radius = 0.0,
    this.backgroundColor,
    this.boxShadow,
    this.border,
    this.padding,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        boxShadow: boxShadow,
        color: Colors.transparent,
        borderRadius: BorderRadius.circular(radius),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(radius),
        child: Container(
          height: height,
          width: width,
          padding: padding,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(radius),
            color: backgroundColor,
            boxShadow: boxShadow,
            border: border,
          ),
          child: Image.network(
            path,
            fit: fit ?? BoxFit.cover,
            height: height,
            width: width,
            colorBlendMode: colorBlendMode ?? BlendMode.darken,
            color: imageColor ?? Colors.black26,
            loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
              if (loadingProgress == null) return child;
              return Shimmer.fromColors(
                baseColor: Colors.grey[500]!,
                highlightColor: Colors.grey[100]!,
                child: SizedBox(width: width, height: height),
              );
            },
            errorBuilder: (context, error, stackTrace) {
              return const Center(child: Icon(Icons.error_outline));
            },
          ),
        ),
      ),
    );
  }
}
wtzytmuj

wtzytmuj1#

此示例将Shimmer.fromColors构件 Package 在Container中,其宽度和高度与图像的尺寸匹配,以确保在加载过程中微光效果覆盖整个图像。此外,它还将Shimmer.fromColors中的SizedBox Package 到Container中,以确保在加载过程中微光效果覆盖整个图像。
请确保传递给Image.network()小部件的路径变量是指向要显示的图像的有效URL,并且传递的宽度和高度

import 'package:flutter/material.dart';
    import 'package:shimmer/shimmer.dart';
    
    class NetworkImageWidget extends StatelessWidget {
      final double? width;
      final double? height;
      final String path;
      final BoxFit? fit;
      final BlendMode? colorBlendMode;
      final Color? imageColor;
      final double radius;
      final Color? backgroundColor;
      final List<BoxShadow>? boxShadow;
      final BoxBorder? border;
      final EdgeInsetsGeometry? padding;
    
      const NetworkImageWidget({
        Key? key,
        required this.path,
        this.width,
        this.height,
        this.fit,
        this.imageColor,
        this.colorBlendMode,
        this.radius = 0.0,
        this.backgroundColor,
        this.boxShadow,
        this.border,
        this.padding,
      }) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Container(
          decoration: BoxDecoration(
            boxShadow: boxShadow,
            color: Colors.transparent,
            borderRadius: BorderRadius.circular(radius),
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(radius),
            child: Container(
              height: height,
              width: width,
              padding: padding,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(radius),
                color: backgroundColor,
                boxShadow: boxShadow,
                border: border,
              ),
              child: Image.network(
                path,
                fit: fit ?? BoxFit.cover,
                height: height,
                width: width,
                colorBlendMode: colorBlendMode ?? BlendMode.darken,
                color: imageColor ?? Colors.black26,
                loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
                  if (loadingProgress == null) return child;
                  return Container(
                    width: width,
                    height: height,
                    child: Shimmer.fromColors(
                      baseColor: Colors.grey[500]!,
                      highlightColor: Colors.grey[100]!,
                      child: SizedBox(width: width, height: height),
                    ),
                  );
                },
                errorBuilder: (context, error, stackTrace) {
                  return const Center(child: Icon(Icons.error_outline));
                },
              ),
            ),
          ),
        );
      }
    }

相关问题