Flutter AssertImage


简介

从AssetBundle中获取图像,根据上下文来确定使用确切的图像

根据给定的一些资源,AssetImage 可以根据你给定的配置,然后根据设备的像素比率和大小,然后选择合适的资源文件

基本用法

从AssetBundle中获取图像,根据上下文来确定使用确切的图像

使用命名资源文件去匹配不同像素的设备

以'Nx'的形式命名图片资源文件,其中N标识改资源文件的标称设备像素比率

假如某一个应用程序使用命名为 heart.png 的图标,此图标的表示为1.0(主图标),以及 1.5和2.0像素比。然后我们在资源包中应如下命名:

heart.png
1.5x/heart.png
2.0x/heart.png

在具有1.0设备像素比的设备上,所选择的图片是 heart.png ,在具有1.3设备的像素比的设备上,所选择图片是 1.5x/heart.png. 只要变量命名处于同一个目录层级,资源文件的目录层级就无关紧要。如下也是有效的目录结构。

icons/heart.png
icons/1.5x/heart.png
icons/2.0x/heart.png

获取资源文件

需要从package中获取资源文件,需要提供package的参数。我们需要在项目中的 pubspec.yaml 文件里加上具体的asset文件:

flutter:
  assets:
    - icons/heart/.png

然后可以如下使用

AssetImage('icons/heart.png');

在package中的资源

如果需要从package中获取资源文件,必须提供package参数。加入下面的结构位于一个名为 my_icons 的包中,然后获取图像:

AssetImage('icons/heart.png', package: 'my_icons')

如果在package的pubspec.yaml中指定了所需资源,则会自动将其与应用程序捆绑在一起。 特别是,package本身使用的资产必须在pubspec.yaml中指定。

package 还可以选择在其'lib /'文件夹中具有未在其pubspec.yaml中指定的资源。 在这种情况下,对于要捆绑的图像,应用程序必须指定要包含的图像。 例如,名为fancy_backgrounds的包可能具有

lib/backgrounds/background1.png
lib/backgrounds/background2.png
lib/backgrounds/background3.png

比如说第一张图片,应用程序的pubspec.yaml应该在资源部分指定它:

assets:
   - packages/fancy_backgrounds/backgrounds/background1.png

lib /是隐含的,因此它不应包含在 assets 路径中。

实例演示

import 'package:flutter/material.dart';

class AssetImageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
        children: <Widget>[
          CircleAvatar(
            backgroundImage: AssetImage('assets/images/food01.jpeg'),
          ),
          Container(
            child: Image(
              image: AssetImage('assets/images/food02.jpeg'),
              height: 300.0,
              width: 300.0,
            ),
          )
        ],
      );
  }
}