flutter学习--Image组件

最新推荐文章于 2024-04-08 03:19:59 发布

胖哥哥飘过

最新推荐文章于 2024-04-08 03:19:59 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/pgg_cold/article/details/90182300

本文介绍了Flutter中Image组件的使用，包括通过Image.asset、Image.network、Image.file和Image.memory加载图片的方式，详细讲解了fit属性设置，如BoxFit.fill、BoxFit.contain等。同时提到了图片的混合模式colorBlendMode以及repeat属性用于图片重复显示的各种选项。

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

加入图片的几种方式

Image.asset:加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
Image.network:网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
Image.file:加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。
Image.memory: 加载Uint8List资源图片
1.Image.asset方法：
首先在项目跟目录新建文件夹assets/images，在images文件夹下添加一张图片,然后在pubspec.yaml文件中配置asset资源，在flutter:节点下添加；

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
          - assets/images/你的图片名

配置完成，package get
然后，在代码中使用：

body: Center(
          child: Container(
            child: Image.asset(
              'assets/images/ic_launcher72.png',
              width: 200.0,
              height: 200.0,
              scale: 1.0,
              color: Colors.black,
            ),
            width: 400.0,