flutter学习之图片显示

最新推荐文章于 2025-07-23 18:00:24 发布

owenli2015

最新推荐文章于 2025-07-23 18:00:24 发布

阅读量5.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.youkuaiyun.com/owenli2015/article/details/81227366

flutter 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在Flutter项目中加载本地及网络图片，并演示了使用cached_network_image插件加载网络图片并将其缓存的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flutter图片资源可以放在项目中的任意文件夹下面，之后需要再pubspec.yaml文件夹中add这个图片的目录

框框中图片a在项目根目录的assets文件夹下

该文件夹下创建之文件夹n.0x表示图片的倍率

显示一张本地图片

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: Image.asset("assets/a.png"),
      ),
    );
  }
}

显示一张网络图片

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: Image.network("https://www.baidu.com/img/bd_logo1.png"),
      ),
    );
  }
}

显示一张网络图片，并且存入缓存

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new CachedNetworkImage(
          placeholder: new CircularProgressIndicator(),
          imageUrl:
          'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
        ),
      ),
    );
  }
}

需要添加依赖