当前位置: 首页 > article >正文

Flutter中网络图片加载显示Image.network的具体用法

Image.network的具体用法

Image.network 是 Flutter 中用于从网络加载图片的便捷方法。它基于 NetworkImage,可以快速加载并显示网络图片。以下是 Image.network 的具体用法和常见参数说明。


基本用法

最简单的用法是提供一个图片的 URL:

dart

复制

Image.network('https://example.com/image.png')

常用参数

Image.network 提供了许多参数来定制图片的加载和显示行为。以下是一些常用的参数:

1. src (必填)

图片的 URL 地址。

dart

复制

Image.network('https://example.com/image.png')
2. headers

设置 HTTP 请求头,例如禁用缓存:

dart

复制

Image.network(
  'https://example.com/image.png',
  headers: {
    'Cache-Control': 'no-cache',
  },
)
3. width 和 height

设置图片的宽度和高度:

dart

复制

Image.network(
  'https://example.com/image.png',
  width: 200,
  height: 200,
)
4. fit

设置图片的填充方式,常见的值有:

  • BoxFit.cover:保持宽高比,填满整个空间。

  • BoxFit.contain:保持宽高比,完整显示图片。

  • BoxFit.fill:拉伸图片以填满整个空间。

dart

复制

Image.network(
  'https://example.com/image.png',
  fit: BoxFit.cover,
)
5. alignment

设置图片的对齐方式,例如居中:

dart

复制

Image.network(
  'https://example.com/image.png',
  alignment: Alignment.center,
)
6. color 和 colorBlendMode

为图片添加颜色滤镜:

dart

复制

Image.network(
  'https://example.com/image.png',
  color: Colors.blue,
  colorBlendMode: BlendMode.colorBurn,
)
7. loadingBuilder

自定义图片加载过程中的显示内容:

dart

复制

Image.network(
  'https://example.com/image.png',
  loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
    if (loadingProgress == null) {
      return child; // 加载完成,显示图片
    }
    return Center(
      child: CircularProgressIndicator(
        value: loadingProgress.expectedTotalBytes != null
            ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
            : null,
      ),
    );
  },
)
8. errorBuilder

自定义图片加载失败时的显示内容:

dart

复制

Image.network(
  'https://example.com/invalid-url.png',
  errorBuilder: (BuildContext context, Object error, StackTrace? stackTrace) {
    return Text('加载失败');
  },
)
9. frameBuilder

自定义图片加载过程中的动画效果:

dart

复制

Image.network(
  'https://example.com/image.png',
  frameBuilder: (BuildContext context, Widget child, int? frame, bool wasSynchronouslyLoaded) {
    if (wasSynchronouslyLoaded) {
      return child; // 图片已同步加载完成
    }
    return AnimatedOpacity(
      child: child,
      opacity: frame == null ? 0 : 1,
      duration: const Duration(seconds: 1),
      curve: Curves.easeOut,
    );
  },
)
10. cacheWidth 和 cacheHeight

设置图片的缓存分辨率(以像素为单位),用于优化内存占用:

dart

复制

Image.network(
  'https://example.com/image.png',
  cacheWidth: 100,
  cacheHeight: 100,
)
11. repeat

设置图片的重复方式,例如平铺:

dart

复制

Image.network(
  'https://example.com/image.png',
  repeat: ImageRepeat.repeat,
)
12. filterQuality

设置图片的过滤质量,例如 FilterQuality.low 或 FilterQuality.high

dart

复制

Image.network(
  'https://example.com/image.png',
  filterQuality: FilterQuality.low,
)

完整示例

以下是一个完整的示例,展示了 Image.network 的常见用法:

dart

复制

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Image.network 示例')),
        body: Center(
          child: Image.network(
            'https://example.com/image.png',
            width: 300,
            height: 200,
            fit: BoxFit.cover,
            headers: {
              'Cache-Control': 'no-cache',
            },
            loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
              if (loadingProgress == null) {
                return child;
              }
              return CircularProgressIndicator(
                value: loadingProgress.expectedTotalBytes != null
                    ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
                    : null,
              );
            },
            errorBuilder: (BuildContext context, Object error, StackTrace? stackTrace) {
              return Text('加载失败');
            },
          ),
        ),
      ),
    );
  }
}

总结

Image.network 是一个非常强大的工具,可以轻松加载和显示网络图片。通过合理使用其参数,你可以实现图片的自定义加载、错误处理、动画效果等功能。


http://www.kler.cn/a/580860.html

相关文章:

  • [免费]微信小程序(图书馆)自习室座位预约管理系统(SpringBoot后端+Vue管理端)(高级版)【论文+源码+SQL脚本】
  • Vue前端开发-Coupon组件
  • 时序数据库 InfluxDB 3.0 版本性能实测报告:写入吞吐量提升效果验证
  • 鸿蒙跨平台框架ArkUI-X
  • 后 Safe 时代:多签钱包安全新范式与防范前端攻击的新思路
  • Windows控制台函数:设置文字颜色样式函数SetConsoleTextAttribute()
  • SQL 窗口函数之lead() over(partition by ) 和 lag() over(partition by )
  • 批量将 Excel 转换 PDF/Word/CSV以及图片等其它格式
  • 手写Tomcat
  • C++ 内存模型
  • 从头开始开发基于虹软SDK的人脸识别考勤系统(python+RTSP开源)(三)
  • 1688商品列表商品详情API接口全面解析
  • upload-labs详解(13-20)文件上传分析
  • 大湾区经济网战略媒体澳门《红刊》访霍英东集团
  • 转自南京日报:天洑软件创新AI+仿真技术变制造为“智造
  • 从C#中的MemberwiseClone()浅拷贝说起
  • CentOS7离线部署安装Dify
  • 网络安全技术整体架构 一个中心三重防护
  • 基于架构的软件开发(ABSD)
  • 3D模型语义搜索引擎