我在许多 flutter 代码库中注意到的最常见错误之一是在屏幕上显示图像(尤其是在尝试显示网络图像时)。有些人设法让它工作,但不知道它为什么起作用,甚至不知道为什么他们应该使用什么,因此,这就是本文的原因。
显示图像是大多数移动应用程序的基础。 Flutter 提供了一个 Image 小部件来处理不同类型的图像。在 Flutter 中,我们可以通过以下任一方式在屏幕上显示图像:
- 创建一个 ImageProvider 并将其传递给 Image 小部件或
- 将图像 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 之间的区别
NetworkImage
和 Image.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
。