Flutter组件基础——Image

原创

莫空9081

修改于 2021-07-22 18:09:57

1.6K0

修改于 2021-07-22 18:09:57

文章被收录于专栏：iOS 备忘录iOS 备忘录

Flutter组件基础——Image

Image是Flutter中的图片组件，类似于iOS中的UIImageView，可加载资源图片、网络图片、本地图片等，可设置拉伸方式，重复模式等。

Image加载方法

Image的加载方法有以下几种：

Image.asset，加载本地图片，比如打包到项目中的图片
Image.file，加载设备中的图片，比如存储到本地的图片
Image.memory，加载内存中的图片
Image.network，加载网络图片

使用方式各有不同，如下：

Image.asset(name)是Image(image: AssetImage(name))
Image.file(path)是Image(image: FileImage(File(path)))
Image.network(url)是Image(image: NetworkImage(url))
Image.memory(list)是Image(image: MemoryImage(list))

而且：

使用asset images时，图片打包在apk或ipa中，会导致包变大加载时间对比：NetworkImage > FileImage > AssetImage > MemoryImage

Image.asset

Flutter加载本地图片，参考添加资源和图片，步骤如下：

找到pubspec.yaml文件，找到这里# To add assets to your application, add an assets section, like this:，打开下面的注释，这里需要注意yaml文件的格式对齐问题；
和pubspec.yaml并列创建一个assets文件夹，里面放入图片；
然后编辑第一步打开的注释文件，写入图片的路径，但是需要注意路径要包含最外层的assets，示例如下：

W0qASA.png

W0qEQI.png

添加成功后，使用时，也需要注意路径是从assets开始的，代码如下：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Widget',
      home: Scaffold(
        body: Center(
          child: Container(
            child: new Image.asset('assets/images/jietu.png'),
            // child: new Image(
            //   image: AssetImage('assets/images/jietu.png'),
            // ),
            width: 300.0,
            height: 200.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

Image.network

加载网络图片，代码如下：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Widget',
      home: Scaffold(
        body: Center(
          child: Container(
            child: new Image.network(
              'https://inews.gtimg.com/newsapp_ls/0/13792660143/0.jpeg',
            ),
            width: 300.0,
            height: 200.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

Image的属性

Image的常用属性如下：

alignment: 图片相对于父视图的对齐方式，当图片大小小于父视图大小时可看出效果
color: 不为空时，根据colorBlendMode来对图片对每个像素进行混合
colorBlendMode: 图片混合模式
filterQuality: 图片渲染对质量
fit: 图片显示模式
height: 图片宽度
width: 图片高度
repeat: 图片重复模式

代码如下：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Widget',
      home: Scaffold(
        body: Center(
          child: Container(
            child: new Image.network(
              'https://inews.gtimg.com/newsapp_ls/0/13792660143/0.jpeg',
              alignment: Alignment.center,
              filterQuality: FilterQuality.low,
              // scale: 1.0,
              // fit: BoxFit.scaleDown,
              // repeat: ImageRepeat.repeatY,
              // color: Colors.greenAccent,
              // colorBlendMode: BlendMode.colorDodge,
            ),
            width: 300.0,
            height: 200.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}