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

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

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

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

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

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

Image(
  image: YOUR_IMAGE_PROVIDER
)

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

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

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

NetworkImage(
  "https://example.com/image.jpg",
  width: 100,
  height: 100,
)

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

Image(
  image: NetworkImage(
      "https://example.com/image.jpg",
      width: 100,
      height: 100,
    )
  )

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

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

Image.network(your_imageg_url)

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

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

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

NetworkImage 和 Image.network 之间的区别

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

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

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

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