图片

发表于 更新于 分类于

Image widget 有一个必选的 image 参数，它对应一个 ImageProvider。下面我们分别演示一下如何从 asset 和网络加载图片。

从 asset 中加载图片

  1. 在工程根目录下创建一个 images 目录，并将图片 avatar.png 拷贝到该目录。
  2. 在 pubspec.yaml 中的 flutter 部分添加如下内容：
    1
    2
    assets:
      - images/avatar.png
    注意: 由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处 assets 前面应有两个空格。
  3. 加载该图片
    1
    2
    3
    4
    Image(
      image: AssetImage("images/avatar.png"),
      width: 100.0
    );
    Image 也提供了一个快捷的构造函数 Image.asset 用于从 asset 中加载、显示图片：
    1
    Image.asset("images/avatar.png", (width: 100.0));

从网络加载图片

1
2
3
4
5
Image(
  image: NetworkImage(
    "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
  width: 100.0,
)

Image 也提供了一个快捷的构造函数 Image.network 用于从网络加载、显示图片：

1
2
3
4
Image.network(
  "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
  (width: 100.0)
);