Flutter Widget 之Image

有时App需要显示图片，好在Flutter有个叫Image的widget正好派上用场！

这个widget能让图片显示于屏幕

FLutter提取显示图像的方式有很多种。

这突袭那个可能来自你的App所保存的AssetBundle,使用Image.asset,并提供asset名称。

Image.asset(
    'assets/images/dash.jpg',
)

Image.asset会根据设备的像素密度自动以适当版本显示文件,您只需提供其他版本，并在pubspec.yaml加列。

flutter:
    assets:
        - images/dash.png
        - images/2x/dash.png

您也可显示来自网络的图像。这得用上Image.network()并提供一个URL。

Image.network(
    'http://example.com/dash.jpg',
)

Flutter将以加载缓存的方式显示图片。请记住，网络图片的加载速度，可能不及Asset中的图片，且用户得联网才能看到初始图像。

您可提交loadingBuilder让框架反复调用以便从网络下载图片。loadingBuilder内含下载进度参数progress，您可用来让用户知道实际图像还要多久才会下载完毕并显示，

Image.network(
    'https://example.com/dash.jpg',
    loadingBuilder: (context, child, progress) {
        return progress == null
            ? child
            : LinearProgressIndicator(...);
    }
)

您还可以选择显示来自用户设备的path,这部分可利用Image.file

Image.file(
    'path/to/dash.jpg',
)

而且以字节数组存于RAM的图像，也可显示在屏幕，用Image.memory就可办到。

Image.memory(
    myUnit8List,
),

无论图像来源为何，都可用参数加以配置。设定属性width、height以便能确定图像的显示规格，且能避免加载布局时出现难看的抖动。

Image.asset(
    'assets/image/dash.jpg',
    width: 200,
    height: 400,
)

设置图片的fit属性，以分配其刻入布局的空间。默认选项为contain，但还有其他选项

Image.asset(
    'assets/image/dash.jpg',
    width: 200,
    height: 400,
    fit: BoxFit.contain,
),

可拉伸的fill

不拉伸的cover 裁切

您还可以使用color和colorBlendMode为图像来套色。有很多方式可选。

Image.asset(
    'assets/image/dash.jpg',
    color: COlors.red,
    colorBlendMode: BlendMode.darken,
),

别忘了为图像加上语义化标签semanticLabel，这些将显示辅助技术中，并使您的应用更易于访问。

Image.asset(
    'assets/image/dash.jpg',
    semanticLabel: 'Dash moscot',
),

Flutter支持JPEG,PNG,GIF,WebP,BMPhe WBMP,

是的，您也可以显示GIF和WebP动画

如果想了解有关Image 的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址