Flutter Image 组件

947 阅读1分钟

载入图片的几种方式:

Image.asset:加载资源图片,就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径
Image.network:网络资源图片,需要网络路径地址
Image.file:加载本地图片,是一个SD卡的绝对路径,跟包体无关
Image.memory: 加载Uint8List资源图片

图片的混合模式

child:new Image.network(
  'https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C26%2C1190%2C785%3Bc0%3Dbaike150%2C5%2C5%2C150%2C50/sign=197c354ebf003af359f58620081aea6e/86d6277f9e2f07080797ff47e024b899a801f2e3.jpg',
  color: Colors.greenAccent,
  colorBlendMode: BlendMode.darken,
),

repeat图片重复

ImageRepeat.repeat : 横向和纵向都进行重复,直到铺满整个画布
ImageRepeat.repeatX: 横向重复,纵向不重复
ImageRepeat.repeatY:纵向重复,横向不重复

Width和Height属性:

一般结合 ClipOval 才能看到效果

圆角、圆形图片

return Center(
  child: Container(
    width: 300.0,
    height: 300.0,
    decoration: BoxDecoration(
        color: Colors.yellow,
        borderRadius: BorderRadius.circular(150),
        image: DecorationImage(
            image: new NetworkImage(
                'https://www.fevte.com/data/attachment/forum/201203/23/111646w5j1zbp10k7w0uwp.jpg'),
            fit: BoxFit.cover)),
  ),
);

return Center(
  child: Container(
      child: ClipOval(
    child: Image.network(
      "https://abc.2008php.com/2011_Website_appreciate/2011-12-30/20111230224943.jpg",
      width: 150.0,
      height: 150.0,
    ),
  )),
);