Flutter -------- 加载本地图片资源和网络图片

最新推荐文章于 2024-05-22 09:37:30 发布

weixin_34352449

最新推荐文章于 2024-05-22 09:37:30 发布

阅读量1.4k

点赞数

文章标签：移动开发 python

原文链接：https://my.oschina.net/zhangqie/blog/3049620

版权

2019独角兽企业重金招聘Python工程师标准>>>

在Flutter加载本地图片资源

在Flutter项目目录下创建文件夹 images ，在文件夹中添加几张图片

指定资源

pubspec.yaml文件中

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

--------


flutter:

this:
  assets:
    - images/lake.jpg
    - images/a.png
    - images/pic1.png
    - images/pic2.png
    - images/loading_circle.gif

该assets部分的flutter部分指定应包含在应用程序中的文件。每个asset都通过相对于pubspec.yaml文件所在位置的显式路径进行标识。

asset的声明顺序是无关紧要的。asset的实际目录可以是任意文件夹（在本示例中是images）。

代码：

class UITest2_Image extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Image"),
      ),
      body: new Center(

        //水平平分图片
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            new Image.asset('images/a.png',width: 100,height: 100,),
            new Image.asset('images/a.png',width: 100,height: 100,),
            new Image.asset('images/a.png',width: 100,height: 100,),
          ],
        ),


      //垂直平分图片
      /*  child: new Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            new Image.asset('images/a.png',width: 100,height: 100,),
            new Image.asset('images/a.png',width: 100,height: 100,),
            new Image.asset('images/a.png',width: 100,height: 100,),
          ],
        ),*/

      ),
    );
  }
}

官方文档

https://docs.flutter.io/flutter/painting/AssetImage-class.html

https://docs.flutter.io/flutter/widgets/Image-class.html

网络图片实现：

class NetImage extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Image"),
      ),
      body: Column(
        children: <Widget>[
          new Image.network("https://avatars3.githubusercontent.com/u/19513504?s=460&v=4"),
          //占位符图片（默认显示的图片）
          new FadeInImage.assetNetwork(placeholder: 'images/loading_circle.gif', image: "https://avatars3.githubusercontent.com/u/19513504?s=460&v=4"),
          //gif
          new Image.network('https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true',)
        ],
      ),
    );
  }
}

参考文档：

https://docs.flutter.io/flutter/widgets/Image/Image.network.html

转载于:https://my.oschina.net/zhangqie/blog/3049620