Flutter显示网络图片 2022-12-27 周二

简介

Image.asset可以显示本地图片资源,这个用得很多。
Image.network可以显示网络图片,勉强可以用。不过现实中会更多选用第三方插件
cached_network_image

企业微信截图_70729bcf-1799-4aa7-ac32-0e03268d3f84.png

接入

flutter pub add cached_network_image

url

  • 既然是网络图片,url就应该作为一个必传的字段

  • url还需要判断一下是否有效,不然会崩溃

  • 在实际使用时,还需要缺失http前缀的情况,可以酌情补上。

fit参数

项目中用得最多是BoxFit.fill,所以这里作为默认参数给出。

占位图

  • 占位图根据大小,给了4种

  • 所以,不指定占位图的情况下,就自己给一个

  • 错误图不给,价值不大。用占位图代替。

封装一层

基于以上考虑,在外面统一再封装一层,隐藏一些参数

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:panda_buy/r.dart';

class NetworkImageWidget extends StatelessWidget {
  const NetworkImageWidget({
    Key? key,
    required this.url,
    this.placeholder,
    this.width,
    this.height,
    this.fit = BoxFit.fill,
  }) : super(key: key);

  final String url;
  final String? placeholder;
  final double? width;
  final double? height;
  final BoxFit? fit;

  @override
  Widget build(BuildContext context) {
    String actualUrl;
    bool isUrlExist;
    String actualPlaceholder;

    /// 网络图片url至少需要一定的长度
    const minUrlLength = 6;
    if (url.length > minUrlLength) {
      isUrlExist = true;
      actualUrl = url;
    } else {
      isUrlExist = false;
      actualUrl = '';
    }

    /// 实际使用中遇到缺失http的情况,自动补上
    if (isUrlExist) {
      if (!actualUrl.startsWith('http')) {
        actualUrl = 'https:$actualUrl';
      }
    }

    /// 判断url是否有效
    bool isUrlValidate = false;
    if (isUrlExist) {
      Uri? uri = Uri.tryParse(actualUrl);
      if (uri != null) {
        String host = uri.host;
        if (host.isNotEmpty) {
          isUrlValidate = true;
        }
      }
    }

    /// 如果没有指定占位图,根据width,自己给一个
    actualPlaceholder = placeholder ?? '';
    double tempWidth = width ?? 0;
    if (actualPlaceholder.isEmpty) {
      if (tempWidth <= 80) {
        actualPlaceholder = R.assetsImagesPlaceholder80;
      } else if (tempWidth <= 127) {
        actualPlaceholder = R.assetsImagesPlaceholder127;
      } else if (tempWidth <= 160) {
        actualPlaceholder = R.assetsImagesPlaceholder160;
      } else if (tempWidth <= 180) {
        actualPlaceholder = R.assetsImagesPlaceholder180;
      } else if (tempWidth <= 200) {
        actualPlaceholder = R.assetsImagesPlaceholder200;
      } else {
        actualPlaceholder = R.assetsImagesPlaceholder200;
      }
    }

    if (isUrlValidate) {
      return CachedNetworkImage(
        imageUrl: actualUrl,
        placeholder: (context, url) =>
            _buildPlaceholderImage(actualPlaceholder),
        errorWidget: (context, url, error) =>
            _buildPlaceholderImage(actualPlaceholder),
        width: width,
        height: height,
        fit: fit,
        fadeOutDuration: const Duration(milliseconds: 500),
        fadeInDuration: const Duration(milliseconds: 500),
      );
    } else {
      return _buildPlaceholderImage(actualPlaceholder);
    }
  }

  /// 占位图
  Widget _buildPlaceholderImage(String name) {
    return Image.asset(
      name,
      width: width,
      height: height,
      fit: fit,
    );
  }
}

你可能感兴趣的:(Flutter显示网络图片 2022-12-27 周二)