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,
    );
  }
}