编写最佳 Flutter 代码 :NetworkImage 与 Image.network 以及何时使用它们

我在许多 flutter 代码库中注意到的最常见错误之一是在屏幕上显示图像(尤其是在尝试显示网络图像时)。有些人设法让它工作,但不知道它为什么起作用,甚至不知道为什么他们应该使用什么,因此,这就是本文的原因。

显示图像是大多数移动应用程序的基础。 Flutter 提供了一个 Image 小部件来处理不同类型的图像。在 Flutter 中,我们可以通过以下任一方式在屏幕上显示图像:

  1. 创建一个 ImageProvider 并将其传递给 Image 小部件或
  2. 将图像 url 直接传递给图像小部件

创建一个 ImageProvider 并将其传递给 Image 小部件

下面是 Flutter 中 Image 类的默认构造函数的示例代码片段。

dart 复制代码
Image(
  image: YOUR_IMAGE_PROVIDER
)

这里,Image 类需要一个 ImageProvider 类型的图像属性,在这里传递任何其他类型都会导致应用程序崩溃。根据图像的位置,有多种创建 ImageProvider 对象的方法。下面是常见的 ImageProvider 列表;

  • AssetImage,用于从 assets 创建 ImageProvider 对象
  • NetworkImage,用于从网络创建 ImageProvider 对象
  • MemoryImage,用于从 Uint8List 创建 ImageProvider 对象

使用这些类中的任何一个创建 ImageProvider 对象都非常简单,并且它们都遵循相同的模式。请参阅下面的代码片段。

dart 复制代码
NetworkImage(
  "https://example.com/image.jpg",
  width: 100,
  height: 100,
)

请注意,这些 ImageProvider 本身无法在屏幕上显示图像,因为它们不是小部件,它们需要小部件的帮助才能做到这一点,因此需要 Image 小部件,例如到目前为止两个代码片段的组合应该是能够在屏幕上显示图像。

dart 复制代码
Image(
  image: NetworkImage(
      "https://example.com/image.jpg",
      width: 100,
      height: 100,
    )
  )

将图像 url 直接传递给 Image 小部件

这非常简单,因为除了图像网址之外,它不依赖于任何其他东西,例如

dart 复制代码
Image.network(your_imageg_url)

这里需要注意两件事:首先,这会返回一个小部件,因此可用于在屏幕上显示图像。其次,这也是 Image 小部件类的命名构造函数。其他可用于在屏幕上显示图像的命名 Image 类构造函数包括:

  • Image.asset,用于使用 key 从 AssetBundle 获取图像
  • Image.file,用于从文件中获取图像。
  • Image.memory,用于从 Uint8List 获取图像。

因此,单独使用它们就可以在屏幕上显示图像。

NetworkImage 和 Image.network 之间的区别

NetworkImageImage.network 的主要区别在于它们提供的输出类型,这反过来又影响了它们的使用方式。就像 Image.network 创建了一个部件一样,NetworkImage 创建了 ImageProvider,它依赖于图像类或任何需要 Imageprovider 才能在屏幕上显示图像的小部件。

话虽如此,在需要 ImageProvider 并且需要从网络加载图像的地方使用 NetworkImage。需要 imageProvider 的常见地方包括 FadedInImage、背景(例如容器、圆形头像)等,

dart 复制代码
Container(
  child: FadedInImage(
    placeholder: AssetImage('assets/placeholder.png'),
    image: NetworkImage('https://example.com/image.jpg'),
    fadeInDuration: Duration(milliseconds: 300),
  ),
)

当您只想在屏幕上输出图像时,请使用 Image.network


原文:medium.com/@xrolediamo...

相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍