flutter開發(fā)實戰(zhàn)-顯示本地圖片網(wǎng)絡(luò)圖片及緩存目錄圖片

在最近開發(fā)中碰到了需要顯示緩存目錄圖片，這里順便整理一下，顯示本地圖片、網(wǎng)絡(luò)圖片、緩存目錄圖片的方法。

一、工程本地圖片顯示

• 1 在項目根目錄下創(chuàng)建名為 images文件夾，也可以將images放在asserts文件夾下
• 2.在pubspec.yaml中配置images相關(guān)的路徑，并執(zhí)行pub get 使配置的文件生效

在pubspec.yaml文件中

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  assets:
    - assets/images/
    - assets/images/common/
    - assets/images/icons/

調(diào)用本地圖片顯示代碼

Widget _buildLoadingWidget(BuildContext context) {
    return ImageHelper.wrapAssetAtImages(
      "icons/ic_toast_loading.png",
      width: 50.0,
      height: 50.0,
    );
  }

// ImageHelper.wrapAssetAtImages
static Image wrapAssetAtImages(String name,
      {double? width, double? height, BoxFit? fit}) {
    return Image.asset(
      "assets/images/" + name,
      width: width,
      height: height,
      fit: fit,
      errorBuilder: (context, url, error) =>
          imageErrorHolder(width: width, height: height),
    );
  }

還可以使用AssetImage及Image.asset

Image(
  image: AssetImage("assets/images/icons/ic_toast_loading.png"),
  width: 100.0
);

Image.asset("assets/images/icons/ic_toast_loading.png",
  width: 100.0
);

二、顯示網(wǎng)絡(luò)圖片

網(wǎng)絡(luò)圖片顯示，使用NetworkImage 可以加載網(wǎng)絡(luò)圖片

Image(
  image: NetworkImage(
      "imageUrl"),
  width: 100.0,
)

使用Image.network

Image.network(
  "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
  width: 100.0,
)

使用cached_network_image插件實現(xiàn)加載圖片

// 處理網(wǎng)絡(luò)圖片的url
  static Widget imageNetwork(
      {required String imageUrl,
      double? width,
      double? height,
      BoxFit? fit,
      Widget? placeholder,
      Widget? errorHolder}) {

    double? cacheWidth;
    if (width != null) {
      cacheWidth = width * 2.0;
    }

    double? cacheHeight;
    if (height != null) {
      cacheHeight = height * 2.0;
    }

    if (!(imageUrl.isNotEmpty && imageUrl.startsWith("http"))) {
      return Container();
    }

    String aCropImageUrl = ImageHelper.formatImageUrl(
        imageUrl: imageUrl, width: cacheWidth, height: cacheHeight);

    return CachedNetworkImage(
      maxWidthDiskCache: cacheWidth?.round(),
      maxHeightDiskCache: cacheHeight?.round(),
      imageUrl: aCropImageUrl,
      fit: fit,
      width: width,
      height: height,
      placeholder: (context, url) => (placeholder ?? Container()),
      errorWidget: (context, url, error) =>
          (errorHolder ?? imageErrorHolder(width: width, height: height)),
    );
  }

  static Widget imageErrorHolder({double? width, double? height}) {
    return Container(
      width: width,
      height: height,
    );
  }

  static Widget placeHolder({double? width, double? height}) {
    return SizedBox(
        width: width,
        height: height,
        child: CupertinoActivityIndicator(radius: min(10.0, width! / 3)));
  }

三、加載緩存目錄圖片

當(dāng)我們將圖片保存到Document、Cache目錄下，需要將其顯示出來，知道的ImagePath，可以使用File(ImagePath)將圖片顯示出來。

String? imagePath = picArg!['imagePath'];
      if (imagePath != null) {
        return Image.file(
          File(imagePath!),
          width: widget.width,
          height: widget.height,
          fit: BoxFit.cover,
        );
      }

當(dāng)然也可以實現(xiàn)ImageProvider來處理顯示圖片問題

四、小結(jié)

flutter開發(fā)實戰(zhàn)-顯示本地圖片網(wǎng)絡(luò)圖片及緩存目錄圖片。顯示本地圖片、網(wǎng)絡(luò)圖片、緩存目錄圖片的幾種方法

學(xué)習(xí)記錄，每天不停進(jìn)步。文章來源地址http://www.zghlxwxcb.cn/news/detail-619662.html

到了這里，關(guān)于flutter開發(fā)實戰(zhàn)-顯示本地圖片網(wǎng)絡(luò)圖片及緩存目錄圖片的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！