编写最佳 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...

相关推荐
风尚云网10 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子020412 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing14 分钟前
React核心功能详解(一)
前端·react.js·前端框架
捂月17 分钟前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆25 分钟前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China26 分钟前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q26 分钟前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海28 分钟前
Chrome离线安装包下载
前端·chrome
m512738 分钟前
LinuxC语言
java·服务器·前端
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html